AGNIESZKA LEŚKÓW

Sass (SCSS) preprocesorem CSS

KOMPENDIUM

Sass (SCSS) preprocesorem CSS

Spis treści
  1. Składnia w Sass
  2. Struktura plików Sass (.scss) w projekcie + @import
  3. Zasady stylu, składnia i formatowanie
    1. Selektor nadrzędny Sass ( & – ampersand )
    2. Selektor zastępczy Sass ( % – percent )
    3. Interpolacja #{$variable-name}
  4. Zmienne (z ang. Variables)
  5. Komentarze (z ang. Comments)
  6. Literały
  7. Domieszki (z ang. Mixins) definiuje @mixin → używa @include
  8. Rozbudowa (z ang. Extension) z użyciem @extend
  9. Struktury programistyczne: instrukcje warunkowe, funkcje (własne lub wbudowane)
    1. Instrukcje warunkowe w Sass @if(){ } @else if(){ } @else{ }
    2. Własne funkcje definiujemy przy użyciu @function.
    3. Wbudowane funkcje do pracy z kolorami: lighten(), darken(), mix()
  10. Instrukcja @media Media Queries dyrektywa CSS

Sass jest językiem skryptowym, który w procesie kompilacji zostaje przetłumaczony do kaskadowego arkusza stylów w skrócie CSS (z ang. Cascading Style Sheets).

Składnia w Sass

Składnię wyrażeń Sass nazywamy SassScript.

Sass obsługuje dwie składnie:

  1. Oryginalną składnie Sass z wcięciami w pliku z rozszerzeniem .sass.
  2. Składnie z nawiasami klamrowymi podobną do CSS umieszczaną w pliku z rozszerzeniem .scss.

Ułatwia pracę z arkuszami stylów w imię zasady DRY (z ang. Don’t Repeat Yourself) czyli ”nie powtarzaj się”. W tym celu pozwala na zagnieżdżanie poprzez zapisywanie jednej zewnętrznej reguły stylu wewnątrz drugiej, ograniczając w ten sposób czas pracy a także bezcelowe powtarzanie tych samych selektorów.

W Sass tak samo jak w CSS według reguł stylów deklarujemy właściwości selektorów, które definiują styl wybranych elementów, a wartością deklarowanej właściwości jest dowolne wyrażenie SassScript.

Struktura plików Sass (.scss) w projekcie + @import

Sass jest modułowy, dzięki tej własności możemy podzielić kod na niezależne części. Pozwala nam na wygodną pracę z kodem i zapobiega błądzeniu i długiemu przewijaniu jednego ciągnącego się w nieskończoność pliku wynikowego z rozszerzeniem .css. Z kolei hermetyzacja kodu stanowi porządek, zapobiega pomyłką, oraz niepotrzebnemu powielaniu czy nadpisywaniu kodu.

Przykładowa struktura:

  • scss
    • components
      • _form.scss
      • _images.scss
      • _buttons.scss
      • _card.scss
      • _pagination.scss
      • _breadcrumb.scss
      • _list.scss
    • parts
      • _header.scss
      • _nav.scss
      • _content.scss
      • _footer.scss
  • _mixins.scss
  • _functions.scss
  • _variables.scss
  • _base.scss
  • _reset.scss
  • _fonts.scss
  • style.scss

O łączeniu plików cząstkowych ( .scss ) w jeden wynikowy ( .css ) decyduje instrukcja @import zamieszczona w pliku głównym bez podkreślenia np. style.scss lub main.scss. Plik ten jako jedyny przechodzi kompilację. Pliki cząstkowe nie podlegają z osobna kompilacji czuwa nad tym znak podkreślenia, który informuje o tym kompilator.
Ważna jest również kolejność importowanych plików do pliku głównego ( style.scss ) , odbywa się to według reguł kaskadowości.

W powyższym przypadku najlepszym sposobem będzie zastosowanie kolejności:

@import 'reset’;
@import 'fonts’;
@import 'variables’;
@import 'base’;
@import 'mixins’;
@import ’functions’;
@import 'components/images’;
@import 'components/buttons’;
@import 'components/list’;
@import 'components/breadcrumb’;
@import 'components/pagination’;
@import 'components/card’;
@import 'components/form’;
@import 'parts/header’;
@import ’parts/nav’;
@import 'parts/content’;
@import ’parts/footer’;

Zasady stylu, składnia i formatowanie

Selektor nadrzędny Sass ( & – ampersand )

Poprzez selektor & odwołujemy się do selektora zewnętrznego, który m.in. świetnie współpracuje z klasami pisanymi według metodologii BEM.

Użycie (Sass)
.article {
    width: 100%;
    margin: 0 auto;
    background: blue;
    display: flex;
    &-first {   
        width: 50%;
        background: red;
        &__headline {
            color: white;
        }
        &__desc {
            color: gray;
        }
    }
}
Wynik kompilacji (CSS)
.article {
    width: 100%;
    margin: 0 auto;
    background: blue;
    display: flex; 
}
.article-first {
    width: 50%;
    background: red; 
}
.article-first__headline {
    color: white; 
}
.article-first__desc {
    color: gray; 
}

Selektor zastępczy Sass ( % – percent )

Tak zwana cicha klasa lub wirtualny byt, albo placeholder, to taka baza rozszerzeń, która nie jest kompilowana do pliku wynikowego CSS.

Selektor podobny do selektora klas, różnica polega na tym, że zamiast kropki ( . ) wpisujemy znak procentu ( % ). Natomiast wczytujemy, wywołujemy z pomocą @extend.

Działa podobnie jak zmienna, czy domieszka. Z punktu optymalizacji kodu ten sposób jest bardziej korzystniejszy, ale z kolei mniej czytelny.

Deklaracja zmiennej
%article-base {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
Użycie (Sass)
.article-main {
    padding: 5rem 2rem;
    background: blue;
    @extend %article-base;
}
.article-single {
    padding: 7rem 5rem;
    background: darkblue;
    @extend %article-base;
}
Wynik kompilacji (CSS)
.article-main, .article-single {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  align-items: center; 
}
.article-main {
  padding: 5rem 2rem;
  background: blue; 
}
.article-single {
  padding: 7rem 5rem;
  background: darkblue; 
}

Interpolacja #{$variable-name}

Sprawia, że zmienne można wykorzystywać w innych miejscach kodu, nie tylko podstawiać w miejscu wartości właściwości.

Wstrzykuje wartości wyrażeń podczas generowaniu nazwy.

Interpolacja zwraca ciąg bez cudzysłowów ( ” ” ).

Deklaracja zmiennej
.article-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
$class-vertical: 'vertical';
Użycie (Sass)
.article.#{$class-vertical} {
    @extend .article-base;
    flex-direction: column;
}
Wynik kompilacji (CSS)
.article-base, .article.vertical {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
}
.article.vertical {
  flex-direction: column; 
}

Zmienne (z ang. Variables)

Nazwę zmiennej definiujemy za pomocą dolara ( $ ) a także przy użyciu: liter, cyfr (wyjątek – nie rozpoczynamy od nich nazwy ale używamy w nazwie), znaków podkreślenia ( _ / __ ) lub myślnika ( – ).
$name-variable;
$name_variable;

Nazwa zmiennej powinna być semantyczna czyli zgodna z przeznaczeniem.

Deklaracja zmiennej powinna wyglądać następująco: $name-variable: value; / $name_variable: value;
$text-color: blue;
$bg_color: #FFFFFF ;
Można też tak:
$white: rgb(255, 255, 255);
$color-default: $white;

Ze zmiennych korzystamy wielokrotnie pracując na ich wartościach.

Dla łatwego dokonywania zmian w wartościach zmiennych najlepiej deklarować je globalnie w cząstkowym pliku _variables.scss. Ułatwia to pracę, gdyż wszystko jest zawarte w jednym pliku i nie trzeba szukać i zmieniać w całym arkuszu stylów CSS.

