Математические операции в LESS. Простая арифметика в LESS
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я продолжаю рубрику: Верстка сайтов и ее раздел Препроцессор LESS. CSS…
Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел Препроцессор SASS и SCSS. Это записью мы познакомимся с особенностями синтаксиса SASS и SCSS. Если слово синтаксис не совсем понятно, то можно сказать: правила написания кода SASS и SCSS. SASS уже довольно старая технология, которая на пути своего развития претерпевала изменения, мы разберемся с тем, какие конструкции уже не стоит использовать в коде SASS версии 3.
Различие между синтаксисом SASS и SCSS
В этой записи мы рассмотрим: виды синтаксиса в SASS, особенности синтаксиса SASS, особенности синтаксиса Sassy CSS или SCSS, правила написания множественных селекторов SASS, запрещенные языковые конструкции в SASS и синтаксис комментариев в SASS.
Содержание статьи:
Препроцессор SASS имеет два различных синтаксиса: Sassy CSS и синтаксис с отступом или просто SASS. Синтаксис SCSS использует абсолютно те же правила, что и CSS, но имеет некоторые возможности, которые расширяют CSS. SCSS поддерживает множество хуков CSS, в том числе и некоторые хуки для корректного отображения HTML документов в старых браузерах IE. Чтобы компилятор SASS понимал, что вы пишите код на SCSS сохраняйте файлы с расширение .scss.
Второй синтаксис SASS похож на синтаксис языка Ruby и использует отступы. Второй синтаксис обычно так и называют: синтаксис SASS. Синтаксис SASS появился раньше, чем SCSS. Цель синтаксиса SASS – сократить CSS код, поэтому вложенность селекторов SASS обозначается отступами, а CSS свойства отделяются друг от друга символом переноса строки, а не точкой с запятой, как это реализовано в CSS или в SCSS. Чтобы SASS компилятор понял, что код написан с использованием синтаксиса SASS, используйте расширение .sass.
Различие между SASS и SCSS заключает в правилах написания кода, никаких функциональных различий между SASS и SCSS нет. Компилятор SASS умеет конвертировать SASS в SCSS:
1 2 3 4 5 6 7 8 9 |
# Конвертировать SASS в SCSS $ sass-convert style.sassstyle.scss # Конвертировать SCSS в SASS $ sass-convert style.scssstyle.sass |
Если вы выполните эти команды, то CSS файл не будет сгенерирован, это просто конвертация одного синтаксиса в другой.
Старый синтаксис SASS или просто синтаксис SASS на данный момент является альтернативой SCSS:
Давайте посмотрим пример синтаксиса SASS:
1 2 3 4 5 6 7 8 9 |
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color |
Сверху мы объявили глобальные SASS переменные, пока на них внимание не обращайте. Обратите внимание: CSS селектор body написан в начале строки без каких-либо отступов, а стили для body имеют отступ от начала строки.
Если вы хорошо знакомы с синтаксисом CSS, то никаких проблем с синтаксисом SCSS у вас не будет, как мы уже упоминали, синтаксис SCSS полностью идентичен CSS, но имеет некоторые особенности, которые расширяют возможности CSS, с которыми мы будем знакомиться далее. Ниже пример использования синтаксиса SCSS:
1 2 3 4 5 6 7 |
Body { font: 100% $font-stack; color: $primary-color; } |
Он ничем не отличается от всем привычного CSS.
Нам часто бывает нужно сделать так, чтобы у разных HTML элементов на странице были одинаковые стили, SASS, как и CSS, позволяет задать одинаковые стили для нескольких элементов на странице просто указав через запятую селекторы, если мы говорим о SCSS, или просто написав селекторы с новой строки, если мы говорим о синтаксисе SASS. Давайте посмотрим пример.
Давайте создадим простую HTML страницу. Создайте файл index.html со следующей разметкой и сохраните его в папку Ruby:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <title>Синтаксис SASS и SCSS</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p class="paragraph1">Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p> <h1>Consecteturadipisicingelit.</h1> <p class="paragraph2">Lorem ipsum dolor sit amet, consecteturadipisicingelit. Officiisquascorporis quos neque nihil, iurevellabore, eiusevenietdistinctiorepudiandaeut qui accusantium.</p> <p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Deleniti, eaquasiestrationeodio.</p> </body> </html> |
У нас появилась необходимость сделать текст в HTML параграфах красным,но не во всех, а только в тех, где есть HTML атрибут class. Давайте это реализуем:
1 2 3 4 5 6 7 |
.class1, .class2{ color:red; } |
Как видите, данный код ниже не отличается от CSS, но сохраните его в папку Ruby\lib\sass, мы назовем его style.scss. Скомпилировать SCSS код в CSS можно командой, об этом мы говорили, когда рассматривали установку SASS компилятора на Windows:
sass --watch C:\ruby\lib\sass\style.scss:style.css
При этом теперь SASS компилятор будет производить компиляцию файл автоматические, как только будут внесены и сохранены изменения в файл .scss.Файл с кодом .cssбудет находиться в каталоге Ruby.
После компиляции SCSS файла в CSS, вы можете открыть HTML документ и увидеть:
Страница оформлена с SASS кодом
Как видите, ничего сложного в синтаксисе SASS и уж тем более в синтаксисе SCSS нет, особенно, если вы уже знакомы с CSS.
SASS уже довольно старая технология, которой пользуются многие разработчики и, как и любой другой язык, язык SASS претерпевал изменения в процессе своего развития. На данный момент актуальна третья версия SASS, но более старые версии имели несколько другой синтаксис и использовали некоторые языковые конструкции, которые не рекомендованы к использованию в последней версии. Ниже вы найдете несколько операторов SASS, которые использовать в своем коде не стоит.
Номер | SASS оператор и его описание |
1 | = Оператор присвоения значения в SASS |
2 | ||= Этот оператор использовался, чтобы присвоить переменной значение по умолчанию. |
3 | ! Раньше восклицательный знак в SASSиспользовался вместо знака доллара при объявлении переменной. |
SASS, как и любой другой язык, дает возможность написать комментарии, синтаксис SASS поддерживает два вида комментариев:
Компилятор SASS просто игнорирует блочные комментарии и оставляет их, как они есть. Обратите внимание: CSS не поддерживает строчные комментарии, поэтому SASS компилятор удалит все строчные комментарии из выходного CSS файла.
Выберете удобный для себя способ, чтобы оставить комментарий