Что такое препроцессор sass

Sass

Sass — это метаязык (язык для описания другого языка), который упрощает и ускоряет написание CSS-кода. Его часто называют препроцессором CSS — это означает, что Sass имеет свой синтаксис, из которого генерирует CSS-код, понятный любому браузеру.

Освойте профессию «Frontend-разработчик»

Для чего используют Sass

Препроцессор Sass помогает:

• сделать CSS-код понятнее и проще. Его легче масштабировать, обновлять и поддерживать;
• расширить функциональность. С помощью Sass можно использовать CSS-константы, встроенные функции, вложенные правила, примеси (смешанные стили), наследование и так далее;
• избежать многократного повторения одинаковых фрагментов кода. Это экономит время разработчика, уменьшает объем файлов стилей и ускоряет обработку страниц.

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Разберем использование Sass на примере. В цветовой палитре сайта преобладают три цвета:

Без использования препроцессора разработчику нужно вручную вводить HEX-значения каждого из этих оттенков несколько раз. Sass решает проблему просто:

/* определяем переменные для основных цветов */

$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* используем переменные в стилях*/

.main-header background-color: $primary_1;
>
.menu-left
background-color: $primary_2;
>
.menu-right background-color: $primary_3;
>

Если дизайнер (или разработчик) решит изменить цвет какого-либо элемента, достаточно поменять значение один раз — у переменной.

Как работает Sass

Отличительная особенность Sass — наличие двух синтаксисов.

1. SASS не использует фигурные скобки, характерные для стилей CSS. Вместо них применяются отступы. Расширение файла — .sass.

&:disabled
color: $mdc-button-disabled-ink-color
cursor: default
pointer-events: none

2. SCSS использует фигурные скобки. Расширение файла — .scss.

При этом оба диалекта поддерживают не только стандартные CSS-комментарии, но и построчные примечания, отделяемые от кода двойным слэшем //:

/* это пример обычного CSS-комментария */

.main-header background-color: $primary_1; // это пример построчного комментария
>

Браузеры не понимают код Sass — они распознают и отображают только стили CSS. Для преобразования используется специальное приложение — препроцессор, который переводит конструкции в понятный браузеру формат. В готовый CSS-код не включаются построчные комментарии. В ходе компиляции в CSS передаются только стандартные примечания, отделяемые от кода символами /* */.

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Установка Sass

Sass написан на языке Ruby и отличается минимальными системными требованиями:

• не зависит от конкретной программной платформы — пакет можно установить на компьютер с любой операционной системой;
• код CSS, полученный в результате работы препроцессора, обрабатывается любыми браузерами.

Для установки с помощью менеджера пакетов NPM достаточно выполнить команду:

npm install -g sass

Команда для установки в случае использования менеджера пакетов Homebrew выглядит так:

brew install sass/sass/sass

При использовании менеджера Chocolatey в среде Windows нужно выполнить команду:

choco install sass

Хороший бесплатный инструмент для работы с Sass — приложение Scout-App, которое работает на Windows, Linux и MacOS.

Переменные в Sass

Переменные применяются для хранения данных и значений для повторного использования. Sass поддерживает несколько типов переменных:

• строки;
• списки;
• числовые значения;
• пустые значения null;
• цвета;
• логические (булевы) значения.

Проиллюстрируем использование переменных на примере. На скриншотах видно, как содержимое файла .scss определяет код CSS и HTML. Используются переменные:

• myFont — задает шрифт Helvetica;
• myColor — устанавливает красный цвет;
• myFontSize — определяет размер шрифта, 18 кегль;
• myWidth — задает ширину контейнера, 680 пикселей.

Слева — переменные в файле .scss, справа — представление в браузере.

Слева — скомпилированный CSS-код, понятный браузеру.

Слева — HTML-код, в котором есть ссылка на скомпилированный файл стиля CSS.

Область видимости переменных Sass ограничивается вложенными элементами — это позволяет предотвратить влияние стилей друг на друга. Зададим различные цвета для основного цвета и для заголовка:

Может показаться, что переменная $myColor передаст зеленый цвет основному тексту. Однако Sass четко разделяет стили элементов — цвет параграфа будет красным, поскольку стили CSS в результате компиляции выглядят так:

