Sass — это расширение CSS , которое добавляет в него вложенные правила, переменные, примеси, функции и многое другое. Его использование облегчает задачу создания CSS . После обработки кода Sass вы получаете надлежащим образом отформатированный CSS -код.
Compass — это CSS -фреймворк с открытым исходным кодом, что позволяет использовать CSS3 и популярные шаблоны проектирования. Compass работает исключительно с Sass , что способствует написанию более чистого и быстрого CSS -кода.
В этой статье приведена подборка полезных инструментов для работы с Sass и Compass , которые помогут вам быстро и просто создавать динамические веб-приложения.
1. Compass.app
Compass — это фреймворк, который позволяет намного проще создавать и поддерживать стили и разметку. Используя Compass вы будете генерировать стили в Sass , вместо обычного CSS . Compass.app — это приложение с интерфейсом в виде панелей меню, работающее только с Sass и Compass .
Его применение позволяет дизайнерам очень просто компилировать стили, не используя интерфейс командной строки. Приложение Compass.app написано на Java (JRuby ) и работает на Mac , Linux и РС . Чтобы использовать его, вам не нужно устанавливать среду Ruby .
2. Scout
Scout — это кроссплатформенное приложение, которое запускает Sass и Compass через встроенную среду Ruby , что позволяет легко управлять всеми вашими Sass -проектами. Теперь вам не придется беспокоиться об установке Ruby или заниматься другими техническими вопросами.
3. Codekit
Codekit — это мощный компилятор, который автоматически обрабатывает при сохранении файлы Sass , Compass , Less , Stylus , Jade , Haml , Slim , CoffeeScript и Javascript .
Применение интерактивного обновления окна браузера, оптимизации изображений и быстрой отладки позволяет сделать работу с Compass и Sass чрезвычайно простой. Данное приложение также поддерживает возможность коллективной/командной работы над проектом и помогает уменьшить время загрузки ресурсов с помощью объединения и минимизации файлов.
4. Archetype
Archteype — это Compass/Sass фреймворк для создания настраиваемых, совместимых шаблонов и компонентов интерфейсов. Archteype поставляется с обширной документацией и использует оригинальный синтаксис языков программирования.
5. Susy
Susy предоставляет пользователям адаптивные сетки для Compass . Тем самым заполняя пробел, возникший после того, как из Compass сетки были удалены. Вы можете быстро добавлять для новых макетов контрольные точки медиа-запросов или задавать свои собственные параметры, используя массив сеток Susy . Данный инструмент позволяет за считанные минуты создать небольшой сайт или масштабируемую библиотеку сеток для использования в крупных проектах.
6. The Sassway
Sass Way предлагает обзор последних новостей и событий в сфере разработки CSS с помощью Sass и Compass . На ресурсе публикуются статьи, загружаемые ресурсы и учебные пособия, которые пригодятся как новичкам, так продвинутым пользователям.
7. Sassaparilla
Sassaparilla позволяет, используя Sass и Compass , значительно быстрее запускать адаптивные веб-проекты. Инструмент предназначен в основном для работы с макетами с вертикальной разбивкой элементов.
Он позволяет задавать размеры элементов в пикселях, а во время компиляции они переводятся в Em , что избавляет дизайнеров от необходимости производить сложные математические вычисления. Sassaparilla поддерживает переменные, используемые Sass , например, для определения цвета или других параметров.
8. LivingStyleGuide
LivingStyleGuide Gem — инструмент, предназначенный для упрощения создания руководств по стилям для Sass и Compass . Для того чтобы создать руководство по стилям, просто добавьте к Sass свои комментарии в одном из форматов Markdown .
9. Pondasee
Инструмент Pondasee был разработан, чтобы ускорить процесс создания веб-приложений. Он обладает всеми возможностями и функциями SCSS и Compass , и предназначен для упрощения создания шаблонов.
10. LiveReload
LiveReload встраивается в панель меню и отслеживает все изменения в файловой системе. Как только вы сохраняете файл, он обрабатывается в соответствии с заданными параметрами, и окно браузера обновляется. LiveReload работает с движками SASS , Compass , LESS , Stylus , CoffeeScript , IcedCoffeeScript , Eco , SLIM , HAML и Jade . Он настраивается всего с помощью двух чекбоксов, чтобы вам не пришлось ломать голову над большим количеством опций.
11. Koala
Koala — это GUI -приложение для компиляции CoffeeScript , Compass , Less и Sass , которое делает процесс разработки веб-дизайна более эффективным. Приложение работает на Mac , Linux , и Windows , и включает в себя такие функции, как компиляция в режиме реального времени, поддержка нескольких языков программирования и многое другое.
12. Bootstrap Sass
Bootstrap-Sass — это Sass -версия Bootstrap , которая идеально подходит для разработки Sass -приложений. Инструмент может устанавливаться с Rails , Compass или только с Sass .
13. Forge
Forge — бесплатный набор инструментов, запускаемых из командной строки. Он предназначен для загрузки и разработки в соответствующей среде тем WordPress с использованием таких языков программирования, как Sass , LESS и CoffeeScript .
Forge создает структурированную исходную папку с четкой и простой иерархией (файлы основных шаблонов, SCSS-файлы и опции темы ). При внесении изменений в процессе разработки исходная папка автоматически компилируется в локально установленную систему WordPress .
14. Prepros
Prepros — это приложение, разработанное для упрощения компиляции кода. Оно компилирует коды Sass , Scss , Compass , Less , Jade , Haml и CoffeeScript в режиме реального времени, с автоматическим обновлением окна браузера,. Приложение не имеет зависимостей и имеет такие средства, как встроенный HTTP -сервер, отслеживание файлов в фоновом режиме, уведомления об ошибках и интерактивное включение CSS .
На сегодняшний день, разработчики имеют огромный список инструментов-помощников. Одним из них является Sass. В этой записи я подробно распишу что это такое, для чего его используют и как вам лично начать им пользоваться.
Если вы уже знакомы с Sass/Scss, установили его и готовы начать пользоваться им, то вы можете прочитать вот эту запись — « ». В ней я описываю все тонкости препроцессора, а так же как правильно пользоваться им.
Что такое Sass?
Sass — это разновидность препроцессора, который поможет вам во время разработки front-end части. Факт в том, что CSS файлы становятся все больше и больше и через некоторое время с ними становится сложнее работать.
Sass был создан для того, чтобы решить эту проблему. Используется простой синтаксис (который почти полностью схож с обычным CSS), но при всем при этом добавлено много разных возможностей.
Например, чтобы не прописывать одно и тоже свойство несколько раз, можно создать один элемент и далее уже подключать этот элемент к другим классам, а так же много другое. Это лишь маленькая часть того, что можно делать.
Как установить Sass?
Чтобы начать использовать Sass вам нужно скачать и установить Ruby с официального сайта, прописать одну команду в консоль (чтобы установить Sass) и все готово. Ниже весь процесс расписан поэтапно.
- Устанавливаем Ruby . Заходим на официальный сайт в раздел загрузки , выбираем билд (версию) Windows и скачиваем. Например, я использую Windows 7 (64 битовую), поэтому я буду скачивать Ruby 2.2.4 (x64) .
- Следуйте всем указаниям установщика.
- После успешной установки Ruby откройте Windows консоль и пропишите gem install sass и после этого запустится процесс установки Sass. Если во время установки у вас выдает ошибку, то попробуйте поменять gem на sudo и в итоге у вас должна получиться вот такая строка sudo gem install sass .
Тестируем
После того как вы установили Sass, вам нужно убедиться, что вы сделали все правильно. Сделать это можно в два простых этапа.
- Откройте командную строку Windows
- Пропишите туда sass -v . Если вы все правильно установили, то у вас должно появиться что-то вроде такой строки Sass 3.4.19 (Selective Steve) .
PS. Если у вас ничего не выводиться, возможно вы не находитесь в правильной директории. Для начала вам нужно прописать cd и дальше путь до того места куда вы установили Ruby. В моем случае это будет вот так cd D:\Programs\Ruby22\bin\ . После того как вы попадете в эту директиву, вам нужно прописать sass -v . Если у вас все равно ничего не показывает, то повторите процесс установки с самого начала и после чего вернитесь снова сюда.
Применяем Sass в работе
Для начала давайте создадим простой файл, который будет называться style.scss и внутри мы напишем следующее:
Main-wrapper { width: 1024px; margin: 0 auto; .sidebar { float: left; width: 30%; } .container { width: 67%; float: right; } }
Обратите внимание, что формат файла.scss, а не.css. Для.scss используется немного другой синтаксис, но он элементарный и вполне понятный с самого начала (если вы раньше когда-либо использовали css). А если вы читаете эту статья, я ожидаю, что вы уже знакомы с ним.
И так продолжим с style.css:
Как вы можете заметить, Sass взял все содержимое файла style.scss и сделал из него обычный CSS файл.
Так же обратите внимание, что в scss, все стили пишутся в древовидном виде (то есть класс внутри класса).
Например это:
Main-wrapper { display: block; .sidebar { float: left; width: 30%; .block { display: none; } } }
Превратиться в:
Main-wrapper { display: block; } .main-wrapper .sidebar {float: left; width: 30%;} .main-wrapper .sidebar .block {display: none; }
Конечно же SCSS намного удобнее.
Вот некоторые из плюсов SCSS:
- Группирование стилей
- Возможность быстро найти нужный класс/id
- Использование одних и тех же стилей в нескольких местах
Вы намерное спросите, а что такое --watch ? Данная команда принуждает Sass следит за каждым изменением style.scss. То есть каждый раз, когда вы будите сохранять новую копию этого файла, Sass обратит на это внимание и скомпилирует свежую версию CSS.
PS. Если у вас уже имеется скомпилированая версия CSS в той же папке где и style.scss, то он их перезапишет на более новую.
Важные моменты
В этом разделе, я хочу дать несколько советов, которые вам могут пригодиться.
Для того, чтобы создать CSS файл, изначально нужно создать SCSS файл в котором указывать стили для компиляции CSS.
Если во время компиляции у вас возникает ошибка, скорее всего вы ошиблись в синтаксисе Sass. Внимательно проверьте файл и попробуйте скомпилируйте заново.
Вирішили ви перейти з CSS на Sass, але виникло питання ≤Як компілювати Sass-файли в звичайний CSS?», то для цього є кілька методів, і зараз я розповім про найпростіший з них - програми Koala.
Це кроссплатформенна програма для компіляції Less, Sass, Compass і CoffeeScript. Працює на Win, Mac OS і Linux.
Програма безкоштовна і живе на благодійні пожертвування. Втім, коли я спробував перевести хлопцям на Paypal трохи грошей пару років назад, зробити це не вийшло. Розробники знаходяться в Китаї, а Paypal там працює тільки на відправку грошей. Проте, програма від цього гірше не стала. Розберемося докладніше.
Переваги
- Підтримка кількох мов : Koala працює з Less, Sass (*.scss), CoffeeScript і фреймворком Compass. Крім того, вона може компілювати і звичайні CSS і JS, не пов’язані з препроцесором.
- Компіляція в реальному часі : Koala відстежує зміни файлів і автоматично компілює їх. Всі дії відбуваються у фоновому режимі і не вимагають втручання розробника.
- Налаштування компіляції : можна вказувати різні компілятори для кожного обраного файлу. Втім, це вам навряд чи знадобиться.
- Компресія : Koala вміє автоматично стискати код після компіляції. Цю функцію за бажанням можна не використовувати.
- Повідомлення про помилки : якщо програма зустріла помилку в коді при компіляції, вона покаже повідомлення. Якщо помилок немає, просто буде перебудувати результуючий файл.
- Кросплатформеність : Koala працює на Windows, Mac і Linux.
Інтерфейс
Основне вікно програми містить всі активні проекти (зліва) і основні елементи управління. Як бачите, інтерфейс мінімалістичний, розібратися в ньому можна за пару хвилин.
Основні елементи управління завжди на виду. Ось для чого вони потрібні:
При перемиканні типів файлів із загального списку залишаться тільки файли обраного типу.
Налаштування Sass і LESS
У налаштуваннях є приємні речі. Візьмемо вкладку з настройками Sass:
За два кліка Koala почне зберігати ваші Sass-файли в CSS, ніяких додаткових плагінів встановлювати для Sass не буде потрібно.
Koala вміє автоматично додавати кросбраузерності префікси для css-властивостей, зберігати коментарі. У типі файлу CSS я завжди рекомендую вибирати compressed, так його вага буде мінімальним, а для зручності розробки залишати включеними Source maps.
Авто-префікси - це автоматичне додавання префіксів для підтримки властивостей CSS3 в браузерах застарілих версій.
Наприклад, для заокруглення кутів в 3 пікселі вам буде досить написати:
Border-radius: 3px;
…а після роботи автопрефікса ви отримаєте:
Webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
Крім того, настройки для кожного типу файлів доступні в панелі праворуч. Для цього виберіть його зі списку і в правій частині відкриються настройки для файлів цього типу.
До речі, з 4 версії Bootstrap з LESS на Sass, і це хороший момент почати його вивчати.
Налаштування JavaScript і CoffeeScript
Для JS є всього дві настройки:
- Compress - завжди включайте, щоб отриманий js-файл стискувався.
- Preserve copyright comments
Для CoffeeScript в 99% випадків ви залишите настройки за замовчуванням, тому зупинятися на них немає сенсу.
Де скачати
Качайте програму з офсайту розробників - koala-app.com . Там є окремі посилання для Linux, Mac, Ubuntu.
В підсумку
У підсумку я можу назвати Koala найпростішим і правильним рішенням для розробника, кому не потрібні складні настройки та функції. Якщо вам для роботи потрібен графічний інтерфейс, компіляція тільки Sass / Less / CSS і небажання копатися в командному рядку, тоді Koala - ваш вибір.
Я вже писав про те, що таке , і як він спрощує життя розробникам. Рекомендую ознайомитися, це дуже зручно.
Koala добре підходить для початківців розробників або тих, хто робить невеликий проект і не хоче розгортати повну версію Gulp або Grunt.js.
Тисни «Лайк», щоб читати нас у Фейсбуці
Процесс установки и настройки sass достаточно хорошо описан в официальной документации . Чтобы понять как это происходит совсем не обязательно знать английский язык. Я думаю, что если на googl-e набрать "sass установка", высветится много разных статей. Все бы хорошо, но к сожалению после данной установки процесс компиляции будет занимать приличное время. Мне бы не хотелось повторяться, на главной странице я уже описывал это при сравнении sass и less, поэтому скажу так. Официальная документация хоть и официальная документация, но мы пойдем другим путем. Сейчас я опишу установку, при которой компиляция будет занимать милисекунды.
Итак, нам понадобится node.js , сборщик проектов gulp , три плагина к нему (gulp-watch , gulp-plumber , gulp-sass) и какой-нибудь файловый менеджер. В скриншотах я использовал total commander, но поскольку он платный, то могу посоветовать его бесплатный аналог - , он ничуть не хуже и вполне справится с нашими задачами. Если вдруг у вас что-то не будет получаться, то вы можете скачать готовый пример , для его работы нужен только установленный node.js . Архив нужно будет распаковать, войти в проект через какой-нибудь файловый менеджер, и в командной строке файлового менеджера сперва набрать "npm install --save-dev", а потом набрать "npm install gulp -g". После того как произойдет установка всех модулей в командной строке файлового менеждера нужно будет набрать "gulp". Я все-таки советую вам ознакомиться с текстом ниже. Весь материал я постараюсь описать подробно, чтобы ни у кого не оставалось никаких вопросов.
При верстке я использую "open server". Навязывать я никому ничего не хочу, но это лучший локальный сервер которым я когда-либо пользовался. Начинал я с denver-а, потом ставил "apache", потом долго пользовался xamp-ом. По сравнению с ними "open server" лучший. Советую устанавливать плагины в папку где лежат проекты. Обычно у меня проекты для верстки лежат в папке localhost. SCSS - файлы лежат в папке "localhost/название проета/scss" , css-ка генерится по адресу "localhost/название проекта/project/css" . HTML-файлы лежат по адресу "localhost/название проета/project" . Вы можете настраивать пути так как вам удобно, все это я опишу. Для примера я буду просмативать папку "scss" и генерить css-ку в папку "project/css".
- 1. Для начала идем на официальный сайт node.js (Рис. 1) и скачиваем его дистрибутив, здесь особо объяснять нечего, я думаю это просто))) После того, как мы его уснановили, стоит проверить работает ли он. Для этого жмем "Win+r", в появившемся окне набираем "node" (Рис. 2) и жмем "Enter". Если все прошло успешно, то должно появиться вот такое окно (Рис. 3). Если вы начинающий разработчик, то можете использовать его как калькулятор, хотя node.js это полноценный сервер не хуже чем apache. Если же он не появился, то скорее всего у вас какие-то проблемы с правами. В операционных системах Vista и Windows 7-8 нужно запускать инсталятор с правами администратора.
- 2. Теперь создайте какую-нибудь папку. В моем архиве она называется gulp, вы можете назвать ее также, или как вам будет угодно. Условно будем называть ее нашим проектом.
- 3.
Теперь поставим сборщик проектов gulp, и некоторые плагины к нему (просмотрите документацию по gulp , я думаю это будет полезным). В интернете много про это написано, но все авторы описывают это не совсем четко. Установку модулей для node.js осуществляет NPM, я вначале пытался это сделать прямо в node.js, это логично, но не правильно. Естественно у меня ничего не получалось. Итак, закрываем node.js.
Из документации следует, что gulp нужно устанавливать сперва глобально, а после локально. Итак, заходим в наш проект через какой-нибудь файловый менеджер (total commander или ) и в командной строке файлового менеджера сперва набираем "npm install gulp -g" , а после набираем "npm install gulp --save-dev" (Рис. 4). Появится окно с установкой, подождем когда установка пройдет и окно пропадет. После установки в нашем проекте появится папка "node_modules". В ней будут лежать все наши плагины, пока в ней лежит только gulp.
- 4.
После установки gulp-а, нам нужно установить три плагина к нему gulp-watch , gulp-plumber , gulp-sass . Компилировать scss-файлы будет плагин gulp-sass, gulp-plumber необходим для того, чтобы показывать ошибки если вдруг они будут, а они непременно будут (gulp-plumber показывает номер строки с ошибкой, иначе трудно понять что не так), gulp-watch нужен для того, чтобы компиляция происходила автоматически при изменении scss-файлов. Это я ниже подробно опишу.
Идем на официальный сайт gulp-а (Рис. 5), переходим на страницу с плагинами (Рис. 6). Эта страница очень удобна, вверху есть поле поиска. В этом поле нужно найти наши плагины, перейти на их страницы. Там будут описаны настройки и процесс установки плагинов.
Итак, для того, чтобы установить плагин gulp-sass (Рис. 7) в наш проект, нужно зайти в наш проект через какой-нибудь файловый менеджер, ввести в командной строке файлового менеджера "npm install gulp-sass --save-dev" (Рис. 8). Я думаю, что плагины gulp-plumber и gulp-watch вы установите сами, это не трудно.
- 5.
После того, как плагины установлены, нужно создать файл gulpfile.js (Рис. 9) и написать в нем следующее.
1 2 3 4 5
// Объявляем наши плагины
var gulp = require ("gulp ");
var sass = require ("gulp-sass ");
var plumber = require ("gulp-plumber ");
var watch = require ("gulp-watch ");
// Создаем sass задание
// gulp.src - путь по которому лежит scss-файл который мы будем компилировать
// gulp.dest - путь в который мы будем генерить нашу css-ку
// plumber() - не выбрасывать из компилятора если есть ошибки
// errLogToConsole: true - выводить номер строки в которой допущена ошибка
11 12 13 14 15 16
gulp .task ("sass ", function () {
gulp .src ("scss/main.scss ")
Pipe (plumber ())
Pipe (sass ({errLogToConsole: true }))
Pipe (gulp .dest ("project/css "));
18 19 20 21 22 23
gulp .task ("default ", function() {
gulp .run ("sass ");
gulp .watch ("scss/** ", function(event ) {
gulp .run ("sass ");
Впринципе все, теперь можем проверять. Как видно из файла gulpfile.js, scss-файлы у нас лежат в папке scss, компилируется только файл с именем main.scss. В папке project образно лежит наш проект с html файлами, картинками. В папку project/css мы будем генерить css-ку.
В папке scss создадим файл main.scss, код может быть любой. В моем примере код выглядит так.
1 2 3 4 5 6 7 8 9 10 11
$blue : #3bbfce ;
$margin : 32px ;
Content-navigation {
border-color : $blue ;
color : darken($blue, 9%) ;
Border {
padding : $margin / 2 ;
margin : $margin / 2 ;
border-color : $blue ;
Для того, чтобы его скомпилировать, нужно войти в корень нашего проекта (где лежит gulpfile.js) и в командной строке файлового менеджера написать "gulp" (Должно появиться окно как на Рис. 10). Если у вас текстовый редактор "sublime text" то вы можете в одной вкладке открыть "main.scss", а в другой "main.css", меняя параметры "main.scss" вы можете видеть как меняется "main.css". Не правда ли здорово)))
А теперь давайте проверим, не вылетает ли наш компилятор при наличии ошибок в scss-файле. Для этого заменим переменную "$margin" на "$margins" (Рис. 11), как видим, компилятор показал ошибку в 9 строке, как раз то место, где первый раз встречается наша переменная, все работает.
А теперь не много теории. Как правило для уменьшения запросов на сайт, все css-ки компилируются в одну большую. Как это делать на нашем компиляторе? Мы создаем файл main.scss и в нем через директиву @import подключаем другие scss-файлы. Наш компилятор так настроен, что он при изменении любого scss-файла лежащего в папке scss компилирует "main.scss". Если проект большой, вы можете подключать таким образом разные стили для разных блоков. Если же проект маленький, то вы можете подключить к примеру "normalize" а стили для сайта писать в другом scss-файле. Нечего "normalize" маячить в основной css-ке. Не стоит на него отвлекаться. В большом проекте можно таким образом разбить css-ку на header, footer, стили для каталога и для внутренних страниц, разные стили для всевозможных слайдеров и тд. На больших проектах это вам пригодится. В unix-ых системах есть такое правило, файлы которые начинаются с подчеркивания не компилируются. Поэтому мой вам совет, те файлы который подключаются к основному scss-файлу должны начинаться с подчеркивания. Конечно можно этого и не делать, но это стандарт. Если вы в gulpfile.js замените "gulp.src("scss/main.scss")" на "gulp.src("scss/**.scss")", т.е. скажете генерить все scss-файлы лежащие в папке scss, то при создании и изменении файла с расширенем scss, файл с таким же именем, но с расширением css появится в папке css проекта. А теперь попробуйте дописать к scss-файлу нижнее подчеркивание вначале, вы увидите, что этот файл в папку css проекта генериться не будет.
Если у вас что-то не получается, вы можете написать мне письмо , или задать мне вопрос
24 марта 2012 в 13:22SCSS - немного практики, часть I
- CSS
Статей про SASS (SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS -статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.
Что такое SCSS
SCSS - "диалект" языка SASS . А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, ), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код. Пример SASS-кода:
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
И тоже самое на SCSS:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Я выбрал SCSS в виду того, что он проще для восприятия коллегам с ним ещё не знакомым. Ещё стоило бы отметить что обычный CSS код вполне вписывается в SCSS синтаксис.
Установка и использование
Для начала нужно установить ruby . После чего нужно установить sass-gem (gem install sass в консоли). Если всё прошло гладко, то теперь вам доступна консольная программа sass . О всех нюансах её использования вы можете прочесть здесь ― sass --help . Я расскажу лишь о двух базовых возможностях:--watch
Если запустить sass с ключом --watch , то программа будет следить за указанными вами файлами. В случае их изменения, она автоматически пересоберёт все необходимые css-файлы (не все вообще, а только связанные с изменёнными).Предположим, что у вас есть следующая структура проекта:
Css
---- scss
------ style.scss
---- style.css
Необходимо чтобы sass отслеживал все изменения в css/scss/* и результат сохранял в css/*.css . В таком случае запускаем sass так ― sass --watch css/scss:css/. . Т.е. sass --watch [что]:[куда] .
--update
Если вам нужно единожды обновить css-файлы, то в место --watch применяем --update . Никакой слежки проводится не будет, так же как и проверок на необходимость обновления.Стоит отметить, что в отличии от Less , SASS не умеет компилировать свой код прямо в браузере. На мой взгляд, такой подход (компиляция на сервере или ПК-верстальщика) является единственно верным.
Практика
Итак, мы подошли к самому главному. Начнём с @import .@import
Изначально, до использования SCSS, весь CSS код движка, с которым мне по долгу службы приходится работать, находился в 1-ом огромном style.css файле. Моя IDE (Netbeans (кстати, вот плагин для подсветки синтаксиса)) работала с ним с существенными тормозами. Разбивать же его на множество файлов поменьше, и, при необходимости, склеивать их в 1 ― никто не хотел. SCSS решает этот вопрос автоматически.Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с _ . Т.е. наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss ― нет.
Итак, для того, чтобы включить содержимое файла _template.scss или template.scss пишем
@import "template"; // шаблоны
В конечном счёте, вместо 1-го большого style.css файла у меня получилось более сотни мелких scss -файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая "схема" более производительна.
@вложенность
Одна из самых желанных "фич" для CSS ― вложенность селекторов. Пример: #some {
border: 1px solid red;
.some { background: white; }
}
/* => */
#some { border: 1px solid red; }
#some .some { background: white; }
Ещё пример:
Input {
border: 1px solid gray;
background: white;
& { color: black; }
&.some_class { display: none; }
}
/* => */
input { border: 1px solid gray; background: white; }
input { color: black; }
input.some_class { display: none; }
Символ & равносилен родительскому селектору. Допустим тег
$IE_7: "body.ie_7"; //... .some { display: inline-block; #{$IE_7} & { zoom: 1; display: inline; } } /* => */ .some { display: inline-block; } body.ie_7 .some { zoom: 1; display: inline; }
$variables
Переменные ― удобная штука. Определяются они так: $some: red;
Переменные ― не константы, их можно менять по ходу кода:) Одна из первых моих мыслей вылилась в _const.scss файл, который заключает в себе все базовые цвета, размеры шрифтов и пр.
$link: #15157d;
$link_bottom: $link;
$input_font_size: 13px;
$content_bg: #F1F1F1;
$input_color: #4E4D4D;
$input_color_placeholder: #959595;
$text_color: black;
...
Предполагается, что цвет ссылок на сайте ― $link .
A { color: $link; }
span.link {
color: $link;
text-decoration: underline;
}
Если в дальнейшем выяснится, что цвет ссылок изменился ― достаточно поменять 1 переменную (в случае CSS нужно было бы пройтись авто-заменой по файлам, возможно даже выборочно). Предположим, что, внезапно, выясняется, что в некотором модуле contacts , цвет ссылок другой. Есть, как минимум, два пути решения.
$contacts_link: orange;
// код модуля с использованием $contacts_link вместо $link
Второй
$__link: $link;
$link: orange;
// код модуля
$link: $__link;
Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета.
@математика
Разделим математику на 2 категории ― цвета и числа. Начнём с чисел. Простой пример:Block {
$block_width: 500px;
padding: 5px;
border: 1px solid black;
width: $block_width - (5px * 2) - (1px * 2);
}
При желании можно и padding с border-ом задавать переменными. Всё зависит от сложности вёрстки.
Ещё пример:
Block {
$count: 10;
$margin_left: 5px;
$all_width: 1000px;
width: $all_width;
.sub_element {
width: ($all_width / $count) - $margin_left;
margin: 0 0 0 $margin_left;
}
}
Хочу отметить, что подобного рода манипуляции применяются очень часто. Без них я как без ног.
А теперь цвета. Цвета можно складывать, перемножать:
Some {
$color: #010203;
color: $color;
border-color: $color - #010101;
&:hover { color: #010203 * 2; }
}
/* => */
.some { color: #010203; border-color: #000102; }
.some:hover { color: #020406; }
Довольно удобная штука, когда лень подбирать цвета. Также доступны такие функции как opacify и transparentize (более
