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

Материал из Wiki - Iphoster - the best ever hosting and support. 2005 - 2024
Перейти к:навигация, поиск
 
Строка 3: Строка 3:
 
  SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код '''которого специальной ruby-программой транслируется в обычный CSS код'''. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета)
 
  SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код '''которого специальной ruby-программой транслируется в обычный CSS код'''. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета)
 
   
 
   
Пример SASS:
+
Пример SASS кода:
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
 
$blue: #3bbfce
 
$blue: #3bbfce
Строка 18: Строка 18:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
Пример SCSS:
+
Пример SCSS кода:
  
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">

Текущая версия на 07:42, 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;
}