Область видимости переменных в Sass ограничена вложенными элементами.

Использование !global

По умолчанию область видимости всех переменных в Sass ограничена, но у разработчика есть возможность переопределения области видимости отдельных переменных — с локальной на глобальную. Это возможно с помощью метода !global. Добавление переключателя !global станет указанием на то, что переменная должна быть видна на всех уровнях.

Для иллюстрации воспользуемся кодом из предыдущего примера: добавим к переменной $myColor элемента h1 переключатель !global:

$myColor: red;
h1 $myColor: green !global;
color: $myColor;
>
p color: $myColor;
>

Теперь и заголовок, и текст параграфа имеют один цвет — зеленый, поскольку переменная в CSS-коде стала глобальной:

Глобальные переменные нужно определять отдельно от локальных переменных, в файле под названием _globals.scss. Он включается в основной код с помощью функции @include.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Статьи по теме:

Основы Sass

Прежде, чем Вы сможете использовать Sass, Вам необходимо его настроить в вашем проекте. Если Вы хотите просто почитать, то не стесняйтесь — читайте, но мы рекомендуем сначала установить Sass. Установите Sass для того, чтобы разобраться во всех возможностях Sass.

Препроцессинг

Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS , например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.

Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS -файл, который Вы сможете использовать на любом сайте.

Самый простой способ получить такой результат — использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS , используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .

Также, вы можете следить за изменениями только определенных файлов или папок, используя флаг —watch . Данный флаг сообщает Sass, что необходимо следить за изменениями указанных файлов и при наличии таковых производить перекомпиляцию CSS после сохранения файлов. Если вы хотите отслеживать изменения (вместо ручной перекомпиляции) вашего файла, например, input.scss , то вам необходимо просто добавить флаг в команду:

sass –watch input.scss output.css

Вы также можете указать папки для отслеживания изменений и куда сохранять компилированные CSS файлы, для этого достаточно указать пути и разделить их двоеточием, например:

sass --watch app/sass:public/stylesheets 

Sass будет отслеживать все файлы в директории app/sass и компилировать CSS в директорию public/stylesheets .

Переменные

Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS , которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $ . Рассмотрим пример:

SCSS Syntax

$font-stack: Helvetica, sans-serif; $primary-color: #333; body  font: 100% $font-stack; color: $primary-color; > 

Sass Syntax

$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color 

CSS Output

body  font: 100% Helvetica, sans-serif; color: #333; > 

Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS -файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

Вложенности

При написании HTML , Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.

Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

SCSS Syntax

nav  ul  margin: 0; padding: 0; list-style: none; > li  display: inline-block; > a  display: block; padding: 6px 12px; text-decoration: none; > > 

Sass Syntax

nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none 

CSS Output

nav ul  margin: 0; padding: 0; list-style: none; > nav li  display: inline-block; > nav a  display: block; padding: 6px 12px; text-decoration: none; > 

Вы заметили, что селекторы ul , li , и a являются вложенными в селектор nav ? Это отличный способ сделать ваш CSS -файл более читабельным. Когда вы сгенерируете CSS -файл, то на выходе вы получите что-то вроде этого:

Фрагментирование

Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS , которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss . Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import .

Импорт

CSS имеет возможность импорта, которая позволяет разделить ваш CSS -файл на более мелкие и облегчить @import , то в CSS создается еще один HTTP -запрос. Sass берет идею импорта файлов через директиву @import , но вместо создания отдельного HTTP -запроса Sass импортирует указанный в директиве файл в тот, где он вызывается, т.е. на выходе получается один CSS -файл, скомпилированный из нескольких фрагментов.

Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss . И мы хотим импортировать _reset.scss в base.scss .

SCSS Syntax

// _reset.scss html, body, ul, ol  margin: 0; padding: 0; > 

// base.scss @import 'reset'; body  font: 100% Helvetica, sans-serif; background-color: #efefef; > 

Sass Syntax

// _reset.sass html, body, ul, ol margin: 0 padding: 0 

// base.sass @import reset body font: 100% Helvetica, sans-serif background-color: #efefef 

CSS Output

