| Sass | |
|---|---|
 | |
| Дата появи | 2007 |
| Творці | Гемптон Кетлін |
| Розробник | Наталі Вейзенбаум,Кріс Епштейн |
| Останній реліз | 3.4.23 (19 грудня2016; 9 років тому (2016-12-19)) |
| Система типізації | Динамічна |
| Під впливом від | CSS,Haml,YAML |
| Вплинула на | LESS,Stylus, Tritium |
| Операційна система | Крос-платформна |
| Ліцензія | MIT |
| Звичайні розширення файлів | .sass, .scss |
| Вебсайт | sass-lang.com |
Sass (англ.Syntactically Awesome Stylesheets) — скриптоваметамова, яка інтерпретується вкаскадні таблиці стилів (CSS). СпроектованаГемптоном Кетліном та розробленаНаталі Вейзенбаум. Sass призначений для підвищення рівня абстракції коду та спрощення файлів CSS.
Мова 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-navigationborder-color:$bluecolor:darken($blue,9%).borderpadding:$margin/2margin:$margin/2border-color:$blue
Компілюється у:
.content-navigation{border-color:#3bbfce;color:#2b9eab;}.border{padding:8px;margin:8px;border-color:#3bbfce;}
Одна з ключових особливостей Sass — вкладені правила, які полегшують процес створення і редагування вкладених селекторів.
table.hl{margin:2em0;td.ln{text-align:right;}}li{font:{family:serif;weight:bold;size:1.3em;}}
Буде скомпільовано в:
table.hl{margin:2em0;}table.hltd.ln{text-align:right;}li{font-family:serif;font-weight:bold;font-size:1.3em;}
Для уникнення постійних повторень однакових правил CSS, в Sass введені домішки. Домішки об'єднують подібні правила та викликаються в необхідних місцях.
@mixintable-base{th{text-align:center;font-weight:bold;}td,th{padding:2px}}#data{@includetable-base;}
Буде скомпільовано в:
#datath{text-align:center;font-weight:bold;}#datatd,#datath{padding:2px;}
Домішки також підтримують аргументи.[2]
@mixinleft($dist){float:left;margin-left:$dist;}#data{@includeleft(10px);}
Буде скомпільовано в:
#data{float:left;margin-left:10px;}
@mixintable-base{th{text-align:center;font-weight:bold;}td,th{padding:2px}}@mixinleft($dist){float:left;margin-left:$dist;}#data{@includeleft(10px);@includetable-base;}
Буде скомпільовано в:
#data{float:left;margin-left:10px;}#datath{text-align:center;font-weight:bold;}#datatd,#datath{padding:2px;}
Sass дозволяє перебір змінних за допомогою@for,@each та@while, які можуть бути використані для застосування різних стилів до елементів з однаковими ідентифікаторами або класами.
$squareCount:3;@for$ifrom1through$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;}