SCSS/SASS - что это такое: различия между версиями

Версия 07:40, 30 ноября 2020

SCSS/SASS - что это такое. Отличие SCSS от SASS

SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета)

Пример SASS:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

@@ Строка 4: / Строка 4: @@
 Пример SASS:
-<syntaxhighlight lang="SCSS">
+<syntaxhighlight lang="scss">
 </syntaxhighlight>
-<syntaxhighlight lang="SCSS">
+<syntaxhighlight lang="scss">
 $blue: #3bbfce;
 $margin: 16px;