html, body, ul, ol  margin: 0; padding: 0; > body  font: 100% Helvetica, sans-serif; background-color: #efefef; > 

Обратите внимание на то, что мы используем @import ‘reset’; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss . Sass — умный язык и он сам догадается.

Миксины (примеси)

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3 , где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS , которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform :

SCSS Syntax

@mixin transform($property)  -webkit-transform: $property; -ms-transform: $property; transform: $property; > .box  @include transform(rotate(30deg)); > 

Sass Syntax

=transform($property) -webkit-transform: $property -ms-transform: $property transform: $property .box +transform(rotate(30deg)) 

CSS Output

.box  -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); > 

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin transform . We’re also using the variable $property inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Расширение/Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами. Класс-шаблон — особый тип классов, который выводится только при использовании расширения — это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.

SCSS Syntax

/* This CSS will print because %message-shared is extended. */ %message-shared  border: 1px solid #ccc; padding: 10px; color: #333; > // This CSS won't print because %equal-heights is never extended. %equal-heights  display: flex; flex-wrap: wrap; > .message  @extend %message-shared; > .success  @extend %message-shared; border-color: green; > .error  @extend %message-shared; border-color: red; > .warning  @extend %message-shared; border-color: yellow; > 

Sass Syntax

/* This CSS will print because %message-shared is extended. */ %message-shared border: 1px solid #ccc padding: 10px color: #333 // This CSS won't print because %equal-heights is never extended. %equal-heights display: flex flex-wrap: wrap .message @extend %message-shared .success @extend %message-shared border-color: green .error @extend %message-shared border-color: red .warning @extend %message-shared border-color: yellow 

CSS Output

.message, .success, .error, .warning  border: 1px solid #ccc; padding: 10px; color: #333; > .success  border-color: green; > .error  border-color: red; > .warning  border-color: yellow; > 

Вышеуказанный код сообщает классам .message , .success , .error и .warning вести себя как %message-shared . Это означает, что где бы не вызывался %message-shared , то и .message , .success , .error и .warning тоже будут вызваны. Магия происходит в сгенерированном CSS , где каждый из этих классов получает css-свойства, как и %message-shared . Это позволит вам избежать написания множества классов в HTML элементах.

Вы можете расширить большинство простых CSS селекторов прибавление к классам-шаблонам в Sass, однако, использование шаблонов — простейший способ быть уверенным, что вы не расширяете класс везде, где он используется в ваших стилях, что могло бы привести к непреднамеренным наборам стилей в вашем CSS.

Когда вы генерируете ваш CSS , то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS , так как ни разу не был использован.

Математические операторы

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как + , — , * , / и % . В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article .

SCSS Syntax

.container  width: 100%; > article[role="main"]  float: left; width: 600px / 960px * 100%; > aside[role="complementary"]  float: right; width: 300px / 960px * 100%; > 

Sass Syntax

.container width: 100% article[role="main"] float: left width: 600px / 960px * 100% aside[role="complementary"] float: right width: 300px / 960px * 100% 

CSS Output

.container  width: 100%; > article[role="main"]  float: left; width: 62.5%; > aside[role="complementary"]  float: right; width: 31.25%; > 

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

Sass © 2006–2018 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, Jina Anne, и многочисленные участники. Доступно для использования и изменения по лицензии MIT.

Препроцессор Sass. Полное руководство и зачем он нужен

Sass это расширение CSS, которое придаёт мощи и элегантности этому простому языку. Sass даст вам возможность использовать переменные, вложенные правила, миксины, инлайновые импорты и многое другое, всё с полностью совместимым с CSS синтаксисом. Sass помогает сохранять огромные таблицы стилей хорошо организованными, а небольшим стилям работать быстро, особенно с помощью библиотеки стилей Compass.

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

Сразу обратите внимание, что если вам нужен простой функционал, такой как перменные, то в простом CSS они уже появились и не нужно загружать себя таким инструментом как Sass. Вот статья — Руководство по работе с переменными в CSS

��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️

Синтаксис

Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый повсюду в этой статье — это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют .scss расширение.

