Sass

Scope permalinkScope

Variables declared at the top level of a stylesheet are global. This means that they can be accessed anywhere in their module after they’ve been declared. But that’s not true for all variables. Those declared in blocks (curly braces in SCSS or indented code in Sass) are usually local, and can only be accessed within the block they were declared.

Shadowing

Local variables can even be declared with the same name as a global variable. If this happens, there are actually two different variables with the same name: one local and one global. This helps ensure that an author writing a local variable doesn’t accidentally change the value of a global variable they aren’t even aware of.

If you need to set a global variable’s value from within a local scope (such as in a mixin), you can use the flag. A variable declaration flagged as will always assign to the global scope.

️ Heads up!

Dart Sass: since 2.0.0
LibSass: ✗
Ruby Sass: ✗

Older Sass versions allowed to be used for a variable that doesn’t exist yet. This behavior was deprecated to make sure each stylesheet declares the same variables no matter how it’s executed.

The flag may only be used to set a variable that has already been declared at the top level of a file. It may not be used to declare a new variable.

Flow Control Scope

Variables declared in flow control rules have special scoping rules: they don’t shadow variables at the same level as the flow control rule. Instead, they just assign to those variables. This makes it much easier to conditionally assign a value to a variable, or build up a value as part of a loop.

️ Heads up!

Variables in flow control scope can assign to existing variables in the outer scope, but they can’t declare new variables there. Make sure the variable is already declared before you assign to it, even if you need to declare it as .

Основные реализации

SassScript был реализован на нескольких языках, примечательные реализации:

Оригинал Открытый исходный код Рубин реализация создана в 2006 году, так как не рекомендуется из-за отсутствия специалистов по сопровождению и достиг конца срока службы в марте 2019 года.
Официальный открытый исходный код Дротик выполнение.
libSass, официальный открытый исходный код C ++ выполнение.
официальная реализация JavaScript, опубликованная как модуль «sass» на npm.
JSass, неофициальный Ява выполнение.
phamlp, неофициальная реализация SASS / SCSS в PHP.
Ваадин имеет реализацию Sass на Java.
Firebug, а Fire Fox XUL («наследие») расширение для веб-разработки. С тех пор он устарел в пользу инструментов разработчика, интегрированных в сам Firefox. Он перестал работать, так как Firefox 57 отказался от поддержки расширений XUL.

Разновидности препроцессоров

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

Less
Sass (SCSS)
Stylus

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

Для полной картины, я хочу привести краткую справку по каждому препроцессору:

Less

Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.

Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS,
который основан на идентации. Считается устаревшим.
SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

Stylus

Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют , , и некоторые скобки).

Что такое препроцессоры css Sass и Less

В данной статье мы рассмотрим решение для ускорения сборки front-end вашего сайта и дальнейшей быстрой его переделки.

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

Препроцессоры преобразуют код, написанный на препроцессорном языке, в чистый и валидный CSS-код. И на выходе мы получаем чистый, валидный, кроссбраузерный код.

Препроцессоры позволяют существенно ускорить написание css-кода, минимизировать его и облегчают его поддержку. Препроцессоры превносят в css такие вещи как переменные, вложенность конструкций, наследование, миксины, циклы, ветвления и многое другое.

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

Препроцессоры css

Препроцессоры css — это технологии, созданные с целью расширить функционал привычных нам файлов стилей (css)

Существует несколько популярных css препроцессоров таких как Sass и Less. Разумеется их гораздо больше.

у этих препроцессоров похожий принцип — создаётся файл с уникальным расширением и после его компиляции на его основе строится привычный нам файл css. Для его изменения мы также открываем файл препроцессора, изменяем его и после компиляции у нас изменяется и файл css.

Препроцессоры мы используем на стороне разработки и разворачивать их на стороне сервера не стоит.

Преимущества препроцессоров css

Использование переменных изменение значение одной переменной влечёт изменение значений сразу нескольких правил css где это значение встречалось.

Сокращение кода благодаря правилам вложенности удаётся существенно сократить и оптимизировать код, что ускоряет его загрузку.

Удобство редактирования кода дорабатывать код стало гораздо проще.

Сравнение SASS и LESS:

