Loading AI tools
З Вікіпедії, вільної енциклопедії
Sass (англ. Syntactically Awesome Stylesheets) — скриптова метамова, яка інтерпретується в каскадні таблиці стилів (CSS). Спроектована Гемптоном Кетліном та розроблена Наталі Вейзенбаум. Sass призначений для підвищення рівня абстракції коду та спрощення файлів CSS.
Sass | |
---|---|
Дата появи | 2007 |
Творці | Гемптон Кетлін |
Розробник | Наталі Вейзенбаум, Кріс Епштейн |
Останній реліз | 3.4.23 (19 грудня 2016 ) |
Система типізації | Динамічна |
Під впливом від | CSS, Haml, YAML |
Вплинула на | LESS, Stylus, Tritium |
Операційна система | Крос-платформна |
Ліцензія | MIT |
Звичайні розширення файлів | .sass, .scss |
Вебсайт | sass-lang.com |
Мова Sass має два синтаксиси:
Файли sass-синтаксису мають розширення .sass, scss-синтаксису — .scss.
Sass розширює CSS, надаючи кілька механізмів, доступних в більш традиційних мовах програмування, зокрема об'єктно-орієнтованих мовах, але недоступних для CSS. Інтерпретатор Sass транслює SassScript у блоки правил CSS. По суті, Sass — це синтаксичний цукор для CSS.
Sass дозволяє визначати змінні. Змінні починаються зі знака долара ($). Присвоєння значень змінних здійснюється за допомогою двокрапки (:).[1]
SassScript підтримує чотири типи даних:[1]
Змінна може бути аргументом чи результатом однієї чи кількох функцій. Під час трансляції значення змінних вставляються у вихідний (тобто результуючий) документ CSS.
Синтаксис SCSS:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 20%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Синтаксис SASS:
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin/2
margin: $margin/2
border-color: $blue
Компілюється у:
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Одна з ключових особливостей Sass — вкладені правила, які полегшують процес створення і редагування вкладених селекторів.
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}
Буде скомпільовано в:
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}
Для уникнення постійних повторень однакових правил CSS, в Sass введені домішки. Домішки об'єднують подібні правила та викликаються в необхідних місцях.
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
#data {
@include table-base;
}
Буде скомпільовано в:
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
Домішки також підтримують аргументи.[2]
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
}
Буде скомпільовано в:
#data {
float: left;
margin-left: 10px;
}
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
Буде скомпільовано в:
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
Sass дозволяє перебір змінних за допомогою @for
, @each
та @while
, які можуть бути використані для застосування різних стилів до елементів з однаковими ідентифікаторами або класами.
$squareCount: 3;
@for $i from 1 through $squareCount {
#square-#{$i} {
background-color: red;
width: 50px * $i;
height: 120px / $i;
}
}
Буде скомпільовано в:
#square-1 {
background-color: red;
width: 50px;
height: 120px;
}
#square-2 {
background-color: red;
width: 100px;
height: 60px;
}
#square-3 {
background-color: red;
width: 150px;
height: 40px;
}
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
Буде скомпільовано в:
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.