Google Remarketing
Baza wiedzy - wszystkie artykuły

Czym różni się LESS od SASS?

Używanie preprocesorów znacząco zmiejsza ilość czasu, którego developer potrzebuje do wprowadzania odpowiednich zmian. Skupmy się na porównaniu LESS i SASS. Oba języki korzystają z podobnych funkcjonalności jak zmienne, pętle, czy zagnieżdżania jednak korzystanie z nich trochę się różni. Sprawdźmy czym różnią się preprocesory SASS i LESS.


Obliczenia

LESS nie zwraca uwagi na jednostki dodawanych liczb za to SASS wyświetli błąd - niekompatybilne jednosteki.

HTML
// LESS
width: 100px + 2em; // zwraca 102px
// SASS
width: 100px + 2em; // zwraca błąd

 

Tworzenie zmiennych

HTML
// LESS
@variable: 100px;
// SASS
$variable: 100px;


Warunki

HTML
// LESS

@if lightness($color) > 30% {
    background-color: black;
}
@else {
    background-color: white;
}

// SASS

.mixin (@color) when (lightness(@color) > 30%) {
    background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
    background-color: white;
}


Mixins

Wywoływanie funkcji z parametrem zwracającym blok kodu. 

HTML
// LESS

.bordered (@width) {
    border: @width solid #ddd;
    &:hover {
        border-color: #999;
    }
}

h1 {
    .bordered(5px);
}
HTML
// SASS

@mixin bordered($width) {
    border: $width solid #ddd;
    &:hover {
        border-color: #999;
    }
}

h1 {
    @include bordered(5px);
}


Pętle

HTML
// LESS

.loop(@counter) when (@counter > 0){
    .loop((@counter - 1));
    .border-@{counter} {
        border: 1px * @counter solid blue;
    }
}

// SASS

@for $i from 1px to 3px {
    .border-#{i} {
        border: $i solid blue;
    }
}
Ciasteczka Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje.