СправошнаяПоиск

Основы SASS/SCSS

Предварительная обработка

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

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

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

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

 

sass --watch input.scss output.css

 

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

 

sass --watch app/sass:public/stylesheets

 

Sass просматривал все файлы в app/sassпапке на наличие изменений и компилировал CSS в public/stylesheets папку.

Переменные

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

Синтаксис SCSS

 

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

 

 Вывод CSS

 

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

 

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

Вложенность

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

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

Имея это в виду, вот пример некоторых типичных стилей навигации по сайту:

Синтаксис SCSS

 

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

 

 Вывод CSS

 

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 и сделать его более читабельны.

Части

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

Модули

Вам не нужно писать весь свой Sass в одном файле. Вы можете разделить его, как хотите, с помощью @useправила. Это правило загружает другой файл Sass как модуль , что означает, что вы можете ссылаться на его переменные, примеси и функции в вашем файле Sass с пространством имен, основанным на имени файла. Использование файла также будет включать CSS , который он генерирует в ваш скомпилированный вывод!Синтаксис SCSS

 

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

 

// styles.scss @use 'base';
.inverse {
  background-color: base.$primary-color;
  color: white;
}

 

 Вывод CSS

 

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
.inverse {
  background-color: #333;
  color: white;
}

 

Обратите внимание, что мы используем @use 'base';в styles.scssфайле. Когда вы используете файл, вам не нужно включать расширение файла. Sass умен и все поймет за вас.

Миксины

Некоторые вещи в CSS немного утомительны для написания, особенно с CSS3  и многими существующими префиксами поставщиков. Mixin позволяет вам создавать группы  объявлений CSS , которые вы хотите повторно использовать на своем сайте. Это помогает сохранить ваш Sass очень сухим. Вы даже можете передавать значения, чтобы сделать миксин более гибким. Вот пример для  theme.

Синтаксис SCSS

 

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}
.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

 

Вывод CSS

 

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}
.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}
.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

 

Чтобы создать миксин, вы используете @mixinдирективу и даете ему имя. Мы назвали наш миксин theme. Мы также используем переменную  $themeвнутри круглых скобок, чтобы мы могли передать themeвсе, что захотим. После того, как вы создадите свой миксин, вы можете использовать его как объявление CSS ,  начиная с @include, за которым следует имя миксина.

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

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

Синтаксис SCSS

 

/* 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;
}

 

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

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

Обратите внимание, что CSS не %equal-heightsгенерируется, потому что %equal-heightsникогда не расширяется.

Операторы

Выполнение математики в вашем CSS очень полезно. В Sass есть несколько стандартных математических операторов, таких как +, -, *, math.div()и %. В нашем примере мы собираемся выполнить простую математику, чтобы вычислить ширину для article и aside.

Синтаксис SCSS

 

@use "sass:math";
.container {
  display: flex;
}
article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

 

Вывод CSS

 

.container {
  display: flex;
}
article[role="main"] {
  width: 62.5%;
}
aside[role="complementary"] {
  width: 31.25%;
  margin-left: auto;
}

 

Мы создали очень простую плавную сетку на основе 960 пикселей. Операции в Sass позволяют нам делать что-то вроде получения значений пикселей и без особых хлопот преобразовывать их в проценты.