Podstawy SASS

Articles

Podstawy SASS

Ten artykuł wyjaśnia podstawy SASS.

Wyjaśnimy podstawowe funkcje SASS krok po kroku i pokażemy, jak z nich korzystać na praktycznych przykładach kodu.

YouTube Video

Podstawy SASS

SASS (Syntactically Awesome Stylesheets) to język arkuszy stylów, który rozszerza możliwości CSS. Korzystając z SASS, możesz wykorzystać zaawansowane funkcje niedostępne w CSS, takie jak zmienne, zagnieżdżanie, mixiny i dziedziczenie. To znacznie ułatwia zarządzanie i ponowne wykorzystanie arkuszy stylów.

Czym jest SASS?

SASS to język, który upraszcza pisanie CSS, umożliwiając jednocześnie bardziej elastyczne i zaawansowane stylowanie. SASS oferuje również składnię SCSS (Sassy CSS), która jest podobna do standardowej składni CSS. Oto przykład:.

Przykład SCSS

1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5    font-family: $base-font;
6    background-color: $bg-color;
7}

Przykład CSS

1body {
2    font-family: Arial, sans-serif;
3    background-color: #f4f4f4;
4}

Konfigurowanie SASS

Jak zainstalować

Aby korzystać z SASS, najpierw zainstaluj Node.js, a następnie zainstaluj SASS przy użyciu poniższego polecenia:.

1npm install -g sass

Jak kompilować

Aby skompilować pliki SASS (.scss lub .sass) do CSS, użyj następującego polecenia:.

1sass input.scss output.css

Możesz także użyć opcji watch, aby monitorować zmiany plików i wykonywać kompilację w czasie rzeczywistym.

Zmienne

SASS pozwala na używanie zmiennych do ponownego wykorzystania wartości, takich jak kolory czy rozmiary czcionek.

Przykładowy Kod

1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5    color: $primary-color;
6    font-family: $font-stack;
7}

Ten kod wykorzystuje zmienne SASS do definiowania kolorów i czcionek oraz ponownie używa ich w selektorze body, aby zwiększyć spójność i łatwość utrzymania.

Wynik kompilacji

1body {
2    color: #3498db;
3    font-family: 'Roboto', sans-serif;
4}

Zagnieżdżanie

SASS poprawia czytelność kodu, umożliwiając zagnieżdżanie selektorów CSS.

Przykładowy Kod

 1nav {
 2    ul {
 3        list-style: none;
 4        margin: 0;
 5        padding: 0;
 6
 7        li {
 8            display: inline-block;
 9
10            a {
11                text-decoration: none;
12                color: #333;
13
14                &:hover {
15                    color: #3498db;
16                }
17            }
18        }
19    }
20}

Ten kod wykorzystuje zagnieżdżoną hierarchię, aby wizualnie wyjaśnić strukturę stylów.

Wynik kompilacji

 1nav ul {
 2    list-style: none;
 3    margin: 0;
 4    padding: 0;
 5}
 6
 7nav ul li {
 8    display: inline-block;
 9}
10
11nav ul li a {
12    text-decoration: none;
13    color: #333;
14}
15
16nav ul li a:hover {
17    color: #3498db;
18}

Mixiny

Mixiny pozwalają na ponowne wykorzystanie kodu w różnych selektorach.

Przykładowy Kod

 1@mixin border-radius($radius) {
 2    border-radius: $radius;
 3    -webkit-border-radius: $radius;
 4    -moz-border-radius: $radius;
 5}
 6
 7button {
 8    @include border-radius(10px);
 9}
10
11.card {
12    @include border-radius(5px);
13}

Ten kod definiuje styl border-radius przy użyciu @mixin i ponownie używa go w button i .card za pomocą @include, co umożliwia efektywne stylizowanie bez duplikacji.

Wynik kompilacji

 1button {
 2    border-radius: 10px;
 3    -webkit-border-radius: 10px;
 4    -moz-border-radius: 10px;
 5}
 6
 7.card {
 8    border-radius: 5px;
 9    -webkit-border-radius: 5px;
10    -moz-border-radius: 5px;
11}

Dziedziczenie (@extend)

Dziedziczenie pozwala na stosowanie istniejących stylów do innych selektorów.

Przykładowy Kod

 1%button-style {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    @extend %button-style;
 9    border: none;
10}
11
12.link-button {
13    @extend %button-style;
14    text-decoration: none;
15}

Ten kod definiuje selektor zastępczy %button-style i używa @extend, aby zastosować wspólne style zarówno do button, jak i .link-button, promując ponowne wykorzystanie i spójność.

Wynik kompilacji

 1button, .link-button {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    border: none;
 9}
10
11.link-button {
12    text-decoration: none;
13}

Instrukcje warunkowe i pętle

SASS obsługuje instrukcje warunkowe i pętle do dynamicznego generowania stylów.

Przykład instrukcji warunkowej

1$theme: dark;
2
3body {
4    background-color: if($theme == light, #fff, #333);
5    color: if($theme == light, #333, #fff);
6}

Ten kod wykorzystuje funkcję if SASS do zmiany kolorów tła i tekstu w zależności od wartości $theme, umożliwiając dynamiczne generowanie stylów za pomocą warunków.

Przykład pętli

1@for $i from 1 through 3 {
2    .column-#{$i} {
3        width: calc(100% / $i);
4    }
5}

Ten kod wykorzystuje pętlę @for SASS do dynamicznego generowania klas od .column-1 do .column-3.

Wynik kompilacji

 1body {
 2    background-color: #333;
 3    color: #fff;
 4}
 5
 6.column-1 {
 7    width: 100%;
 8}
 9
10.column-2 {
11    width: 50%;
12}
13
14.column-3 {
15    width: 33.3333%;
16}

Podział i importowanie plików

SASS pozwala dzielić pliki i ponownie je wykorzystywać za pomocą @use lub @import.

Struktura plików

styles/
  _variables.scss
  _mixins.scss
  main.scss

_variables.scss

1$primary-color: #3498db;

_mixins.scss

1@mixin flex-center {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}

main.scss

1@use 'variables';
2@use 'mixins';
3
4header {
5    background-color: variables.$primary-color;
6    @include mixins.flex-center;
7}

Wynik kompilacji

1header {
2  background-color: #3498db;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Podsumowanie

Korzystanie z SASS usprawnia pisanie CSS oraz zwiększa ponowne wykorzystanie i łatwość utrzymania kodu.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.