Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса:

sass — отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;
SCSS (Sassy CSS) — использует фигурные скобки, как и сам CSS.

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

Преимущества Sass

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

2. Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;

3. Sass — это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;

4. Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков — Bourbon;

5. Синтаксис. Можно выбрать один из двух синтаксисов — упрощенный (SASS) и развернутый CSS-подобный (SCSS).

Синтаксис Sass

# SASS - синтаксис отступов

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

# SCSS - синтаксис расширения

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

Вложенные правила

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

#header
  background: #FFFFFF

  .error
    color: #FF0000
  
  a
    text-decoration: none
    &:hover
      text-decoration: underline

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

#header {
   background: #FFFFFF; 
}
#header .error {
   color: #FF0000; 
}
#header a {
   text-decoration: none; 
}
#header a:hover {
   text-decoration: underline; 
}

Переменные

Sass позволяет работать с переменными. В CSS они обозначаются двойным тире (—), а в препроцессорах знаком доллара ($).

$number: 1;
$color: #ff0000;
$text: "tproger forever.";
$text: "IT forever." !default;
$nothing: null;

Амперсанд

В SCSS используется директива &. Пример:

#p {
  color: black;
  a {
    font-weight: bold;
    &:hover {
      color: red;
    }
  }
}

С помощью символа & можно явно указать, где должен быть вставлен родительский селектор. Результат компиляции Sass (из предыдущего примера) в CSS ниже:

#p {color: black;}
#p a {font-weight: bold;}
#p a:hover {color: red;}

Миксины

Миксины объявляются директивой @mixin. После неё должно стоять имя миксина и, опционально, его параметры, а также блок, содержащий тело миксина.

Например, можно определить миксин flexible(), который далее будет включён, например, в класс .centered-elements следующим образом:

@mixin flexible () {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
.centered-elements {
    @include flexible ();
    border: 1px solid gray;
  }

Теперь каждый раз после применения класса .centered-elements к HTML-элементу, последний будет преобразован во Flexbox.

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд (&).

Арифметические операции

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

Операторы сравнения

x==y возвращает true, если x и y равны
x!=y возвращает true, если x и y не равны
x>y возвращает true, если x больше, чем y
x=y возвращает true, если x больше или равно y
x<=y возвращает true, если x меньше или равно y

Создадим миксин, который будет применять свойство padding, если его значение больше значения margin:

@mixin spacing($padding, $margin) {
    @if ($padding > $margin) {
        padding: $padding;
    } @else {
        padding: $margin;
    }
}

.container {
    @include spacing(10px, 20px);
}

Строки

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

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

p {
    font: 50px Ari + "al"; // Компилируется в 50px Arial
}

Пример ниже демонстрирует, как делать не надо:

p {
    font: "50px" + Arial; // ОШИБКА!
}

Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован. Пример:

p:after {
    content: "Верните Линуса " + Торвальдса!; // ОШИБКА!
}

Операторы управления потоками

В SCSS есть функции (fucntion()) и директивы (@directive). Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @.

Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.

if()

if() — это функция (и иногда основа искусственного интеллекта). Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений. Пример:

/* Использование функции if() */
if (true, 1px, 2px) => 1px;
if (false, 1px, 2px) => 2px;

@if

@if — это директива, использующаяся для разветвления на основе условия. Пример:

/* Использование директивы @if */
p {
    @if 1 + 1 == 2 { border: 1px solid;  }
    @if 7 < 5      { border: 2px dotted; }
    @if null       { border: 3px double;  }
}

Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода. Директива @for итерируется 5 раз:

@for $i from 1 through 5 {
    .definition-#{$i} { width: 10px * $i; }
}

Результат компиляции в CSS:

.definition-1 { width: 10px; }
.definition-2 { width: 20px; }
.definition-3 { width: 30px; }
.definition-4 { width: 40px; }
.definition-5 { width: 50px; }

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var. Пример:

@each $animal in img1, img2, img3, img4 {
    .#{$animal}-icon {
        background-image: url("/images/#{$animal}.png")
    }
}

Результат компиляции в CSS:

.platypus-icon { 
    background-image: url("/images/img1.png"); 
}
.lion-icon { 
    background-image: url("/images/img2.png"); 
}
.sheep-icon { 
    background-image: url("/images/img3.png"); 
}
.dove-icon { 
    background-image: url("/images/img4.png"); 
}

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true.

Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for, хотя она бывает необходима довольно редко. Например:

$index: 5;
@while $index > 0 {
    .element-#{$index} { width: 10px * $index; }
    $index: $index - 1;
}

Результат компиляции:

.element-5 { width: 50px; } 
.element-4 { width: 40px; } 
.element-3 { width: 30px; } 
.element-2 { width: 20px; } 
.element-1 { width: 10px; }

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках. Создадим функцию three-hundred-px(), возвращающую 400px.

@function three-hundred-px() {
    @return 400px;
}

.name {
    width: three-hundred-px();
    border: 1px solid gray;
    display: block;
    position: absolute;
}

После применения класса .name ширина элемента будет равна 400 пикселям.

2023-11-19 22:31 Самоучитель по CSS