Syntactically

Parengė: Martynas Kašelionis

From zero to hero

Awesome

Style

Sheets

CSS preprocesoriai

  • Kas yra  CSS preprocesorius
  • Kokia nauda jį naudoti
  • Kuris preprocesorius yra populiaresnis

CSS preprocesoriai

 

Preprocesorius - skriptų rašymo kalba, kuri išplečia CSS ir leidžia kompiliuoti kodą į standartinį CSS kodą.

Privalumai

  • Švaresnis kodas ir kodo pernaudojimo galimybe
  • Daugiau lankstumo dirbant su didesniais projektais
  • Viešai prieinamos kodo bibliotekos
  • Greitesnis kodo rašymas lyginant su standartiniu CSS

Statistika

SASS

 

Jeigu įdėtumėt CSS į raketą ir paleistumėt visu greičiu, tai būtų SASS.

    Hampton Catlin SASS kūrėjas

SASS

 

Visą dokumentaciją rasite:

https://sass-lang.com/documentation/file.SASS_REFERENCE.html​

SASS

 

  • CSS meta kalba
  • Paprastesnė, elegantiška sintaksė
  • Padeda sukurti ir valdyti logišką failų struktūrą projekte
  • Praplečia CSS galimybes

Sintaksė

Galima pasirinkti kodo rašymo sintaksę pagal skonį:

  • SASS
  • SCSS

Abi sintaksės funkciškai yra vienodos ir turi tokias pačias galimybes.

Sintaksė

SASS diegimas 

  • Norint naudoti SASS reikia įdiegti Ruby

      http://rubyinstaller.org/

  • Komandinėje eilutėje įvykdyti komandą:​
gem install sass

SASS kompiliatorius

SASS failo kompiliavimas į CSS:

  • sass failas.scss failas.css
  • sass input_aplankas output_aplankas

Jeigu norim vykdyti kompiliavimą, esant kodo pakeitimui:

  • sass --watch failas.scss:failas.css
  • sass --watch input_aplankas:output_aplankas

SASS naudojimas su GULP

Gulp - yra įrankis, kuris atlieka rutinines užduotis dirbant su WEB projektu.

  • paleidžia WEB serverį
  • perkrauna naršyklę, kai faile išsaugomi pakeitimai
  • naudojama su preprocesoriais(sass, less)
  • optimizuoja css, js, img

Plačiau:

https://css-tricks.com/gulp-for-beginners/

Informacija, kai pasileist SASS savo projekte su gulp:

http://ryanchristiani.com/getting-started-with-gulp-and-sass/

SASS pagrindai

  • Nesting (nežinau tinkamo vertimo:) )
  • Kintamieji
  • @import ir teisingos failų struktūros kūrimas
  • @extend
  • @media
  • @if
  • @for
  • @each
  • @mixin
  • @function

Nesting (CSS praplėtimas)

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

SASS

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

CSS (sukompiliuotas)

Nuoroda į tėvinį selektorių

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

SASS

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

CSS (sukompiliuotas)

Nuoroda į tėvinį selektorių

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

SASS

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

CSS (sukompiliuotas)

Susijusios ypatybės

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

SASS

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

CSS (sukompiliuotas)

Kintamieji

$width: 5em;

#main {
  width: $width;
}

SASS

#main {
  width: 5em;
}

CSS (sukompiliuotas)

Duomenų tipai

Sass palaikomi duomenų tipai:

  • skaičiai (e.g. 1.2, 13, 10px)
  • eilutės su kabutėmis ir be jų ("foo", 'bar', baz)
  • spalvos (blue, #04a3f9, rgba(255, 0, 0, 0.5))
  • booleans (true, false)
  • nulls (null)
  • sarašai atskirti kabutėmis arba tarpais (1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
  • maps(pvz.: (key1: value1, key2: value2))
  • nuorodos į funkcijas

​

Veiksmai

Aritmetiniai veiksmai:

  • sudėtis, atimtis, daugyba, dalyba, dalyba moduliu
  • palyginimas (<, >, <=, >=)

​

Veiksmai

p {
  font: 10px/8px; // Plain CSS
  $width: 1000px;
  width: $width/2;      
  width: round(1.5)/2;        
  height: (500px/2);         
  margin-left: 5px + 8px/2px; 
  font: (italic bold 10px/8px);
}

SASS

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

CSS (sukompiliuotas)

@import

Skirta importuoti sass arba scss failus. 

Jeigu importuojamas, failas nėra paminėtų tipų, bus pridėta eilutė sukompiliuotam faile.

Importuoti failai, bus sujungti su pagrindiniame faile esančiu kodu.

SASS failai, turi būti organizuoti logiškai, kad dirbant su projektu darbas būtų greitas.

Importuojami failai turi prasidėti ženklu (_), jeigu minėto ženklo nebus, SASS sukompiliuos papildomą CSS failą.

@import

#main {
  @import "example"; 
  //bus importuotas _example.scss
}

SASS

#main .example {
  color: red;
}

CSS (sukompiliuotas)

@media

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

SASS

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

CSS (sukompiliuotas)

Patogesnis naudojimas

@extend

Naudojama, kai turime CSS kodą (komponentą) ir jį norime praplėsti pridedant naujas savybes, konkrečiam taikymui.

 

<div class="error seriousError">
  Oh no! You've been hacked!
</div>
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

@extend

@extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

SASS

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

CSS (sukompiliuotas)

@extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

SASS

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

CSS (sukompiliuotas)

@extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

SASS

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

CSS (sukompiliuotas)

@if

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

SASS

p {
  border: 1px solid; }

CSS (sukompiliuotas)

Sąlygos sakiniai SASS naudojami taisyklių pridėjimui.

@if

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

SASS

p {
  color: green; }

CSS (sukompiliuotas)

@for

Naudojama, tasyklių generavimui, kai svarbus kodu kartojimas.

Nurodomas iteracijų skaičius nuo iki.

@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

SASS

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

CSS (sukompiliuotas)

@each

@each $animal in puma, sea-slug,
 egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

SASS

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

CSS (sukompiliuotas)

@each naudojama forma: $kintamasis in <sąrašas arba map>

@each

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

SASS

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

CSS (sukompiliuotas)

@mixin

@mixin leidžiau sukurti stiliaus taisyklės, kurios gali būti pernaudojamos kodo bloko viduje. @mixin gali būti su argumentais arba be jų.

@mixin

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

SASS

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

CSS (sukompiliuotas)

@mixin

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1px); }

SASS

p {
  border-color: blue;
  border-width: 1px;
  border-style: dashed; }

CSS (sukompiliuotas)

Funkcijos

SASS galima naudoti funkcijas su @function

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

SASS

#sidebar {
  width: 240px; }

CSS (sukompiliuotas)

SASS

By Martynas Kašelionis

Made with Slides.com

SASS

  • 805

More from Martynas Kašelionis