Введение в Sass

Вам нужно знать

Прежде чем продолжить, вы должны иметь базовые знания о следующем:

  • HTML
  • CSS

Если вы хотите сначала изучить эти темы, пожалуйста, зайдите на нашу Главная страница Посетите эти курсы.

Что такое Sass?

  • Sass означает Syntactically Awesome Stylessheet (стильная таблица с великолепной грамматикой)
  • Sass - это расширение CSS
  • Sass - это CSS-преобразователь
  • Sass полностью совместим с всеми версиями CSS
  • Sass сокращает повторение CSS, что экономит время
  • Sass был спроектирован Hampton Catlin и разработан Natalie Weizenbaum в 2006 году
  • Sass можно бесплатно скачивать и использовать

Почему стоит использовать Sass?

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

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

Пример Sass, который может быть полезен

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

#a2b9bc
#b2ad7f
#878f99

Сколько раз вам нужно ввести эти HEX-значения? Много раз. Что если изменится цвет, который используется несколько раз?

Вы можете написать следующий код Sass, вместо того чтобы многократно вводить上面的 значения:

Пример 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?

Браузер не понимает код Sass. Поэтому вам нужен предprocessor Sass, чтобы преобразовать код Sass в стандартный CSS.

Этот процесс называется транслейтом (transpiling). Поэтому вам нужно предоставить код Sass транслейтеру (某种 программе), а затем получить код CSS.

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

Тип файла Sass

Расширение файла Sass файлов Sass - ".scss".

Комментарии Sass

Sass поддерживает стандартные комментарии CSS /* comment */Кроме того, поддерживаются комментарии в строке // comment:

Пример Sass

/* Определение основных цветов */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Использование переменных */
.main-header {
  background-color: $primary_1; // Вы можете добавить комментарий в строке
}