ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
Sass. Уроки для начинающих

Sass Введение

❮ Prev Next ❯

Что необходимо знать перед изучением Sass?

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

  • HTML - язык разметки веб-страниц;
  • CSS - язык стилизации и визуального оформления веб-страниц.

Если вы ещё не знаете эти технологии, то найдите уроки по HTML и CSS на Главной странице нашего сайта W3Schools на русском.

Что такое Sass?

Sass - самый популярный, стабильный и мощный язык CSS-расширений профессионального уровня в мире.

  • Sass - это сокращение от Syntactically Awesome StyleSheet - Синтаксически отличная таблица стилей
  • Sass - это расширение CSS
  • Sass - это CSS пре-процессор
  • Sass полностью совместим со всеми версиями CSS
  • Sass уменьшает повторение CSS и, следовательно, экономит время для его написания
  • Sass был спроектирован Хэмптоном Кэтлином и разработан Натали Вайценбаум в 2006 году
  • Sass можно загрузить с официального сайта и использовать бесплатно

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

Таблицы стилей становятся больше, всё сложнее и сложнее в обслуживании. Здесь может помочь препроцессор CSS.

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

Простой пример, почему Sass полезен

Допустим, у нас есть сайт с тремя основными цветами:

#a2b9bc

#b2ad7f

#878f99

Итак, сколько раз вам нужно вводить эти шестнадцатеричные значения? Много раз. А как насчет вариаций одних и тех же цветов?

Вместо того, чтобы много раз вводить вышеуказанные значения, вы можете использовать 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. Следовательно, вам понадобится препроцессор Sass для преобразования кода Sass в стандартный CSS.

Этот процесс называется транспилированием. Итак, вам нужно дать транспилятору (какой-то программе) некоторый код Sass, а затем вернуть код CSS.

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

Sass Тип файла

Sass-файлы имеют расширение файла .scss.

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

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

Sass пример

/* определить основные цвета */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* использовать переменные */
.main-header {
  background-color: $primary_1; // здесь вы можете поместить встроенный комментарий
}

❮ Prev Next ❯