A SASS a 2000-es évek második felében elindult kezdeményezés, amelynek célja az volt, hogy az elburjánzó CSS bejegyzéseket átláthatóbban és újrafelhasználhatóan lehessen írni.
A SASS-ban írt kódot egy CSS előfeldolgozó (CSS preprocesszor) fordítja le szabványos CSS fájlokká, amelyek aztán használhatók a weboldalakon.
A SASS-nak két szintaktikája van,
- Az első, a régebbi szintaktika elhagyta a CSS-ben megszokott {} jeleket és behúzásokkal operált. Az így készült fájlok csak a fordítás után használhatók és valójában nem kompatibilisek a CSS fájlokkal
- A második szintaktika (SCSS) meghagyta a CSS szintaktikát, vagyis egy CSS fájl kiterjesztését átnevezve érvényes SCSS fájlt kapunk.
SCSS használatának előnyei
Változók használata
$designszin: #F06D06;
.main-header{
color: $designszin;
}
.main-footer{
background-color: $designszin;
}Segítségével az SCSS fájlban egy helyen - általában a stíluslapok elején - definiálunk néhány tipikus, sok helyen használandó értéket és utána, mint változót használjuk a weblapokon. Ennek segítségével szinte biztosan nem lesznek az azonos árnyalatú színe, formák, méretek egy kicsit különbözőek és a weblap kinézete egységesebbé tud válni..
Beágyazás - átláthatóbb kód
A beágyazási tulajdonság segítségével átláthatóbb kódot tudunk készíteni. Az alábbi scss kódrészlet a később bemutatott CSS kódot készíti elő.
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
CSS szintaktika szerint ezt kapjuk
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}Mixinek használata
A mixineket felfoghatjuk függvényekként is. A mixin egy névvel rendelkezik és paramétert vár az SCSS kódban. A kód több helyén is felhasználható és az eredmény CSS fájlba a hívási helyeken bekerül a kódnak megfelelő CSS tartalom.
Az alábbi SCSS mixinnek megfelel a később bemutatott CSS kód. A mixin segítségével a H1 és H2 tageket árnyékolva jeleníthetjük meg. A kódban használt darken() kifejezés is egy mixin, amivel az eredeti színhez képest megadott arányú sötétebb színt lehet előállítani.
@mixin threedeetext($color) {
color: $color;
text-shadow:
0 2px 0 darken($color, 14%),
0 4px 0 darken($color, 16%),
0 6px 0 darken($color, 18%),
0 8px 0 darken($color, 20%),
3px 8px 15px rgba(0,0,0,0.1),
3px 8px 5px rgba(0,0,0,0.3);
}
h1 {
font-size: 120px;
@include threedeetext(#d4daa8);
}
h2 {
font-size: 90px;
@include threedeetext(lighten(#d4daa8, 10%));
}Ez a CSS kód jön létre:
h1 {
font-size: 120px;
color: #d4daa8;
text-shadow: 0 2px 0 #bbc576, 0 4px 0 #b8c26f, 0 6px 0 #b4bf68, 0 8px 0 #b1bc60, 3px 8px 15px rgba(0, 0, 0, 0.1), 3px 8px 5px rgba(0, 0, 0, 0.3);
}
h2 {
font-size: 90px;
color: #e6e9cc;
text-shadow: 0 2px 0 #cdd49a, 0 4px 0 #c9d193, 0 6px 0 #c6ce8b, 0 8px 0 #c2cb84, 3px 8px 15px rgba(0, 0, 0, 0.1), 3px 8px 5px rgba(0, 0, 0, 0.3);
}Néhány jól használható mixin színek keverésére
- saturate($color, @amount) - szaturációt állít
- desaturate($color, @amount) - A szaturációt csökkenti
- lighten($color, @amount) - világosítja a színt darken($color, @amount) - sötétíti a színt
- fadein($color, @amount) -
- fadeout($colorr, @amount) -
- fade(@color, @amount) - elhomályosít / kivilágosít
- spin($color, @amount) -
- mix($color, @color2, @weight) - Két színt keverünk össze
- grayscale($color) - Szürke változatot állít elő
- inverse($color) - A szín inverzét állítja elő
- complement($color) - a szín komplementerét állítja elő
- opacity($color, $amount) - A szín átlátszóságát állítja
- contrast($color) - Növeli a szín kontrasztját
További Compass mixinek itt találhatók: http://compass-style.org/index/mixins/
Elágazások, ciklusok használata
Az alábbi SCSS kód attól függően, hogy a $textcolornak milyen a világossága a háttérszínnek változó értékeket állít be. A lightness() itt is egy mixin.
$textColor: silver;
p {
color: $textColor;
@if lightness($textColor) < 50% {
background-color: white;
} @else {
background-color: black;
}
}Ez lesz a CSS megfelelője.
p {
color: silver;
background-color: black;
}Jelölők használata
#{változó} - szintaktika arra szolgál, hogy a változó helyére behelyettesített érték jelenjen meg a jelölő helyén a CSS fájlban. A következő példákban mutatok ilyen.
Ciklusok
A ciklusokat akkor tudjuk jól használni, ha a CSS kódban hasonló definíciókat kell többet létrehozni programozottan.
FOR ciklus
//SCSS kód
@for $i from 1 through 4 {
.column-#{$i} { width: 10px * $i; }
}
//Legenerált CSS kód
.column-1 {
width: 10px;
}
.column-2 {
width: 20px;
}
.column-3 {
width: 30px;
}
.column-4 {
width: 40px;
}EACH ciklus
A más nyelveken ismert foreach ciklus megvalósítása. Segítségével listák elemein tudunk végigmenni. ebben a pldában különböző fotókhoz rendelhetünk háttérképeket.
$list: jack john peter;
.photos {
@each $author in $list {
.photo-#{$author} {
background-image: image-url("avatars/#{$author}.png");
}
}
}
//A létrejött CSS kód
.photos .photo-jack {
background-image: url('/images/avatars/jack.png');
}
.photos .photo-john {
background-image: url('/images/avatars/john.png');
}
.photos .photo-peter {
background-image: url('/images/avatars/peter.png');
}While ciklus
A jól ismert és sokszor használt while ciklus. Ebben a példában kissé a FOR ciklushoz hasonló használatot mutatok be:
//SCSS kód
$column: 4;
@while $column > \0 {
.cols-#{$column} {
width: 10px * $column;
}
$column: $column - 1;
}
//CSS eredmény
.cols-4 {
width: 40px;
}
.cols-3 {
width: 30px;
}
.cols-2 {
width: 20px;
}
.cols-1 {
width: 10px;
}Az SCSS nyelvről itt lehet olvasni bővebben: https://sass-lang.com/documentation