Второй и более старый синтаксис, также известный как краёный синтаксис или иногда просто Sass, даёт более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал, хотя некоторые из них имеют слегка другой подход. Файлы используемые этот синтаксис имеют расширение .sass .

Любой синтаксис может импортировать файлы, написанные в другом. Файлы могут быть автоматически сконвертированы из одного в другой, используя sass-convert команду:

# Convert Sass to SCSS$ sass-convert style.sass style.scss# Convert SCSS to Sass$ sass-convert style.scss style.sass

Использование Sass

Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:

Если вы на Windows, то возможно вам надо установить сначала Ruby.

Для запуска Sass из командной строки просто используйте:

sass input.scss output.css

Вы также можете указать Sass следить за файлом и обновлять CSS каждый раз, когда Sass файл меняется:

sass —watch input.scss:output.css

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

sass —watch app/sass:public/stylesheets

Используйте sass —help для полной документации.

Селекторы

CSS vs. SCSS селекторы.

#main color: #999;>#main .content color: #bfbfbf;>

CSS отрывок выше, может быть написан в SCSS таким образом:

#maincolor: #999;.content< color: #bfbfbf;>>

Как мы можем видеть, SCSS структура более схожа с DOM структурой. Это позволяет нам организовать наш CSS более эффективно. Вот примеры:

#main h1 color: #00ff00;width: 97%;.title background-color: #ff0000;color: #000000;>>

Будет скомпилировано в:

#main h1 color: #00ff00;width: 97%;>#main h1 .titlebackground-color: #ff0000;color: #000000;>

Ссылаясь на родительский селектор:

#wrapper h1width:20px;&:hoverwidth:25px;>>

& будет заменен родительским селектором. То есть код выше, будет эквиалентен:

#wrapper h1width:20px;>#wrapper h1:hoverwidth:25px;>

Импорты

Нормальный импорт.

@import “foo.css”; //импортирует foo.css@import “foo” screen; //импортирует foo.scss@import “foo.scss” screen; //импортирует foo.scss@import “foo1”,”foo2" screen; //импортирует foo1.scss и foo2 scss

Частичный

Если вы не хотите компилировать SCSS файл как CSS, вы можете использовать “ _ ” перед названием файла.

@import “colors”; //_colors.scss будет импортирован@import “utils/foo.scss”; // Это импортирует fo.scss в папку utils.

Вложенные импорты:

Если demo.scss включает в себя:

.example color: red;>

#main @import “demo”;>

Будет скомпилировано в

#main .example color: red;>

Переменные

SCSS переменные начинаются с символа $.

$width: 10px;$headercolor:red;#main h1width: $width;color:$headercolor;>

Будет скомпилировано в:

#main h1width: 10px;color:red;>

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

#main $width: 5em !global;width: $width;>#sidebar width: $width;>

Вы можете указывать переменные в отдельном файле и вы можете импортировать этот scss файл, чтобы использовать эти переменные. Это как конфиг файл для вашего проекта. Если вы меняете значение переменных, то оно будет изменено везде, где вы его используете. Это очень эффективно для больших проектов. Мы увидим это чуть позже.

Вы также можете производить разные операции в SCSS. Для примера:

p font: 10px/8px; // Чистый CSS без деления$width: 1000px;width: $width/2; // Использование переменных в деленииwidth: round(1.5)/2; // Использование функции и деленияheight: (500px/2); // Использование скобок и деленияmargin-left: 5px + 8px/2px; // Использование сложения и деленияfont: (italic bold 10px/8px); // В списке, скобке на учитываются>

p font: 10px/8px;width: 500px;height: 250px;margin-left: 9px;>

Вставка: #<>

Вы можете использовать переменные в свойствах имен и значения, используя #<> . Для примера:

$name: foo;$attr: border;p.# #-color: blue;>

p.foo border-color: blue;>

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

@if

p @if 1 + 1 == 2 @if 5 @if null >

p border: 1px solid;>

@for

@for $i from 1 through 3 .item-# >

.item-1 .item-2 .item-3

@each

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) # < font-size: $size;>>

h1 h2 h3

@while

$i: 6;@while $i > 0 .item-# $i: $i — 2;>

.item-6 .item-4 .item-2

Миксины

Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной @mixin .