Теперь перейдём к самому сравнению этих двух технологий.

Подробнее о каждом:

SASS (Syntactically Awesome Stylesheets) — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Был создан в 2006 году, не большой командой разработчиков, но главный автор этого языка Хамптон Катлин (англ. Hampton Catlin).

Также стоит упомянуть, что у SASS есть два синтаксиса, что может показаться на первый взгляд удобно, но об этом ниже

LESS (Leaner Style Sheets, компактная таблица стилей)— это динамический язык стилей. Он создан под влиянием языка стилей SASS, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS.

Этот язык был создан в 2009 году, силами человека по имени Алексис Селье (англ. Alexis Sellier).

Также надо сказать, что сейчас его разработка прикрашена, ещё в 2016 году, но зато он перерос практически в отдельную JavaScript библиотеку, что усложнит его использование не подготовленному человеку, то есть не знающего JS.

Синтаксис:

Как говорилось выше у SASS есть два синтаксиса, первый это стандартный который был изначально, но он на мой взгляд не удобный и не понятный сразу, поэтому буду использовать второй, который был создан под влиянием LESS, называется SCSS.

Для LESS всё стандартно, покажу как использовать именно в обычно LESS, без JavaScript.

Попытаемся сделать эту картинку.

Сначала посмотрите как сделать это на SASS со синтаксисом SCSS.

Sass

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

