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

Материал из Wiki - Iphoster - the best ever hosting and support. 2005 - 2024
Перейти к:навигация, поиск
 
(не показаны 2 промежуточные версии этого же участника)
Строка 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="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>
  
<syntaxhighlight lang="scss">
+
Пример SCSS кода:
 +
 
 +
<syntaxhighlight lang="css">
 
$blue: #3bbfce;
 
$blue: #3bbfce;
 
$margin: 16px;
 
$margin: 16px;

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