Мои любимые инструменты Sass

 @include describe("A suite") { @include it("contains spec with an expectation") { @include should(expect(1 + 1), to(be(true))); } } 

В итоге:

Как видите, эти две платформы выглядят одинаково. Мне нравится тот факт, что Bootcamp работает на Grunt и NPM с очень простым синтаксисом. С другой стороны, True отлично зарекомендовал себя на Сьюзи и очень легок. С другой стороны, Bootcamp 2 находится в стадии разработки и собирается сделать синтаксис намного проще.

SCSS-Lint

SCSS-Lint — это, пожалуй, инструмент для Sint. Есть JSHint и JSLint для JavaScript, CSSLint для CSS, а теперь SCSS-Lint для Sass. SCSS-Lint помогает вам поддерживать чистоту и порядок кода, выдавая предупреждения всякий раз, когда что-то кажется неправильным. Как и любой линтер, SCSS-линт позволяет вам задавать свои собственные правила с помощью файла конфигурации, как показано ниже:

 test.scss:2 [W] Prefer single quoted strings test.scss:2 [W] Line should be indented 0 spaces, but was indented 1 space test.scss:5 [W] Prefer single quoted strings test.scss:6 [W] URLs should be enclosed in quotes 

Библиотеки

Существует бесчисленное множество библиотек Sass (большинство из которых являются расширениями Compass). Со времени создания Sache.in никогда не было так легко находить новые расширения. По сути, Sache.in — это поиск плагинов для Sass. Вы можете найти определенную библиотеку или теги, или просто просмотреть лучшие расширения Sass.

Среди интересных / забавных работ я бы хотел отметить:

Модернизр Хелпер Миксин

Modernizr Helper Mixin от Daniel Guillan — это очень легкое расширение Compass, которое предоставляет очень простой API для интеграции с Modernizr. По сути, становится очевидным, что вы пытаетесь сделать, когда используете классы .no-* Modernizr в своих .no-* стилей.

 /* SCSS */ .my-selector { @include yep(translate3d opacity) { transform: translate3d(0,100px,0); opacity: 0; } @include nope(translate3d opacity) { top: 100px; display: none; } } /* CSS */ .translate3d.opacity .my-selector { transform: translate3d(0,100px,0); opacity: 0; } .no-js my-selector, .no-translate3d .selector, .no-opacity .selector { top: 100px; display: none; } 

Кавычки

Цитаты , написанные Нико Хагенбургером, довольно странные — мне это очень нравится. Эта микробиблиотека помогает вам использовать точные кавычки в зависимости от языка, который вы используете. В настоящее время он поддерживает более 55 различных языков и легко расширяется для большего количества.

 /* SCSS */ .my-class { @include quotation-marks(en); } /* CSS */ .my-class:before { content: "“"; } .my-class:after { content: "”"; } 

Animate.sass

Animate.sass от Polikin является почетным преемником Animate.css , коллекции CSS-анимаций plug-and-play для улучшения ваших интерфейсов. Он не делает больше, чем просто переписывает оригинальную библиотеку, используя преимущества Sass, такие как циклы, миксины, переменные и тому подобное.

 @include animation-keyframes(fading-entrances/fadeInRight); .my-class { @include animations(fadeInRight); } 

HiDPI

HiDPI — это очень ценное расширение Compass, написанное Кэлигом из The Guardian, которое легко передает фоновые изображения с высоким разрешением на дисплеи высокой плотности (Retina). Учитывая, как трудно работать с дисплеями Retina, такой инструмент является благословением.

 /* SCSS */ .logo { @include hidpi(my-logo); } /* CSS */ .logo { background-image: url('../images/my-logo.png'); } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #logo-auto { background-image: url('../images/my-logo_x2.png'); background-size: 250px 188px; } } 

SassyJSON

SassyJSON начинался как забавный проект между Фабрисом Вайнбергом и мной, пока мы не закончили с парсером JSON, написанным на Sass. По сути, SassyJSON предоставляет простой API для кодирования и декодирования Sass в Sass.

 @include json-encode(((a: (1 2 ( b : 1 )), b: ( #444444, false, ( a: 1, b: test ) ), c: (2 3 4 string)))); // {"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]} $json-decode: json-decode('{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}'); // ("a": 1 2 ("b": 1), "b": #444444 false ("a": 1, "b": "test"), "c": 2 3 4 "string") 

Что хорошо в SassyJSON, так это то, что он сохраняет типы данных Sass при декодировании JSON. Это означает, что если у вас есть строка JSON, содержащая "#444444" , она будет возвращена как color в Sass. То же самое с числом, длиной, углом или чем угодно. Таким образом, вы определенно можете получать данные JSON, декодировать данные в Sass и беспрепятственно использовать их в своей таблице стилей.

Чтобы помочь людям использовать SassyJSON в реальных проектах, например, для синхронизации конфигурации между Sass и JavaScript для общих модулей, мы добавили импортер файлов JSON в Ruby (это единственный компонент Ruby во всем проекте). При этом вы можете импортировать и декодировать файл .json чтобы получить доступ к его содержимому в таблице стилей.

Последние мысли

Вот и все, ребята! Я думаю, что это достойный обзор инструментов Sass.

Если у вас есть более интересные инструменты и ресурсы Sass для обмена, обязательно оставьте комментарий!