Azərbaycanca
Беларускі
Dansk
Deutsch
Española
Français
Indonesia
Italiana
日本語
Қазақ
Lietuvos
Nederlands
Português
Русский
සිංහල
แบบไทย
Türkçe
Українська
中國人
United State
Afrikaans
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 (оригінальний) — відрізняється відсутністю фігурних дужок, в ньому вкладені елементи реалізовані за допомогою відступів, а правила відокремлюються переведенням рядка;
- scss (новий) — використовує фігурні дужки (подібно до CSS).
Файли sass-синтаксису мають розширення .sass, scss-синтаксису — .scss.
Sass розширює CSS, надаючи кілька механізмів, доступних в більш традиційних мовах програмування, зокрема об'єктно-орієнтованих мовах, але недоступних для CSS. Інтерпретатор Sass транслює SassScript у блоки правил CSS. По суті, Sass — це синтаксичний цукор для CSS.
Змінні
Sass дозволяє визначати змінні. Змінні починаються зі знака долара ($). Присвоєння значень змінних здійснюється за допомогою двокрапки (:).
SassScript підтримує чотири типи даних:
- число
- рядок (з лапками чи без)
- логічний (булевий) тип
- колір (ім'я або імена)
Змінна може бути аргументом чи результатом однієї чи кількох функцій. Під час трансляції значення змінних вставляються у вихідний (тобто результуючий) документ 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; } Аргументи
Домішки також підтримують аргументи.
@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; } Див. також
Примітки
- . Архів оригіналу за 11 січня 2014. Процитовано 12 січня 2014.
- Media Mark (3.2.12). . Sass-lang.com. Архів оригіналу за 18 лютого 2020. Процитовано 27 березня 2014.
Посилання
- Офіційний сайт Sass [ 18 лютого 2020 у Wayback Machine.](англ.)
- Репозиторій вихідного коду (Git) [ 7 січня 2014 у Wayback Machine.](англ.)
- Порівняння коду з Sass/SCSS та LESS(англ.)
- A Survey on CSS Preprocessors. Ricardo Queirós [ 21 березня 2018 у Wayback Machine.], 2017(англ.)
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
Sass angl Syntactically Awesome Stylesheets skriptova metamova yaka interpretuyetsya v kaskadni tablici stiliv CSS Sproektovana ta rozroblena Sass priznachenij dlya pidvishennya rivnya abstrakciyi kodu ta sproshennya fajliv CSS SassData poyavi2007TvorciRozrobnik Ostannij reliz3 4 23 19 grudnya 2016 7 rokiv tomu 2016 12 19 Sistema tipizaciyiDinamichnaPid vplivom vidCSS Haml YAMLVplinula naLESS Stylus TritiumOperacijna sistemaKros platformnaLicenziyaMITZvichajni rozshirennya fajliv sass scssVebsajtsass lang com Mova Sass maye dva sintaksisi sass originalnij vidriznyayetsya vidsutnistyu figurnih duzhok v nomu vkladeni elementi realizovani za dopomogoyu vidstupiv a pravila vidokremlyuyutsya perevedennyam ryadka scss novij vikoristovuye figurni duzhki podibno do CSS Fajli sass sintaksisu mayut rozshirennya sass scss sintaksisu scss Sass rozshiryuye CSS nadayuchi kilka mehanizmiv dostupnih v bilsh tradicijnih movah programuvannya zokrema ob yektno oriyentovanih movah ale nedostupnih dlya CSS Interpretator Sass translyuye SassScript u bloki pravil CSS Po suti Sass ce sintaksichnij cukor dlya CSS ZminniSass dozvolyaye viznachati zminni Zminni pochinayutsya zi znaka dolara Prisvoyennya znachen zminnih zdijsnyuyetsya za dopomogoyu dvokrapki SassScript pidtrimuye chotiri tipi danih chislo ryadok z lapkami chi bez logichnij bulevij tip kolir im ya abo imena Zminna mozhe buti argumentom chi rezultatom odniyeyi chi kilkoh funkcij Pid chas translyaciyi znachennya zminnih vstavlyayutsya u vihidnij tobto rezultuyuchij dokument CSS Sintaksis SCSS blue 3bbfce margin 16 px content navigation border color blue color darken blue 20 border padding margin 2 margin margin 2 border color blue Sintaksis SASS blue 3bbfce margin 16 px content navigation border color blue color darken blue 9 border padding margin 2 margin margin 2 border color blue Kompilyuyetsya u content navigation border color 3bbfce color 2b9eab border padding 8 px margin 8 px border color 3bbfce Vkladeni pravilaOdna z klyuchovih osoblivostej Sass vkladeni pravila yaki polegshuyut proces stvorennya i redaguvannya vkladenih selektoriv table hl margin 2 em 0 td ln text align right li font family serif weight bold size 1 3 em Bude skompilovano v table hl margin 2 em 0 table hl td ln text align right li font family serif font weight bold font size 1 3 em Domishki miksini Dlya uniknennya postijnih povtoren odnakovih pravil CSS v Sass vvedeni domishki Domishki ob yednuyut podibni pravila ta viklikayutsya v neobhidnih miscyah mixin table base th text align center font weight bold td th padding 2 px data include table base Bude skompilovano v data th text align center font weight bold data td data th padding 2 px Argumenti Domishki takozh pidtrimuyut argumenti mixin left dist float left margin left dist data include left 10 px Bude skompilovano v data float left margin left 10 px V poyednanni mixin table base th text align center font weight bold td th padding 2 px mixin left dist float left margin left dist data include left 10 px include table base Bude skompilovano v data float left margin left 10 px data th text align center font weight bold data td data th padding 2 px CikliSass dozvolyaye perebir zminnih za dopomogoyu for each ta while yaki mozhut buti vikoristani dlya zastosuvannya riznih stiliv do elementiv z odnakovimi identifikatorami abo klasami squareCount 3 for i from 1 through squareCount square i background color red width 50 px i height 120 px i Bude skompilovano v square 1 background color red width 50 px height 120 px square 2 background color red width 100 px height 60 px square 3 background color red width 150 px height 40 px Uspadkuvannya error border 1 px f00 background fdd error intrusion font size 1 3 em font weight bold badError extend error border width 3 px Bude skompilovano v error badError border 1 px f00 background fdd error intrusion badError intrusion font size 1 3 em font weight bold badError border width 3 px Div takozhLESS StylusPrimitki Arhiv originalu za 11 sichnya 2014 Procitovano 12 sichnya 2014 Media Mark 3 2 12 Sass lang com Arhiv originalu za 18 lyutogo 2020 Procitovano 27 bereznya 2014 PosilannyaOficijnij sajt Sass 18 lyutogo 2020 u Wayback Machine angl Repozitorij vihidnogo kodu Git 7 sichnya 2014 u Wayback Machine angl Porivnyannya kodu z Sass SCSS ta LESS angl A Survey on CSS Preprocessors Ricardo Queiros 21 bereznya 2018 u Wayback Machine 2017 angl