Zmienne muszą być wcześniej zadeklarowane i wczytywanym przed regułami aby móc z nich korzystać w tych regułach, w których używamy jako wartość właściwości.

W efekcie kompilacji w miejscu nazwy zmiennej otrzymujemy wartość tej zmiennej.

Do zmiennej możemy przypisać rożne typy wartości.

Deklaracja zmiennej
$type_bool_color: true;
$type_string_bg: blue;
$type_string_width: 1300px;
$type_number_columns: 12;
Użycie (Sass)
.box {
    @if $type_bool_color {
        width:  $type_string_width;
        background: $type_string_bg;
    } 
}
Wynik kompilacji (CSS)
.box {
    width: 1300px;
    background: blue;
}

Komentarze (z ang. Comments)

W Sass możemy korzystać z trzech typów komentarzy:

// Komentarz cichy, jednoliniowy, jednowierszowy, nie jest kompilowany i nie jest widoczny w pliku wynikowym.

/*
Komentarz głośny, blokowy, zwykły, wieloliniowy, wielowierszowy
widoczny po kompilacji w pliku z rozszerzeniem .css,
natomiast usuwany ze skompresowanego CSS.
*/

/*!
Komentarz głośny, blokowy, wieloliniowy, wielowierszowy
widoczny niezależnie od rodzaju pliku wyjściowego
najbardziej polecany typ komentarza.
*/

Literały

Łańcuch znaków (z ang. string) czyli wartość tekstowa, w wypadku Sass nie ma znaczenia czy tekst jest zawarty w „cudzysłowy” czy w 'apostrofy’ czy bez.

Deklaracja
$font-headline: Roboto Condensed, sans-serif;
Użycie (Sass)
h1 {
  font-family: $font-headline;
}
Wynik kompilacji (CSS)
font-family: Roboto Condensed, sans-serif;

Liczby (z ang. number) – mogą, ale nie muszą mieć jednostek. Dozwolone są operacje arytmetyczne w Sass. Działania są wykonywane zgodnie z kolejnością: nawiasy ( () ), mnożenie ( * ) lub dzielenie ( / ), dodawanie ( + ) lub odejmowanie ( – ) .

Deklaracja
$width-full: 50%;
Użycie (Sass)
article {
    width: 50% + $width-full;
}
Wynik kompilacji (CSS)
width: 100%;

Kolory (z ang. the colors) – tak samo jak na liczbach możemy na nich wykonywać operacje arytmetyczne.

Deklaracja
$color_base: $color_base_blue: blue;
Użycie (Sass)
.article {
    background: $color_base_blue + 7;
}
Wynik kompilacji (CSS)
background: #0707ff;
Deklaracja
$color_blue_dark_10: #000033;
Użycie (Sass)
.article {
   background: $color_blue_dark_10 / 2;
}
Wynik kompilacji (CSS)
background: #00001a;

Deklaracja
$color_blue_light_60: rgb(51, 51, 255);
Użycie (Sass)
.article {
    background: $color_blue_light_60 + 20;
}
Wynik kompilacji (CSS)
background: #4747ff;
czyli rgb(71, 71, 255);

Lista (z ang. list) – coś na wzór jako zbiór wartości tablicy/obiektu, oddzielonych spacją lub przecinkiem ( , ). Do elementu listy odnosimy się z pomocą wbudowanych funkcji Sass poprzez indeks listy liczony od 1.

Deklaracja
$shadow: 10px -10px blue;
Użycie (Sass)
.article-proba {
   box-shadow: $shadow;
}
Wynik kompilacji (CSS)
box-shadow: 10px -10px blue;

Mapa (z ang. map) – składa się ze zbioru par: klucza i wartości, podobne jak w tablicach asocjacyjnych / obiektach