Рассмотрите следующий пример:

@mixin large-text font: family: Arial;size: 20px;weight: bold;>color: #ff0000;>.page-title @include large-text;padding: 4px;margin-top: 10px;>

.page-title font-family: Arial;font-size: 20px;font-weight: bold;color: #ff0000;padding: 4px;margin-top: 10px;>

Вы также можете использовать составные миксины, например как:

@mixin mixin-onecolor: red;>@mixin mixin-twowidth:20px;>.page-title @include mixin-one;@include mixin-two;>

Вы также можете передавать переменные в миксинах:

$globel-prefixes:webkit moz ms o;@mixin prefixer ($property,$value,$prefixes:null)@if $prefixes==null@each $prefix in $globel-prefixes -#-#: $value; >> @else @each $prefix in $prefixes -#-#: $value;>>#: $value;>*@include prefixer(box-sizing,border-box);>

Будет скомпилено в:

*-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;>

Функции

Вы также можете определять функции, возвращающие значение. Для примера.

$no-of-columns:12;$gutter-width:2%;@function get-column-width($i)@return (100% — ($no-of-columns/$i — 1) * $gutter-width) / $no-of-columns * $i;>.col-6 width:get-column-width(6);>

Будет скомпилировано в:

.col-6 width: 49%;>

Расширения

Вы столкнетесь с ситуацией, когда вам нужно будет переиспользовать стили. Рассмотрите следующий пример:

Оба будут иметь одинаковые стили, кроме цвета.

.btnmargin:10px;color:black;width:200px;height:100px;>.btn-blue@extend .btn;background:blue;>

Это будет скомпилировано в:

.btn,.btn-bluemargin:10px;color:black;width:200px;height:100px;>.btn-blue

Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.

Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать % перед селектором.

%btnmargin:10px;color:black;width:200px;height:100px;>.btn-blue@extend %btn;background:blue;>.btn-red Будет скомпилировано в:.btn-bluemargin:10px;color:black;width:200px;height:100px;background:blue;>.btn-redmargin:10px;color:black;width:200px;height:100px;background:red;>

Уроки SASS / SCSS

Препроцессор SASS / Урок #1 — Что такое SASS, SCSS. Установка

SASS или же SCSS это препроцессор, который служит для быстрого написания CSS стилей. Благодаря SASS вы можете добавить переменные, функции, наследование и многое другое к обычному документу CSS.

Видеоурок

Полезные ссылки:

1. Курс по языку CSS ;
2. Официальный сайт SASS ;
3. Редактор Atom .

Что такое SASS?

SASS — это препроцессор, позволяющий писать код для стилей CSS, используя всевозможные: переменные, циклы, миксины, функции и многое другое.

Прежде чем изучать SASS стоит изучить CSS, так как без знаний второго вы не сможете ощутить полезность данной технологии. Курс по изучению CSS вы можете посмотреть здесь .

Препроцессор построен на языке Ruby , поэтому для его работы необходимо скачать Ruby и далее использовать терминал или командную строку для превращения SASS в CSS. Сам язык Ruby при этом знать не обязательно, но если вы хотите его изучить, то это можно сделать здесь .

Браузеры не воспринимают файлы, написанные на SASS, они не могут прочитать код внутри них и не могут понять что необходимо сделать. Из-за этого, весь SASS необходимо конвертировать в привычные CSS файлы.

В чём отличия между SASS и SCSS?

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

На официальном сайте SASS приведен пример с использованием обеих препроцессоров.

Ниже приведён пример кода на SASS:

$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color

Ниже пример кода на SСSS:

$font-stack: Helvetica, sans-serif; $primary-color: #333; body

Как видите, оба препроцессора отличаются лишь синтаксисом. В SASS все вложенные свойства выделяются отступами, при чем очень важно соблюдать отступы и их количество. SCSS более приближен к обычному CSS и все вложенные стили записываются через фигурные скобки — <> .

В ходе курса мы будем использовать SCSS, так как синтаксис с фигурными скобками более привычен. В случае если вы хотите использовать SASS, то все возможности будут такими же, измениться лишь синтаксис написания кода.

Онлайн редактор кода

Большое задание по курсу

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