Tworzenie przykładowego pliku w SASS

Czas czytania: 2 minut

Niestety przeglądarki internetowe nie są w stanie samodzielnie odczytać pliku typu SASS, aby to zinterpretować trzeba wygenerować na jego bazie plik CSS.

Proces ten można wykonać na kilka sposobów np. za pomocą generatora wbudowanego w edytor kodu lub za pomocą „Wiersza poleceń” – jeśli posiadamy zainstalowaną bibliotekę Ruby.

Wiersz poleceń

W drugim przypadku po uruchomieniu „Wiersza poleceń” ustawić ścieżkę na katalog z plikiem SASS. Następnie użyć kodu:

sass input.scss output.css

 

gdzie:

• input.scss – plik wejściowy
• output.css – plik wyjściowy

Dla łatwiejszej pracy lepiej by oba pliki miały taką samą nazwę – różniły się jedynie końcówką.

Ciekawe rozwiązania w SASS

Jeną z zalet SASS jest możliwość tworzenia własnych zmiennych do, których możemy przypisywać właściwości.

Zmienną wystarczy zadeklarować raz a następnie trzeba je jedynie wywołać np.:

SASS

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

Ten sam zapis w standardowym CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

 

Przekazywanie wartości – Wstawki

W SASS możemy raz zadeklarować daną wartość lub ich zbiór a następnie wywołać / wykorzystać je kilkakrotnie w innym miejscu. W ten sposób nie musimy kilkakrotnie pisać tego samego kodu wystarczy odwołać się do odpowiedniej zmiennej np.

SASS

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

 

SCSS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

 

W tradycyjnym CSS kod wygląda w tak:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

 

Rozszerzenia i dziedziczenie

Zasada jest podobna jak powyżej różnica polega na tym, że dziedziczymy cechy innej klasy. Posiadamy więc już konkretne parametry np.

SASS

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333


.success
  @extend .message
  border-color: green


.error
  @extend .message
  border-color: red


.warning
  @extend .message
  border-color: yellow

SCSS

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

 

W tradycyjnym CSS zoptymalizowany kody wyglądał by tak:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Jak widać na powyższych przykładach korzystając z SASS możemy zoptymalizować nasze arkusze CSS. Przy małych wycinkach kodu co prawda nie jest to konieczne jednak kiedy tworzymy stronę internetową oszczędzi nam to całkiem sporo czasu.

Źródło: http://sass-lang.com/guide

https://www.aurainweb.pl/2016/08/wstep-sass-instalacja-podstawowe-komendy/