Deklaracja
$fonts: (
    main: Roboto sans-serif,
    headline: Lato sans-serif,
    code: Encode Sans Expanded sans-serif,  
);
Użycie (Sass)
h1 {
 font-family: map-get($fonts, code);
}
Wynik kompilacji (CSS)
font-family: Encode Sans Expanded sans-serif;

Domieszki (z ang. Mixins) definiuje @mixin → używa @include

Dzięki domieszką kod w naszej wersji developerskiej jest zgodny z zasadą DRY (z ang. Don’t Repeat Yourself) a także czytelniejszy dla nas samych. Jest wielokrotnego użytku w całym arkuszu stylów przypisanego do identyfikatora – nazwy domieszki

Dzięki instrukcją: @mixin definiujemy domieszkę @mixin nazwa-domieszki{ } a dzięki @include możemy ja użyć @include nazwa-domieszki;

Składowymi domieszki mogą być: właściwości CSS, zmienne, reguły, inne domieszki, zagnieżdżenia oraz dodatkowe właściwości przekazywane za pomocą instrukcji @content; wewnątrz deklaracji domieszki.

Deklaracja domieszki
@mixin flexbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
Użycie (Sass)
.article {
    @include flexbox;
}
Wynik kompilacji (CSS)
.article {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
Deklaracja domieszki
@mixin position($type, $top, $right,$bottom,$left){
    position: $type;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}
@mixin flexbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
@mixin padding($vertical: 2rem, $horizontal: 4rem) {
    padding: $vertical $horizontal;
}
Użycie (Sass)
.article {
    @include flexbox;
     @include padding;
    &-headline {
        @include padding(3rem, 5rem);
    }
    &-btn {
        @include position(absolute, auto, auto, auto, auto);
    }
}
Wynik kompilacji (CSS)
.article {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2rem 4rem;
}
.article-headline {
    padding: 3rem 5rem;
}
.article-btn {
    position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}
Deklaracja domieszki
@mixin headline($size: 1rem){
    color: yellow;
    font-size: $size;
    @content;
}
Użycie (Sass)
.article {
    &-headline {
        @include headline(3rem){
            color: red;
            line-height: 5rem;
            letter-spacing: 0.2rem;
            text-transform: uppercase;
        }
    }
}
Wynik kompilacji (CSS)
.article-headline {
    font-size: 3rem;
    color: red;
    line-height: 5rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}

Rozbudowa (z ang. Extension) z użyciem @extend

Instrukcji @extend rozszerza każdą regułę o kolejne selektory, wskazuje co dopisać przy kompilacji. Wszystko odbywa się zgodnie z zasadą kaskadowości niezaleznie gdzie umieścimy Instrukcji @extend.

Deklaracja
.article {
    width: 50vw;
    height: 20vh;
    margin: 0 auto;
    background: blue;
    &__title {
        font-size: 5rem; 
    }
    &__desc {
        font-size: 3rem; 
    }
}
Użycie (Sass)
.article-main {
    width: 30vw;
    height: 10vh;
    margin: 0 auto;
    background: red;
    @extend .article;
}
Wynik kompilacji (CSS)
.article, .article-main {
  width: 50vw;
  height: 20vh;
  margin: 0 auto;
  background: blue; 
}
.article__title {
    font-size: 5rem; 
}
.article__desc {
    font-size: 3rem; 
}
.article-main {
  width: 30vw;
  height: 10vh;
  margin: 0 auto;
  background: red; 
}
Deklaracja
.headline {
    font-size: 2rem;
    line-height: 3rem;
}
Użycie (Sass)
.article {
    width: 30vw;
    height: 10vh;
    margin: 0 auto;
    background: blue;
    &-headline {
        @extend .headline;
    }
}
Wynik kompilacji (CSS)
.headline, .article-headline {
  font-size: 2rem;
  line-height: 3rem; 
}
.article {
  width: 30vw;
  height: 10vh;
  margin: 0 auto;
  background: blue; 
}
Deklaracja
.article1 {
    font-size: 1rem;
    color: red;
}
Użycie (Sass)
.article2 {
    @extend .article1;
    font-size: 2rem;
}
.article3 {
    @extend .article1;
    @extend .article2;
    font-size: 3rem;
    background: blue;
}
.article4 {
    @extend .article3;
    font-size: 4rem;
    color: red;
    background: yellow;
}
Wynik kompilacji (CSS)

.article1, .article2, .article3, .article4 {
  font-size: 1rem;
  color: red; 
}
.article2, .article3, .article4 {
  font-size: 2rem;
}
.article3, .article4 {
  font-size: 3rem;
  background: blue;
}

.article4 {
  font-size: 4rem;
  color: red;
  background: yellow; 
}

Struktury programistyczne: instrukcje warunkowe, funkcje (własne lub wbudowane)

Instrukcje warunkowe w Sass @if(){ } @else if(){ } @else{ }

Z instrukcji warunkowych korzystamy w domieszce, w funkcji. W procesie kompilacji za sprawą spełnionego lub nie warunku część kodu zostaje dopisana a część zostaje pominięta. W przypadku kiedy warunek jest true jest konwertowany na true, false na false a null na false.

Deklaracja
$width-default: 100%;
Użycie (Sass)
.article {
    width: $width-default;
     background: red;
    .article_first {    
        @if($width-default > 50%){
            background: blue;
        }
    }
    .article_second {
                @if($width-default < 70%){
            background: yellow;
        }
    }
}
Wynik kompilacji (CSS)
.article {
  width: 100%;
  background: red; 
}
  .article .article_first {
    background: blue; 
}
Deklaracja
$width-default: 100%;
Użycie (Sass)
.article {
    width: $width-default;
    background: red;
    .article_first {    
        @if($width-default > 50%){
            background: blue;
        }

    }
    .article_second {
        @if($width-default > 150%){
            background: yellow;
        }        
        @else {
            background: green;
        }

    }
}
Wynik kompilacji (CSS)
.article {
  width: 100%;
  background: red; 
}
.article .article_first {
    background: blue; 
}
.article .article_second {
    background: green; 
}
Deklaracja
$width-default: 100%;
$size-text: small;
Użycie (Sass)
.article {
    width: $width-default;
    background: red;
    .article_first {    
        @if($width-default > 50%){
            background: blue;
        }
    }
    .article_second {
        @if($width-default > 150%){
            background: yellow;
        } 
        @else if($size-text == small and $width-default != 50%) {
            background: black;
        }
        @else {
            background: green;
        }

    }
}
Wynik kompilacji (CSS)
.article {
  width: 100%;
  background: red; 
}
  .article .article_first {
    background: blue; 
}
  .article .article_second {
    background: black; 
}
Deklaracja
$width-default: 100%;
$size-text: small;

@mixin article-padding($top: null, $right: null, $bottom: null, $left: null){
    @if($top == $bottom and $right == $left){
        padding: $top $right;
    } 
    @else if($top == $right and $top == $left ) {
        padding: $top;
    }
    @else if($top != $bottom and $right != $left) {
        padding: $top $right $bottom $left;
    }
    @else {
        padding: $left;
    }
}

Użycie (Sass)
.article {
    width: $width-default;
    background: red;
    .article_first {    
        @if($width-default > 30%){
            background: blue;
            @include article-padding(1rem, 2rem, 3rem, 4rem);
        }
    }
    .article_second {
        @if($width-default > 150%){
            background: yellow;
        } 
        @else if($size-text == small and $width-default != 50%) {
            background: black;
            @include article-padding(5rem, 3rem, 5rem, 3rem);
        }
        @else {
            background: green;
        }

    }
    .article_third {    
        @if($width-default > 50%){
            background: coral;
            @include article-padding(10rem, 10rem, 0, 10rem);
        }
    }
}
Wynik kompilacji (CSS)
.article {
  width: 100%;
  background: red; 
}
.article .article_first {
    background: blue;
    padding: 1rem 2rem 3rem 4rem; 
}
.article .article_second {
    background: black;
    padding: 5rem 3rem; 
}
.article .article_third {
    background: coral;
    padding: 10rem; 
}

Własne funkcje definiujemy przy użyciu @function.

Deklaracja funkcji
$size-text: 2rem;
@function textSize() {
    @return $size-text;
}
@function textSizeLarge() {
    @return $size-text * 2.5;
}
Użycie (Sass)
.article {
    .article_first {    
        h2 {
            font-size: textSize();
        }
    }
    .article_second {
        h2 {
            font-size: textSizeLarge();
        }
    }
}
Wynik kompilacji (CSS)
.article .article_first h2 {
  font-size: 2rem; 
}
.article .article_second h2 {
  font-size: 5rem; 
}

Deklaracja funkcji
$size-text: 1rem;
@function textSize($param1: 2, $param2: 3) {
    @return $size-text*$param2;
}
Użycie (Sass)
.article {
    .article_first {    
        h2 {
            font-size: textSize();
        }
    }
}
Wynik kompilacji (CSS)
.article .article_first h2 {
  font-size: 3rem; 
}
Deklaracja funkci
$size-default: 1rem;
@function multiplierSize($multiplier: null, $size: $size-default) {
    @if(type-of($multiplier) == number and $multiplier > 0 and $multiplier != 0){
        @return $size * $multiplier;
    }
    @else if($multiplier == 0){
        @return 0;
    }
    @else {
        @return null;
    }
}
Użycie (Sass)
.article {
    .article_first {    
        h2 {
            font-size: multiplierSize($multiplier: 3);
        }
    }
    .article_second {
        h2 {
            font-size: multiplierSize($multiplier: 0);
        }
    }
        .article_third {
        h2 {
            font-size: multiplierSize($multiplier: null);
        }
    }
}
Wynik kompilacji (CSS)
.article .article_first h2 {
  font-size: 3rem; 
}
.article .article_second h2 {
  font-size: 0; 
}

Wbudowane funkcje do pracy z kolorami: lighten(), darken(), mix()

Deklaracja
$color-blue: rgb(0, 0, 255); //#0000ff
Użycie (Sass)
.article {
   background: darken($color-blue, 20%);
   &-desc{
        background: lighten($color-blue, 30%);
        & h2 {
            color: darken($color-blue, 10%);
        }
   }
}
Wynik kompilacji (CSS)
.article {
    background: #000099;
}
.article-desc {
    background: #9999ff;
}
.article-desc h2 {
      color: #0000cc; 
}
Deklaracja
$color-red: rgb(255, 0, 0);
$color-blue: rgb(0, 0, 255);
Użycie (Sass)
.article {
   background: mix($color-red, $color-blue);
   &-desc{
        background: mix($color-blue, #ffffff);
        & h2 {
            color: mix($color-blue, black);
        }
   }
}
Wynik kompilacji (CSS)
.article {
  background: purple; 
}
  .article-desc {
    background: #8080ff; 
}
    .article-desc h2 {
      color: navy; 
}
Deklaracja
$color-red: rgb(255, 0, 0);
$color-green: rgb(0, 255, 0);
$color-blue: rgb(0, 0, 255);
Użycie (Sass)
.article {
   background: mix($color-red, $color-green);
   &-desc{
        background: mix($color-blue, pink);
        & h2 {
            color: lighten(darken($color-green, 80%), 10%);
        }
   }
}
Wynik kompilacji (CSS)
.article {
  background: olive; 
}
  .article-desc {
    background: #8060e5; 
}
    .article-desc h2 {
      color: #003300; 
}

Instrukcja @media Media Queries dyrektywa CSS

Najpopularniejszymi sposobami na RWD (z ang. Responsive Web Design) są stosowane sposoby z zagnieżdżeniami lub znaczniej praktyczniejszy sposób z mapą, domieszką i z interpolacją. W celu uzyskania tej drugiej opcji w pierwszej kolejności należy zdefiniować mapę z przyporządkowanymi wartościami czyli przedziałami rozdzielczości. Następnie zdefiniować domieszki do zapytań o media.

Użycie (Sass) - I sposób
.article {
    width: 100%;
    margin: 0 auto;
    background: grey;
    display: flex;
    flex-wrap: wrap;
    &-first {   
        width: 25%;
        background: yellow;
        @media(min-width: 480px){
            width: 100%;
            background: red;
        }
    }
    &-second {
        width: 25%;
        background: blue;
        @media(min-width: 768px){
            width: 100%;
            background: green;
        }
    }
    &-third {
        width: 25%;
        background: green;
        @media(min-width: 1024px){
            width: 100%;
            background: blue;
        }
    }
    &-fourth {
        width: 25%;
        background: red;
        @media(min-width: 1200px){
            width: 100%;
            background: yellow;
        }
    }
}
Wynik kompilacji (CSS)
.article {
  width: 100%;
  margin: 0 auto;
  background: grey;
  display: flex;
  flex-wrap: wrap; 
}
 .article-first {
    width: 25%;
    background: yellow; 
}
@media (min-width: 480px) {
      .article-first {
        width: 100%;
        background: red; 
      } 
}
.article-second {
    width: 25%;
    background: blue; 
}
@media (min-width: 768px) {
      .article-second {
        width: 100%;
        background: green; 
       } 
}
.article-third {
    width: 25%;
    background: green; 
}
@media (min-width: 1024px) {
      .article-third {
        width: 100%;
        background: blue; 
      } 
}
.article-fourth {
    width: 25%;
    background: red; 
}
@media (min-width: 1200px) {
      .article-fourth {
        width: 100%;
        background: yellow; 
      } 
}
Deklaracja - II sposób
$media-queries: (
xs:  320px,
sm:  480px,
md:  768px,
lg:  1024px,
xl:  1200px,
xxl: 1400px
);
@mixin media($breakpoint) {
    $size: map-get($media-queries, $breakpoint);

    @if($size){
        @media screen and (min-width: #{$size}) {
            @content;
        }
    }
    @else {
        @error '"#{$breakpoint}" - BŁĄD';
    }
}
Użycie (Sass)
.article {
    width: 100%;
    margin: 0 auto;
    background: grey;
    display: flex;
    flex-wrap: wrap;
    &-first {   
        width: 25%;
        background: yellow;
        @include media(sm){
            width: 100%;
            background: red;
        }
    }
    &-second {
        width: 25%;
        background: blue;
        @include media(md){
            width: 100%;
            background: green;
        }
    }
    &-third {
        width: 25%;
        background: green;
        @include media(lg){
            width: 100%;
            background: blue;
        }
    }
    &-fourth {
        width: 25%;
        background: red;
        @include media(xl){
            width: 100%;
            background: yellow;
        }
    }
}
Wynik kompilacji (CSS)
.article {
    width: 100%;
    margin: 0 auto;
    background: grey;
    display: flex;
    flex-wrap: wrap; 
}
.article-first {
    width: 25%;
    background: yellow; 
}
@media screen and (min-width: 480px) {
    .article-first {
        width: 100%;
        background: red; 
    } 
}
.article-second {
    width: 25%;
    background: blue; 
}
@media screen and (min-width: 768px) {
    .article-second {
        width: 100%;
        background: green; 
    } 
}
.article-third {
    width: 25%;
    background: green; 
}
@media screen and (min-width: 1024px) {
    .article-third {
        width: 100%;
        background: blue; 
    } 
}
.article-fourth {
    width: 25%;
    background: red; }
@media screen and (min-width: 1200px) {
    .article-fourth {
        width: 100%;
        background: yellow; 
    } 
}

Więcej wiedzy można uzyskać bezpośrednio ze strony sass-lang.com

←Wróć do Kompendium