.SASS вариант №

Sass (синтаксически удивительные таблицы стилей) — это язык сценариев с препроцессором. Он скомпилирован в CSS и хранится с расширением .sass. Sass состоит из двух синтаксисов: исходный, основанный на отступах, который использует расширение .sass, и более новый SCSS с блочным форматированием, такой как CSS, который использует расширение .scss.

Зачем использовать Sass

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

Как использовать файлы SASS

Файлы SASS не включаются непосредственно в документ HTML, а преобразуются в файлы CSS, которые включаются в файлы HTML. Вы можете установить Sass в своей системе, следуя инструкциям на Официальном сайте Sass.

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

Преобразовать один раз

Первый параметр команды — это исходный файл SASS, а второй параметр — выходной файл CSS.

sass main.sass main.css

Следите за изменениями

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

sass --watch main.sass main.css

Синтаксис Sass

Sass поддерживает переменные, вложенность, примеси, импорт, наследование селекторов и т. д. Ниже приведены примеры этих функций.

Переменные

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

Сасс

$primary-color: #47dff0
$secondary-color: darken($primary-color, 50%)
$margin: 16px

.highlight
    border-color: $primary-color
    color: $secondary-color

h1
    span
        margin: $margin / 2
    color: $secondary-color

Сгенерированный CSS

.highlight {
  border-color: #47dff0;
  color: #042f34;
}

h1 {
  color: #042f34;
}
h1 span {
  margin: 8px;
}

Вложение

Селекторы CSS могут быть вложены подобно иерархии HTML. В следующем примере диапазон вложен в блок h1.

Сасс

$primary-color: #47dff0
$secondary-color: darken($primary-color, 50%)
$margin: 16px

.highlight
    border-color: $primary-color
    color: $secondary-color

h1
    span
        margin: $margin / 2
    color: $secondary-color

Сгенерированный CSS

.highlight {
  border-color: #47dff0;
  color: #042f34;
}

h1 {
  color: #042f34;
}
h1 span {
  margin: 8px;
}

Миксины

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

Сасс

Объявление миксина

// Simple
=error-text
    color: red
    font-size: 25px
    font-weight: bold
    border: 1px solid black
    padding: 10px

// With Parameter
=message-text($color)
    color: $color
    font-size: 25px
    font-weight: bold
    border: 1px solid black
    padding: 10px

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

.error
    +error-text()

.success
    +message-text(green)

.info
    +message-text(blue)

Сгенерированный CSS

.error {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid black;
  padding: 10px;
}

.success {
  color: green;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid black;
  padding: 10px;
}

.info {
  color: blue;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid black;
  padding: 10px;
}

Продлевать

Расширение/наследование может оказаться полезным в случаях, когда свойства одного селектора необходимо использовать совместно с другим селектором. В приведенном ниже примере селектор .error-notice принимает все свойства селектора .error-text и добавляет свойства границы и заполнения.

Сасс

.error-text
    color: red
    font-size: 25px
    font-weight: bold

.error-notice
    @extend .error-text
    border: 1px solid black
    padding: 10px

Сгенерированный CSS

.error-text, .error-notice {
  color: red;
  font-size: 25px;
  font-weight: bold;
}

.error-notice {
  border: 1px solid black;
  padding: 10px;
}

Импорт

Импорт может быть полезен, если вы структурируете свои стили в разные файлы на основе функциональности или любой другой структуры, которой вы следуете. Вы можете импортировать все эти файлы в основной файл SASS, который позже преобразуется в CSS. При импорте не нужно указывать расширение файла в инструкции по импорту. Sass компилирует все файлы SASS напрямую. Чтобы файлы импорта не компилировались напрямую, вы можете сделать их частичными, добавив подчеркивание (_) в начале их имени. Частичные импортируются аналогично обычным файлам Sass.

Сасс

@import "variables"
@import "header-styles"
@import "footer-styles"

Выходной CSS будет содержать стили из всех импортированных файлов.

Использованная литература

See Also