@mixindisplayAt($vertical,$horizontal){

@if($vertical==top){

top;

}@elseif($vertical==bottom){

bottom;

}

@if($horizontal==left){

left;

}@elseif($horizontal==right){

right;

}

.toastMessage {

@includedisplayAt(bottom,right);

}

.toastMessage {

width200px;

positionabsolute;

background#BBF5BB;

border1pxsolid#99C995;

border-radius6px;

box-shadow6px12pxrgba(0,0,0,0.17);

padding10px;

margin20px;

font-family-apple-system,BlinkMacSystemFont,»Segoe UI»,Roboto,Oxygen-Sans,Ubuntu,Cantarell,»Helvetica Neue»,sans-serif;

font-size13px;

}

Теперь LESS.

LESS

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
30
31
32

.displayAt(@position) when (@position = top) {

top;

}

.displayAt(@position) when (@position = bottom) {

bottom;

}

.displayAt(@position) when (@position = left) {

left;

}

.displayAt(@position) when (@position = right) {

right;

}

.toastMessage {

.displayAt(bottom);

.displayAt(right);

}

// Purely cosmetic.

.toastMessage {

width200px;

positionabsolute;

background#BBF5BB;

color#478342;

border1pxsolid#99C995;

border-radius6px;

box-shadow6px12pxrgba(0,0,0,0.17);

padding10px;

margin20px;

font-family-apple-system,BlinkMacSystemFont,»Segoe UI»,Roboto,Oxygen-Sans,Ubuntu,Cantarell,»Helvetica Neue»,sans-serif;

font-size13px;

}

Как можете заметить, в LESS программа на две строчки больше, что не значительно, когда нужно сверстать совсем не много, но может быть существенно во время вёрстки целого шаблона.

Также, на личный взгляд SASS более простой, за счёт наличия подобии функции, как в других языках программирования, да и вообще его синтаксис не много напоминает обычные языки программирования.

Работа:

Самое главное, это сколько вакансий можно найти по каждой технологии.

SASS всего 223 вакансии, что не так много, как я думал на момент 4 Января 2020 года, LESS же 283 вакансии, что в больше, это всё по Москве.

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

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

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

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

И вот у всех этих элементов сейчас стоит параметр border-radius: 7px, то есть скругление по углам — семь пикселей. И вдруг приходит дизайнер и говорит: «Всё пропало, ставь скругление 8 пикселей!» Вы терпеливо заходите в CSS-файл и в 30 местах меняете 7px на 8px.

Приходит дизайнер и говорит: «Миша, всё ерунда, давай по новой. Теперь 6 пикселей». Можно запустить в дизайнера стулом, а можно использовать препроцессор.

С препроцессором у вас 30 кнопок, в которых будет вот так:

border-radius: $defaultBorderRadius

А где-то в отдельном месте документа будет один раз написано:

$defaultBorderRadius: 7px;

И когда дизайнер придёт менять скругление на кнопках, вы измените его один раз, в одном месте, не нанося телесные повреждения дизайнеру.

Преимущества и недостатки препроцессоров

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

Хорошо подходят для больших проектов.

Сильно расширяют возможности обычного CSS.

Упрощают работу с однотипным кодом.

Проще вносить изменения и поддерживать код в актуальном состоянии.

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

Нет смысла использовать в маленьких проектах и простых страницах.

На выходе препроцессора получается CSS-код, который сложно прочитать человеку.

Нужно изучать что-то кроме самого CSS.

У каждого препроцессора свой синтаксис, и не получится быстро перейти от одного к другому.

SassScript

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

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

Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.

Sass	CSS — готовый результат
$accent: #FF9910 .button background-color: $accent color: #fff	.button { background-color: #FF9910; color: #fff; }

2.2 Операции с числами и строками + интерполяция

Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения (<, >, <=, >=, ==, !=) также поддерживаются для чисел.

Кроме того, в Sass есть возможность конкатенировать (соединять) строки.

Sass

CSS — готовый результат

$summ: 10 + 20 / 2
$cn: content

.selector
	margin:
		top: $summ + px
		bottom: 12px + 8px
	background-color: trans + parent
	#{$cn}: "con" + "tent"

.selector {
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: transparent;
	content: "content";
}

Как видим из примера $summ: 10 + 20 / 2, соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике

Обратите внимание, что при сложении 12px + 8px, мы получим 20px

Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке. Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:. Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:

Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:

Sass	CSS — готовый результат
$in: интер .interpol content: "#{$in}поляция"	.interpol { content: "интерполяция"; }

2.3 Операции с цветами

Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.

Sass

CSS — готовый результат

$color1: #440203 + #550506
$color2: #010203 * 2
$color3: rgba(180, 0, 0, 0.75) + rgba(20, 255, 0, 0.75)

body
	background-color: $color1
	color: $color2
	border-color: $color3

body {
	background-color: #990709;
	color: #020406;
	border-color: rgba(200, 255, 0, 0.75);
}

Sass

CSS — готовый результат

$translucent-red: rgba(255, 0, 0, 0.5);

p
	color: opacify($translucent-red, 0.3)
	background-color: transparentize($translucent-red, 0.25)

.selector
	background-color: rgba(#333, 0.75)

p {
	color: rgba(255, 0, 0, 0.8);
	background-color: rgba(255, 0, 0, 0.25);
}

.selector {
	background-color: rgba(51, 51, 51, 0.75);
}

Какой смысл использования препроцессоров?

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

Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня

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

CSS — это сложно

Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.

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

Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.

Простота использования

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

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

Структура и логичность кода

Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:

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

Примеси

Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.

Модульность

Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.

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

4. Вложенность

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

Вложенность может стать громоздкой и может обернуться вам тонной проблем, что приведет к невозможно длительным цепям селекторов. По этой причине рекомендуется придерживаться начального правила (Inception Rule) и придерживаться вложенности не более чем на три или четыре уровня.

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

Так же, как мы привыкли к нашим помощникам в препроцессорах, вложенность в обычном CSS работает по тем же принципам, но без необходимости компиляции языка. Для самой функции вложенности в обычном CSS есть черновая спецификация от Тэба Эткинса (Tab Atkins).

Nesting

When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn’t.

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.

With that in mind, here’s an example of some typical styles for a site’s navigation:

CSS Output

You’ll notice that the , , and selectors are nested inside the selector. This is a great way to organize your CSS and make it more readable.

Умные breakpoints

Предположим, вы храните layout значения в картах. Вы должны изменить layout на определенной breakpoint, таким образом вы определяете два layout карт: $small-layout и $big-layout. Но как вы получаете нужные значения, если у вас только одна функция (описанная в параграфе ‘Используйте карты или списки’), которая возвращает вложенные значения из дефолтной карты (скорее всего из $big-layout)? Создать отдельную функцию для получения $small-layout? Добавить layout карту, как дополнительный параметр для существующей функции?

Есть идея получше: создать breakpoint mixin. Этот шаблон взят из Susy, фреймворка для layout и grids. С тех пор как Susy использует карты для layout, на “susy-breakpoint” mixin вы можете задать layout карту как необязательный параметр. Ничего сверхъестественного не произойдет, но когда вы будет использовать другие функции (например gutter()) внутри breakpoint mixin, она автоматически возвратит значения в нужной layout карте. “Умный” breakpoint работает таким же образом, но использует специальную функцию для получения карты. Это даже может быть обертка для susy-breakpoint если вы используете Susy (для использования такого же Layout для обоих).

$small-layout: (
    header: (
        height: 30px
    )
);
$big-layout: (
    header: (
        height: 60px
    )
);
$default-layout: $big-layout;
$current-layout: $default-layout !default;
@mixin smart-breakpoint($breakpoint, $layout) {
    $_temp: $current-layout;
    $current-layout: $layout !global;
    @media screen and ($breakpoint) {
        @content;
    }
    $current-layout: $_temp !global;
}
.header {
    height: layout-value(header, height); // the value will be 60px
      @include smart-breakpoint('max-width: 768px', $small-layout) {
        height: layout-value(header, height);  // the value will be 30px
    }
}

Работающий код можно найти здесь.

Можете поиграть с кодом и посмотреть, как он работает, но в принципе mixin получает layout как параметр и переопределяет глобальное значения, добавляя !global флаг вначале. Когда вы используете функцию карты внутри breakpoint mixin, новое значение становится значением по умолчанию и вы получаете желаемый результат. До того, как закончить работу, mixin изменяет значение по умолчанию.

Установка SASS

Чтобы установить SASS, откройте командную строку и введите gem install sass, после этого вы должны получить сообщение об успешном окончании установки:

Подготовка необходимых файлов

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

Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS, создайте HTML-файл, дав ему имя index.html.

Поместите в него следующий код:

<!DOCTYPE html>
 
<html lang="en">
    
 <head>
         
<title>Введение в SASS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="container">
 
<header>
<h1>Простой Sass-документ</h1>
<h2>Статья для веб-дизайнеров и разработчиков</h2>
</header>
 
<div>
<p id="samplepara">Простой текстовый параграф</p>
<p>Еще один параграф с текстом</p>
</div>
 
 
<div>
<ul id="list1">
    <li>1й элемент списка</li>
    <li>2й элемент списка </li>
    <li>3й элемент списка </li>
</ul>
</div>
 
 
<footer>
<h3>Это отличный футер!</h3>
</footer>
 
</div>
 
</body>
 
</html>

Теперь, для файла SASS, создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss.

Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:

Конвертация SASS-кода в CSS

Чтобы преобразовать код SASS в CSS, мы будем использовать команду –watch, которая выполнит компиляцию.

Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS-файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss, чтобы убедиться, что все работает.

Скопируйте и вставьте следующий SASS-код в файл stye.scss, созданный вами в папке SASS:

$myMargin: 0px auto;
$myColor: red;
$myWidth: 600px;
 
h1 {
    color: $myColor;
    $myMargin: $margin;
}

Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу cd «Desktop«:

Теперь, находясь в папке рабочего стола, введите sass –watch Sass:Sass:

Используя команду – watch, сконвертируем все .scss-файлы в папке SASS. Также, файлы будут просканированы на наличие в них изменений. Заметьте, что в команде два слова SASS, разделенные двоеточием.

Первое слово представляет текущее положение файла .scss, а второе – расположение выходного файла. Убедитесь, что вы подключили сконвертированный CSS-файл к вашей HTML-странице:

Использование переменных

Переменные SASS объявляются с предваряющим их название символом $ и записываются аналогично CSS-свойствам. С помощью SASS, вы можете определять переменные для таких стилей, как font size, margin, padding и так далее.

Использование переменных дает вам возможность повторного использования заданных ранее значений.

В SASS существует шесть разных типов переменных:

Строковые (например, $myString: “здесь ваш текст”;);
Числовые (например, $myNum: 10px;);
Цветовые (например, $myColor: white;);
Логические (например, $myBool: true;);
Списковые (например, $myItemList: 1px solid red;);
Тип null – значение отсутствует (например, $myVar: null;).

Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:

$myColor: #009a82;
$myString: "здесь ваш текст";
$myFontSize: 13px;
$myMargin: 0px auto;
$myWidth: 460px;
 
h1 {
    color: $myColor;
    margin: 0;
    padding: 0;
}
 
#container {
    width: $myWidth;
    margin: $myMargin;
}

Запустив этот код в браузере, вы получите следующее:

Вложенность

SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.

В качестве примера, рассмотрим следующий код:

#container p {
   font-family: Arial;
   font-size: 13px;
}
 
