Ładowanie...

Preprocesory CSS - Wstęp

Każdy frontend'owiec na pewnym etapie swojej przygody z css, napotka pojęcie preprocesor. Ułatwiają one bardzo pracę nad styowaniem strony, a na pewno ją przyspieszają, co z kolei ma duży wpływ na wydajność. Oczywiście, aby zacząć korzystać z preprocesorów należy swobodie władać czystym css.

Preprocesory CSS - Wstęp

Przedstawienie

W tym wpisie postaram się jedtnie przedstawić zarys 2 najpopularniejszych preprocesorów, jakie są obecnie używane.

  1. SASS
    Preprocesory CSS - Wstęp

    Zaczniemy od najbardziej znanego - Sass. Wymaga on Ruby i prawdopodobnie jest najbardziej znamym preprocesorem CSS. To dobrze ugruntowany, 8-letni projekt open source, który jest dostępny w dwóch wersjach składniowych - scss (szęściej używana) i sass.

    Przykład kodu w składni scss:

    $serif-font-stack: "Georgia", "Times New Roman", serif;
    $monospace-font-stack: "Cousin", "Courier";
    
    body {
        font: normal 18px/22px $serif-font-stack;
    }
    
    pre, code {
        font: 600 bold 18px/22px $monospace-font-stack;
    }
    
    div {
        &.row {
            width: 100%;
            display: block;
        }
    }

    Jak poyższy kod będzie wyglądał po skompilowaniu do czystego css?

    body {
      font: normal 18px/22px "Georgia", "Times New Roman", serif;
    }
    
    pre, code {
      font: 600 bold 18px/22px "Cousin", "Courier";
    }
    
    div.row {
      width: 100%;
      display: block;
    }

    Proste, prawda?
  2. Less
    Preprocesory CSS - Wstęp

    Drugim z preprocesorów, jaki chcę przedstawić jest Less. Zasada jest bardzo podobna do Sass, jednak są pewne różnice. Podstawową jest brak wymogu Ruby, jednak kompilacja może odbywać się zarówno przez npm (Node.js), jak i po stronie klienta za pomocą javascript'u. Czas na przykład:

    @base: #f938ab;
    
    .box-shadow(@style, @c) when (iscolor(@c)) {
      -webkit-box-shadow: @style @c;
      box-shadow:         @style @c;
    }
    .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
      .box-shadow(@style, rgba(0, 0, 0, @alpha));
    }
    .box {
      color: saturate(@base, 5%);
      border-color: lighten(@base, 30%);
      div { .box-shadow(0 0 5px, 30%) }
    }

    Poyższy kod będzie wyglądał po skompilowaniu następująco:

    .box {
      color: #fe33ac;
      border-color: #fdcdea;
    }
    .box div {
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

Oba narzędzia postaram się opisać dokładniej w osobnych wpisach, aby móc pokazać ich możliwości.

Powiadomienie cookies

Strona lukaszbacik.pl zapisuje pliki cookies na komputerach odwiedzających ją internautów. Czytaj więcej.