[[oktatas:web:sass|< Sass]]

====== Sass kezdés ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A Sass =====


A **Sass** a **Syntactically Awesome Stylesheets** rövidítése,
ami egy **stíluskészítő script nyelv** és fordító,
vagy másként mondva **CSS előfeldolgozó**. 

A CSS előfeldolgozó CSS kódot fordít saját nyelvből.

Nagy méretű, vagy közepes webes projektekhez hasznos lehet.


A Sass webhelye:
  * https://sass-lang.com/

Egyéb CSS előfeldolgozó:
  * [[https://lesscss.org/|LESS]]
  * [[https://stylus-lang.com/|Stylus]]





A Sass **két szintaxissal** dolgozik:
  * behúzott szintaxis
  * SCSS (Sassy CSS) szintaxis

A behúzott szintaxis esetén a tagolást behúzásokkal végezzük.
Az SCSS használata esetén {} kapcsos-zárójeleket használunk
; pontosvesszős sorzárással.


^  Szintaxis  ^  Kiterjesztés  ^
| behúzott szintaxis | .sass |
| SCSS (Sassy CSS) szintaxis | .scss |

===== Telepítés =====

  npm install -g sass

Ellenőrzés:
  sass --version

===== Első Sass fájl =====

Kiterjesztés: .scss

<code sass app.scss>
$primary-color: #333;
$background: skyblue;

body {
    color: $primary-color;
    background-color: $primary-color;
}

</code>

===== Fordítás =====

Fordítás:
  sass app.scss app.css



===== Figyelés =====

<code>
sass --watch app.scss app.css
</code>

Az app.scss fájl mentésekor automatikusan megtörténik a fordítás.

<code>
sass --watch app/sass:public/stylesheets
</code>

===== Visual Studio Code =====

Bővítmény:
  * Live Sass Compiler

===== Gyakorlat =====

  * Készítsünk egy dobozt, amiben egy "Valami" szó szerepel.
  * Használjunk változókat a megadott értékekhez.
    * A doboz háttérszíne legyen királykék.
    * A szöveg színe a dobozban legyen fehér.
    * A dobozon belül legyen 15px-s belső margó.
    * A dobozban legyen a fontcsalád "sans-serif".

<code sass style.scss>
$bgcolor: navy;
$textcolor: white;
$textpadding: 15px;
$fontstack: sans-serif;

.doboz {
    background-color: $bgcolor;
    color: $textcolor;
    padding: $textpadding;
    font-family: $fontstack;
}

</code>