#container h1 {
   font-family: Tahoma;
   font-size: 15px;
}
 
#container h2 {
   font-family: Helvetica;
   font-size: 14px;
}

Для SASS, код будет выглядеть следующим образом:

$myFontsize1: 13px;
$myFontsize2: 18px;
$myFontsize3: 25px;
$myWidth: 500px;
$myMargin: 0px auto;
 
#container {
    width: $myWidth;
    margin: $myMargin;
 
    p {
        font-family: Arial;
        font-size: $myFontsize1;
    }
 
    h1 {
        font-family: Tahoma;
        font-size: $myFontsize3;
    }
 
    h2 {
 
        font-family: Helvetica;
        font-size: $myFontsize2;
}
}

Обратите внимание, что мы расположили все стили элементов под идентификатором container, вместо того, чтобы предварять этим id каждый из них. Если вы запустите этот код в браузере, то увидите следующую картину:

Если вы запустите этот код в браузере, то увидите следующую картину:

libSass

На конференции разработчиков HTML5 2012 года Хэмптон Кэтлин, создатель Sass, анонсировал версию 1.0 libSass, реализации Sass на C ++ с открытым исходным кодом, разработанную Кэтлином, Аароном Леунгом и командой инженеров в Moovweb. Текущий сопровождающий Sass Крис Эппштейн также выразил намерение внести свой вклад.

