Sass: відмінності між версіями

 

Синтаксис SCSS:

$blue: #3bbfce;

$margin: 16px;

border-color: $blue;

}

 

Синтаксис SASS:

$blue: #3bbfce

$margin: 16px

margin: $margin/2

border-color: $blue

Компілюється у:

.content-navigation {

border-color: #3bbfce;

border-color: #3bbfce;

}

 

== Вкладені правила ==

Одна з ключових особливостей Sass — вкладені правила, які полегшують процес створення і редагування вкладених селекторів.

 

table.hl {

margin: 2em 0;

}

}

Буде скомпільовано в:

table.hl {

margin: 2em 0;

font-size: 1.3em;

}

 

== Домішки (міксини) ==

Для уникнення постійних повторень однакових правил CSS, в Sass введені домішки. Домішки об'єднують подібні правила та викликаються в необхідних місцях.

@mixin table-base {

th {

@include table-base;

}

Буде скомпільовано в:

#data th {

text-align: center;

padding: 2px;

}

 

=== Аргументи ===

Домішки також підтримують аргументи.<ref name="main">{{cite web|author=Media Mark (3.2.12) |url=http://sass-lang.com/ |title=Sass - Syntactically Awesome Stylesheets |publisher=Sass-lang.com |date= |accessdate=2014-03-27}}</ref>

@mixin left($dist) {

float: left;

@include left(10px);

}

Буде скомпільовано в:

#data {

float: left;

margin-left: 10px;

}

 

=== В поєднанні ===

@mixin table-base {

th {

@include table-base;

}

Буде скомпільовано в:

#data {

float: left;

padding: 2px;

}

 

== Цикли ==

Sass дозволяє перебір змінних за допомогою <code>@for</code>, <code>@each</code> та <code>@while</code>, які можуть бути використані для застосування різних стилів до елементів з однаковими ідентифікаторами або класами.

 

$squareCount: 3;

@for $i from 1 through $squareCount {

}

}

Буде скомпільовано в:

#square-1 {

background-color: red;

height: 40px;

}

 

== Успадкування ==

 

.error {

border: 1px #f00;

border-width: 3px;

}

Буде скомпільовано в:

.error, .badError {

border: 1px #f00;

border-width: 3px;

}

 

== Див. також ==