Co je SASS a jak jej používat?

Co je SASS?

SASS je zkratka pro "Syntactically Awesome Style Sheets". Jedná se o jeden z nejpoužívanějších CSS preprocesorů.

Nejpopulárnější CSS preprocesory jsou:

• SASS
• LESS
• Stylus
• PostCSS

Jaký je rozdíl mezi SASS a CSS?

SASS vznikl s cílem učinit psaní CSS dynamičtějším. Stručně řečeno přidává do CSS prvků programovacího jazyka. Obsahuje mnoho funkcí, které nejsou dostupné v CSS (definování proměnných, používání vnořených struktur, definování funkcí atd.).

Co bychom neměli dělat, abychom používali SASS?

Existuje více než jedna metoda použití. Jednou z nich jsou konvertory, které si můžete stáhnout a nainstalovat na svůj počítač.

Konvertory stručně převedou soubory s příponou .scss, které jsme napsali, do formátu .css, který prohlížeče dokážou pochopit.

Nejpopulárnější konvertory SASS na CSS jsou:

• Koala
• Scout-App
• SimpLess
• Sassmeister
• TheSassWay
• Compass
• Prepros

Další metodou je převést pomocí příkazové řádky.

Pokud používáte Node.js, můžete také nainstalovat Sass pomocí npm (Metoda 1)

Jeden z jazyků, na kterých je SASS postaven, je Node.js. Proto je nutné nejprve nainstalovat Node.js, aby mohl SASS běžet nad Node.js.

Pro instalaci Node.js si musíte stáhnout a nainstalovat verzi vhodnou pro váš systém z https://nodejs.org/en/download/.

npm install -g sass

Pokud používáte Ruby, můžete také nainstalovat Sass pomocí gemu. (Metoda 2)

Jedním z jazyků, na kterých je SASS postaven, je Ruby. Je tedy nutné nejprve nainstalovat Ruby, aby SASS mohlo běžet na Ruby.

Poté otevřeme příkazový řádek a zadáme následující příkaz.

gem install sass

Tak co znamená tento "ship"?

Gem je kus softwaru nebo aplikace, která poběží v Ruby. Stručně řečeno, můžeme ji nazvat pluginem.

Po napsání kódu může trvat 1-2 minuty, než se nahrávají příslušné soubory.

Můžete také nainstalovat Sass pro operační systém Mac OS X nebo Linux pomocí nástroje Brew (Metoda 3).

Pokud používáte správce balíčků Homebrew pro Mac OS X nebo Linux, můžete nainstalovat Dart Sass spuštěním následujícího příkazu.

brew install sass/sass/sass

Nyní můžeme spustit SASS. Vytvoříme soubor s příponou .scss ve složce SASS, uložíme jej po napsání kódu a spustíme následující příkaz:

sass –watch scss:css

Tento příkaz neustále sleduje složku sass a při jakékoli změně převede změněný soubor s příponou .scss do formátu .css.

Jak psát SASS a které funkce jsou nejčastěji používány?

1.  Proměnné

Umožňuje používání proměnných v CSS, což je jedna z nejužitečnějších funkcí.

SASS:

$general-font: "Helvetica, sans-herif";
$my-color: #a5a5a5;
p {
font-family: $general-font;
color: $my-color;
}

CSS Output:

p {
font-family: "Helvetica, sans-herif;
color: #a5a5a5;
}

Tímto způsobem můžeme použít proměnné, které jsme definovali kdekoli chceme. Malá změna na místě, kde definujeme proměnnou, může ovlivnit celý napsaný kód.

2. Vnořené struktury (Nesting)

Důležitá funkce, která zjednodušuje psaní a redukuje nepořádek v kódu.

SASS:

div {
.aciklama{
  color:blue;
  &:hover{
   color:red
  }
 }
 .resim{
  width: 100%;
 }   
}

CSS Output:

div .aciklama{
 color:blue;
}
div .aciklama:hover{
 color:red;
}
div .resim{
 width: 100%;
}  

Symbol & je struktura speciálně používaná v SASS pro selektory jako :hover, :after, :before. Ovlivňuje nadřazený prvek.

3. Import

Velmi užitečná funkce, která pomáhá eliminovat nepořádek a zmatek v kódu. Máme například 2 soubory s příponou .scss. Jeden z nich obsahuje proměnné, které definujeme obecně, a druhý obsahuje naše kódy SASS, které stále dáváme. S touto funkcí spojíme soubor _variable.scss, kde definujeme proměnné, souborem style.scss, který stále dáváme.

SASS

_variable.scss

$h1-font-size: 50px;
$h1-line-height: $font-weight-extralight;
$h1-color: #444444;
$h1-line-height: 60px;

style.scss

@import "variables";
h1{
font-size: $h1-font-size;
line-height: $h1-line-height;
font-weight: $h1-font-weight;
color: $h1-color;
}

CSS Output:

$h1-font-size: 50px; 
$h1-line-height: $font-weight-extralight; 
$h1-color: #444444; 
$h1-line-height: 60px;
h1{
font-size: $h1-font-size;
line-height: $h1-line-height;
font-weight: $h1-font-weight;
color: $h1-color;
}

4. Mixin

Struktura vrstvy nám umožňuje používat CSS kódy, které píšeme s týmiž parametry po celou dobu, definovat je jednou a všude volat jediný příkaz. Je to velmi podobné volání funkce, ale zde neprovádíme žádnou operaci.

SASS

@mixin overlay() {
left: 0;
 top: 0;
 background: black;
 opacity: 0.2;
}
.my-background{
 @include overlay();
}

CSS Output:

.my-background{
left: 0;
 top: 0;
 background: black;
 opacity: 0.2;
}

5. Dědičnost (Inheritance)

Vlastnost @extend se používá k seskupení prvků obsahujících společné CSS kódy.

SASS

.mesaj{
border: 1px solid gray;
 padding: 15px;
 color: black;
}
.basarili{
 @extend .mesaj;
 background: green;
}
.hata{
 @extend .mesaj;
 background: red;
}
.uyari{
 @extend .mesaj;
 background yellow;
}

CSS Output:

.mesaj, .basarili, .hata, .uyari{ 
 border: 1px solid gray;
 padding: 15px;
 color: black;
}
.basarili{
 background: green;
}
.hata{
 background: red;
}
.uyari{
 background yellow;
}

6. Operátory

Velmi užitečná funkce, která nám umožňuje provádět matematické operace v CSS. Na straně SASS můžete provádět matematické operace a tato operace je odeslána na stranu CSS jako finální.

SASS

.box{ 
 width: 1/3 * 100%;
 height: 30px * 2.5;
}

CSS Output:

.box{
width: 33.333333333%
height: 75px;
}