Sass для самых маленьких - подробное руководство. Установка и использование. А теперь можно сделать так

Процесс установки и настройки 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. 1. Для начала идем на официальный сайт node.js (Рис. 1) и скачиваем его дистрибутив, здесь особо объяснять нечего, я думаю это просто))) После того, как мы его уснановили, стоит проверить работает ли он. Для этого жмем "Win+r", в появившемся окне набираем "node" (Рис. 2) и жмем "Enter". Если все прошло успешно, то должно появиться вот такое окно (Рис. 3). Если вы начинающий разработчик, то можете использовать его как калькулятор, хотя node.js это полноценный сервер не хуже чем apache. Если же он не появился, то скорее всего у вас какие-то проблемы с правами. В операционных системах Vista и Windows 7-8 нужно запускать инсталятор с правами администратора.
2. 2. Теперь создайте какую-нибудь папку. В моем архиве она называется gulp, вы можете назвать ее также, или как вам будет угодно. Условно будем называть ее нашим проектом.
3. 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. 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. 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 проекта генериться не будет.

Если у вас что-то не получается, вы можете написать мне письмо , или задать мне вопрос

Вирішили ви перейти з 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 є всього дві настройки:

1. Compress - завжди включайте, щоб отриманий js-файл стискувався.
2. Preserve copyright comments

Для CoffeeScript в 99% випадків ви залишите настройки за замовчуванням, тому зупинятися на них немає сенсу.

Де скачати

Качайте програму з офсайту розробників - koala-app.com . Там є окремі посилання для Linux, Mac, Ubuntu.

В підсумку

У підсумку я можу назвати Koala найпростішим і правильним рішенням для розробника, кому не потрібні складні настройки та функції. Якщо вам для роботи потрібен графічний інтерфейс, компіляція тільки Sass / Less / CSS і небажання копатися в командному рядку, тоді Koala - ваш вибір.

Я вже писав про те, що таке , і як він спрощує життя розробникам. Рекомендую ознайомитися, це дуже зручно.

Koala добре підходить для початківців розробників або тих, хто робить невеликий проект і не хоче розгортати повну версію Gulp або Grunt.js.

Тисни «Лайк», щоб читати нас у Фейсбуці

На сегодняшний день, разработчики имеют огромный список инструментов-помощников. Одним из них является Sass. В этой записи я подробно распишу что это такое, для чего его используют и как вам лично начать им пользоваться.

Если вы уже знакомы с Sass/Scss, установили его и готовы начать пользоваться им, то вы можете прочитать вот эту запись — « ». В ней я описываю все тонкости препроцессора, а так же как правильно пользоваться им.

Что такое Sass?

Sass — это разновидность препроцессора, который поможет вам во время разработки front-end части. Факт в том, что CSS файлы становятся все больше и больше и через некоторое время с ними становится сложнее работать.

Sass был создан для того, чтобы решить эту проблему. Используется простой синтаксис (который почти полностью схож с обычным CSS), но при всем при этом добавлено много разных возможностей.

Например, чтобы не прописывать одно и тоже свойство несколько раз, можно создать один элемент и далее уже подключать этот элемент к другим классам, а так же много другое. Это лишь маленькая часть того, что можно делать.

Как установить Sass?

Чтобы начать использовать Sass вам нужно скачать и установить Ruby с официального сайта, прописать одну команду в консоль (чтобы установить Sass) и все готово. Ниже весь процесс расписан поэтапно.

1. Устанавливаем Ruby . Заходим на официальный сайт в раздел загрузки , выбираем билд (версию) Windows и скачиваем. Например, я использую Windows 7 (64 битовую), поэтому я буду скачивать Ruby 2.2.4 (x64) .
2. Следуйте всем указаниям установщика.
3. После успешной установки Ruby откройте Windows консоль и пропишите gem install sass и после этого запустится процесс установки Sass. Если во время установки у вас выдает ошибку, то попробуйте поменять gem на sudo и в итоге у вас должна получиться вот такая строка sudo gem install sass .

Тестируем

После того как вы установили Sass, вам нужно убедиться, что вы сделали все правильно. Сделать это можно в два простых этапа.

1. Откройте командную строку Windows
2. Пропишите туда 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. Внимательно проверьте файл и попробуйте скомпилируйте заново.

SCSS - немного практики, часть I

• CSS

