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

Материал из Wiki - Iphoster - the best ever hosting and support. 2005 - 2023
Перейти к:навигация, поиск
Строка 4: Строка 4:
 
   
 
   
 
Пример SASS:
 
Пример SASS:
<syntaxhighlight lang="scss">
+
<syntaxhighlight lang="css">
 +
$blue: #3bbfce
 +
$margin: 16px
  
 +
.content-navigation
 +
  border-color: $blue
 +
  color: darken($blue, 9%)
 +
 +
.border
 +
  padding: $margin / 2
 +
  margin: $margin / 2
 +
  border-color: $blue
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
Пример SCSS:
  
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">

Версия 07:41, 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

Пример SCSS:

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

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

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