Tworzenie przykładowego pliku w SASS

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.:

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

  li
    display: inline-block

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

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.

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

.box
  +border-radius(10px)

@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.

.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

.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://aurainweb.pl/wstep-sass-instalacja-podstawowe-komendy/

Aurelia Sypniewska

W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.