По словам Кэтлина, libSass можно «вставить во что угодно, и в нем будет Sass … Вы можете вставить его прямо в Firefox сегодня и собрать Firefox, и он будет компилироваться там. Мы написали собственный парсер с нуля, чтобы убедитесь, что это возможно «.

Цели разработки libSass:

Производительность — Разработчики сообщили о 10-кратном увеличении скорости по сравнению с реализацией Sass на Ruby.
Более простая интеграция — libSass упрощает интеграцию Sass в большее количество программ. До появления libSass тесная интеграция Sass в язык или программный продукт требовала объединения всего интерпретатора Ruby. Напротив, libSass — это статически связываемая библиотека с нулевыми внешними зависимостями и C-подобным интерфейсом, что упрощает перенос Sass непосредственно в другие языки программирования и инструменты. Например, привязки libSass с открытым исходным кодом теперь существуют для Узел, Идти, и Рубин.
Совместимость — цель libSass — полная совместимость с официальной реализацией Sass на Ruby. Эта цель была достигнута в libsass 3.3.

Scope permalinkScope

Shadowing

️ Heads up!

Flow Control Scope

️ Heads up!

Основные реализации

Разновидности препроцессоров

Less

Sass (SCSS)

Stylus

Что такое препроцессоры css Sass и Less

Препроцессоры css

Преимущества препроцессоров css

Похожие

Sass: от новичка до эксперта

Sass — от новичка до реального проекта

CSS — Полное руководство (включая Flexbox, Grid и Sass)

Продвинутый CSS и Sass: Поднимите свой CSS на следующий уровень!

Все лучшее и самое полезное о SCSS

Сравнение SASS и LESS:

Подробнее о каждом:

Синтаксис:

Работа:

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

Преимущества и недостатки препроцессоров

SassScript

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

2.2 Операции с числами и строками + интерполяция

2.3 Операции с цветами

Какой смысл использования препроцессоров?

CSS — это сложно

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

Простота использования

Структура и логичность кода

Примеси

Модульность

4. Вложенность

Nesting

CSS Output

Умные breakpoints

Установка SASS

Подготовка необходимых файлов

Конвертация SASS-кода в CSS

Использование переменных

Вложенность

libSass