Статей про SASS (SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS -статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

Что такое 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 синтаксис.

Установка и использование

--watch

Предположим, что у вас есть следующая структура проекта:

Css ---- scss ------ style.scss ---- style.css
Необходимо чтобы sass отслеживал все изменения в css/scss/* и результат сохранял в css/*.css . В таком случае запускаем sass так ― sass --watch css/scss:css/. . Т.е. sass --watch [что]:[куда] .

--update

Стоит отметить, что в отличии от Less , SASS не умеет компилировать свой код прямо в браузере. На мой взгляд, такой подход (компиляция на сервере или ПК-верстальщика) является единственно верным.

Практика

@import

Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с _ . Т.е. наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss ― нет.

Итак, для того, чтобы включить содержимое файла _template.scss или template.scss пишем

@import "template"; // шаблоны
В конечном счёте, вместо 1-го большого style.css файла у меня получилось более сотни мелких scss -файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая "схема" более производительна.

@вложенность

#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 , в случае если в качестве обозревателя у нас Internet Explorer 7 . Следующий код позволяет избавиться от всех "хаков" и спец.комментариев:

$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;
Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета.

@математика

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 (более

Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного Css на препроцессор Sass. А ведь раньше не понимал — что за Sass, для чего он нужен, это наверно для супер продвинутых профи в верстке. Да, использование препроцессоров это шаг на новый уровень в веб-разработке, но здесь ничего страшного и сложного нет и вы убедитесь в этом сами, дочитав данную статью до конца.

И так, чем хорош препроцессор и конкретно Sass? Я сразу скажу, что есть и другие, такие, как Less, Stylus и др. Все они работают по одному принципу, но у каждого свои особенности. Sass получил большую популярность у профессионалов в следствие чего изучение значительно упрощается. Просто чем популярнее технология, тем больше сообщество и тем более развернута документация.

Препроцессоры созданы для того, чтобы избавить разработчика от большинства рутинных задач при написании кода, тем самым повысив скорость и качество работы. Помимо CSS-препроцессоров существуют также и HTML-препроцессоры, например, Pug (Jade).

Структура статьи

Документация

Разработчиком Sass является француз Hugo Giraudel, проживающий в Германии с определенного времени. Естественно документация на английском языке, но я лично в ней неплохо ориентируюсь (важно знать технический английский). Но также есть перевод и на русский. Я бы советовал все же английскую версию, это для того, чтобы привыкать и изучать все глубже английский. Но русская тоже ничем не хуже.

• Английская документация: http://www.sass-lang.com
• Русская документация: https://sass-scss.ru

Компиляция Sass в Css

В качестве программного обеспечения для компиляции Sass в Css я использую плагин Sass для таск-менеджера . Вообще Sass является приложением (Gem) языка Ruby. Поэтому, если вы хотите обойтись без Gulp, то для компиляции в Css вам необходимо будет установить платформу языка программирования Ruby. Я не буду сейчас показывать как это делается, можете почитать об этом на официальном сайте .

Синтаксис - Sass, Scss

Сразу отмечу, что существует 2 синтаксиса написания кода: Sass и Scss.

Синтаксис Sass незначительно отличается от Scss. Scss похож больше на обычный код Css, а в Sass опущены фигурные скобки и точка с запятой между правилами. Также существует различие в написании некоторых функций и надо быть внимательным в том, какой синтаксис вы выбираете. Расширения файлов для Sass — *.sass, а для Scss — *.scss. Синтаксис Sass он более старый, а Scss появился позже, чтобы упростить изучение для новичков. Я сам начинал изучение данного препроцессора именно на Scss, так было проще его понять. Сейчас же я перешел на Sass, для меня он более удобен.

Если говорить о Sass, то его структура кода строится на основе отступов (ведь фигурных скобок в нем нет) и здесь следует быть внимательным, так как в качестве отступа может выступать, как табулятор (TAB — 4 пробела), так и обычные пробелы (обычно это двойной пробел). Я всегда использую табулятор.

Помните! Если вы используете табулятор в качестве отступа, то пробелы следует исключить, чтобы везде было одинаково. И наоборот — если используете пробелы, то табулятор следует исключить. Иначе, компилятор выдаст ошибку.

Sass

Scss

В большинстве редакторов кода (например, Sublime Text) есть разметка отступов в виде полос, что не дает нам запутаться. В примерах ниже я буду использовать синтаксис Sass.

Упрощаем жизнь с помощью Sass

Вложенность правил

Вот чем мне приглянулся Sass с самого начала, так это как раз вложенностью css-правил одних в другие. Это здорово экономит время, а код получается структурируемым и легкочитаемым. Например, если мы хотим написать стили элементам определенного родительского контейнера, то нам в Css необходимо каждый раз указывать родительский класс, например вот так:

Main .title { font-size: 30px; color: #444; } .main .subtitle { font-size: 20px; } .main .description { font-size: 14px; margin-bottom: 30px; }

То есть мы везде указываем родительский класс.main , а это в свою очередь не совсем удобно. Используя Sass, можно записать следующим образом:

Scss

Sass

Согласитесь так смотрится намного аккуратнее, да и писать код можно быстрее, ведь родительский класс.main мы пишем всего один раз. Если вы хотите повторить за мной, не устанавливая Ruby и всякое подобное ПО можно воспользоваться онлайн-компилятором для демонстрации.

Вложенные свойства

Помимо вложенности правил в Sass существует возможность вложенности свойств. Например, вот как можно записать значения margin:

Sass

Css

Привязка к селектору или конкатенация - знак &

Написание нашего кода можно ускорить и сделать его еще компактнее, применив конкатенацию (соединение) посредством символа — & . Как это работает? Например, у нас есть такие классы, как: .main-title , .main-subtitle , .main-description . В Sass данные классы можно записать следующим образом:

Main &-title font-size: 30px color: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Main-title { font-size: 30px; color: #444; } .main-subtitle { font-size: 20px; } .main-description { font-size: 14px; margin-bottom: 30px; }

С помощью символа & мы соединяемся к корневому классу, то есть в данном случае нет необходимости постоянно повторять корень.main . В тоже время следует иметь ввиду, что мы не создали дочерние элементы.

/* Ссылка */ a { color: red; } a:hover { color: blue; } /* Псевдоэлементы */ .main::before { content: ""; display: block; font-size: 20px; } .main::after { content: ""; display: block; font-size: 30px; }

Иногда нужно указать цепочку селекторов до текущего элемента. Можно конечно вынести его в корень, но чтобы не нарушать вложенность можно написать следующим образом:

Main .container & width: 700px

Container .main { width: 700px }

Переместив & после селектора, мы поменяли порядок стыковки, т. е. класс.container в данном случае является родительским.

Привязка к родительскому селектору, но на уровнь выше

Выше для примера я демонстрировал Sass код:

Main &-title font-size: 30px color: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Теперь представьте, что в блоке.main-title существует еще один элемент которому нужно явно указать стили, используя всю цепочку родителей. Я долго время просто указывал корневое название (в данном случае — .main), но это не очень удобно. Я стал ковырять документацию Sass и нашел решение. На самом деле все просто — нам необходимо объявить ссылку на родителя и использовать ее, там, где нужно.

Вот так я делал раньше:

Main &-title font-size: 30px color: #444 .main__icon // указываем корень.main, иначе, если использовать & будет стыковка к.main-title color: #444 width: 20px &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

А теперь можно сделать так:

Main $self: & // ссылка на родителя &-title font-size: 30px color: #444 #{$self}__icon // вместо & используем ссылку на родителя color: #444 width: 20px &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Если заметили мы объявили ссылку на родителя — $self: & . Мне это чем-то напоминает ссылку на объект (this), который вызвал событие в javaScript. Теперь в нужно месте мы можем просто его вызвать #{$self} . Вот оказывается как все просто, а я голову ломал и думал, что нет решения этой проблемы в Sass.

Main-title { font-size: 30px; color: #444; } .main-title .main__icon { color: #444; width: 20px; } .main-subtitle { font-size: 20px; } .main-description { font-size: 14px; margin-bottom: 30px; }

Шаблоны-заготовки

Зачастую бывает такое, что несколько элементов имеют одну базу стилей, но отличаются между собой лишь несколькими правилами. Возьмем к примеру кнопки. Если брать один размер кнопок, то они могут отличаться между собой только цветом: красные, зеленые, серые и т.д. Если использовать чистый Css, то придется в базовых стилях через запятую указывать все цвета кнопок или создать базовый класс. Но в Sass это делается намного проще:

%button background-color: #666 border: 1px solid #666 padding: 0 20px font-size: 15px line-height: 40px height: 40px .button-green @extend %button background-color: green border-color: green .button-red @extend %button background-color: red border-color: red

Button-green, .button-red { background-color: #666; border: 1px solid #666; padding: 0 20px; font-size: 15px; line-height: 40px; height: 40px; } .button-green { background-color: green; border-color: green; } .button-red { background-color: red; border-color: red; }

Шаблоном выступает в данном случает селектор %button (об этом говорит знак — %). Это удобно тем, что сам селектор шаблона нигде не участвует, а его стили наследуются другими селекторами посредством директивы — @extend . Данный шаблон можно использовать сколько угодно раз, сокращая тем самым количество кода.

SassScript

В Sass, как и в языках программирования имеют место быть такие возможности, как: создание переменных, арифметические операции (сложение, вычитание, деление, умножение и т.д.), итерации (циклы), функции (миксины) и многое другое. То есть Sass это своего рода некий язык программирования, который призван опять таки упростить написание кода и ускорить работу в разы.

Переменные

Переменная в Sass начинается со знака $ , а имя пишется латиницей, например: $color . Следует отметить, что знаки: «— » и «_ » взаимозаменяемы. К примеру, если назвали $color-red , то можно вызвать и $color_red . Определяется переменная следующим образом: $название: значение , например: $color: #f6f6f6 .

Переменная объявленная вне каких либо уровней вложенности, доступна глобально, т.е. можно использовать везде. Если же вы определили переменную в каком либо уровне вложенности селектора, то она будет доступна только на данном уровне. Чтобы она работала глобально во всем документе необходимо указать ключевое слово !global .

Title $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

Вообще, переменные это замечательная вещь, стоит объявить и занести значение, а далее можно использовать сколько угодно и где угодно. Например, мы можем определить цвета, дав им определенные имена, размер шрифта, семейство шрифтов и т.д. и вообще любые значения.

Директивы

@extend

Данную директиву мы затронули выше, когда изучали шаблон-заготовку. Закрепим еще раз знания. С помощью @extend мы можем скопировать правила любого селектора. Например, при верстке может быть так, что элемент «А » и элемент «Б » могут быть схожи по внешнему виду. В данном случае можно написать правила элементу «А», а для «Б» просто скопировать стили элемента «А», слегка переопределив нужные свойства.

Block_a background-color: #cccccc border: 5px solid #999999 padding: 20px font-size: 30px height: 150px width: 150px .block_b @extend .block_a padding: 15px

Block_a, .block_b { background-color: #cccccc; border: 5px solid #999999; padding: 20px; font-size: 30px; height: 150px; width: 150px; } .block_b { padding: 15px; }

В данном примере мы сверстали 2 одинаковых квадрата. У квадрата «Б» мы переопределили только отступ padding: 15px . Вот так работает @extend. Я довольно часто пользуюсь данной директивой.

@import

Данная директива позволяет объединять несколько файлов стилей в один. Это очень удобно, тем более, если проект большой. Не стоит путать с директивой, которая существует в Css — @import . В Css обязательным атрибутом является — url() .

На самом деле удобнее писать стили в разных файлах и предназначение у каждого свое. Например, весь каркас страницы можно разделить на регионы: header.sass, sidebar.sass, footer.sass. Собрать все можно в главном файле main.sass, как раз используя @import. Файлы регионов можно указать также через нижнее подчеркивание в начале имени файла, например так: _header.sass, _sidebar.sass, _footer.sass. Такие файлы называются фрагментами. При импорте фрагментов не обязательно указывать расширение файла.

Простой импорт

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Импорт фрагментов

@import "header" @import "sidebar" @import "footer"

Файлы фрагментов могут быть с расширениями: *.sass , *.scss или *.css . Например, главный файл может быть с расширением *.sass , а шапка сайта, к примеру с расширением *.scss . То есть не важно какое у вас расширение главного файла. Следует отметить, что при импорте переносятся все переменные и миксины (о них поговорим ниже) в главный файл, в который происходит импорт.

Также, можно указать импорт нескольких файлов через запятую: @import «header», «sidebar», «footer».

Имейте ввиду, что импорт происходит в том месте, где вы указали директиву @import . Обычно это делают в начале документа.

@at-root

Директива @at-root говорит сама за себя и если переводить на русский, то будет звучать так — «от корня» . Иными словами мы переносим селектор в корень, отменяя цепочку родительских селекторов. Тут конечно можно задать вопрос — «А зачем нужна эта директива, если можно перенести селектор в корень в ручную?». Ответ прост — удобство написания кода, не нарушая структуру. Когда вы научитесь работать с Sass в полной мере вы это поймете.

Main &-title font-size: 30px color: #444 @at-root .main__icon color: #444 width: 20px

Main-title { font-size: 30px; color: #444; } .main__icon { color: #444; width: 20px; }

Управляющие директивы и выражения

Директива @if

Данная директива выполняет стили, если выражение, заключенное в ней возвращает любое значение кроме false и null .

$color: green .header @if $color == green background-color: green @else if $color == blue background-color: blue @else background-color: #f6f6f6

Header { background-color: green; }

Те, кто знаком хотя бы с основами языка программирования (например, javaScript или Php) разобраться будет не сложно. Здесь суть та же самая, главное знать синтаксис написания кода.

Директива @for

В языке программирования (опять же в Javascript или Php) с помощью For можно задать цикл. В Sass данная директива выполняет тоже самое — создает цикл. Для каждой итерации (повторения) используется переменная-счетчик, которая изменяет данные вывода.

Директива имеет 2 формы написания: 1. @for $var from <начало> through <конец> и 2. @for $var from <начало> to <конец> . Если вы хотите, чтобы последняя цифра была включена в цикл, то используйте «through «. Давайте рассмотрим пример:

@for $i from 1 to 6 .elem-item-#{$i} background-image: url("images/image-#{$i}.jpg")

Elem-item-1 { background-image: url("images/image-1.jpg"); } .elem-item-2 { background-image: url("images/image-2.jpg"); } .elem-item-3 { background-image: url("images/image-3.jpg"); } .elem-item-4 { background-image: url("images/image-4.jpg"); } .elem-item-5 { background-image: url("images/image-5.jpg"); }

Для указания конечного значения я использовал ключевое слово «to «. При таком раскладе цикл заканчивается на цифре — 5 . Обратите внимание насколько компактным выглядит код Sass.

Директива @each

Директива @each также, как и @for выводит значения в цикле и удобен тем, что помимо цифр можно перебирать конкретные значения. Давайте возьмем вышеприведенный цикл и изменим его на какие либо значения.

@each $bgItem in animal, lake, sea, landscape, nature .elem-item-#{$bgItem} background-image: url("images/image-#{$bgItem}.jpg")

Elem-item-animal { background-image: url("images/image-animal.jpg"); } .elem-item-lake { background-image: url("images/image-lake.jpg"); } .elem-item-sea { background-image: url("images/image-sea.jpg"); } .elem-item-landscape { background-image: url("images/image-landscape.jpg"); } .elem-item-nature { background-image: url("images/image-nature.jpg"); }

В данном случае не создается переменная-счетчик, а количество итераций зависит от количества созданных значений после ключевого слова «in «. Значения выводятся через переменную (в данном примере — $bgItem), название которой может быть произвольным.

Миксины (функции)

Миксины (примеси) — это своего рода функция, как в языке программирования, которая призвана избавить от повторяющегося кода. Миксины могут содержать целые фрагменты стилей, разрешенные в Sass. Давайте рассмотрим пример, для большей наглядности.

@mixin align-center position: absolute top: 50% left: 50% transform: translate(-50%, -50%) .container @include align-center

Создается миксин директивой @mixin , далее через пробел следует имя миксина, а также опционально передаваемые параметры. Сразу отмечу, что знаки дефиса (-) и нижнего подчеркивания (_) в имени миксина взаимозаменяемы. Миксин может содержать в себе не только правила, но и селекторы. Выше я привел пример элементарного миксина без параметров.

Вызывается миксин директивой @include и далее через пробел указываем имя созданного миксина. В примере выше — это центрирование блока по оси X и по оси Y с помощью абсолютного позиционирования. Если такое приходится применять часто, то согласитесь легче вызвать просто миксин, нежели писать стили центровки снова и снова.

Теперь давайте рассмотрим миксин с параметрами (аргументами).

@mixin border($width, $color) border: width: $width style: solid color: $color .square @include border(2px, #ccc)

Square { border-width: 2px; border-style: solid; border-color: #ccc; }

Как видим, после названия миксина в скобках мы задаем аргументы, в данном случае — это ширина бордюра и цвет. Это простейший миксин, который я привел для наглядности. На практике же можно встретить более сложные миксины с использованием различных условий и переменных. Но не будем сейчас все усложнять, надо всегда начинать с чего-то малого и простого, а потом уже двигаться по мере продвижения вверх.

На этом я хочу завершить свой небольшой обзор препроцессора Sass. Почему небольшой? Да потому что это далеко не все, что я вам поведал. Вообще, используя вышеизложенное, вы можете смело уже сейчас начать пользоваться Sass вместо Css. Более подробнее вы сможете изучить Sass, прибегнув к документации , которую я приводил выше.

Ну что ж, всем спасибо за внимание! Как всегда, вопросы задаем в комментариях и подписывайтесь либо на телеграм канал , либо на рассылку по email (форма в сайдбаре справа), чтобы не пропустить ничего интересного.

До встречи в других моих постах…