LESS tutorial logo

Przestrzenie nazw i akcesory

autor: Robert

6 lutego 2015

Wyobraźmy sobie, że nasza strona WWW jest podzielona na 4 części. W każdej części mamy inne tło, inny wygląd paragrafów, inny przycisk i inny obrazek. Albo stworzyliśmy sobie 4 różne buttony. Fajnie by było sobie to jakoś pogrupować, nieprawdaż?
Przestrzenie nazw w LESSie służą do grupowania sobie domieszek w celu lepszej organizacji swojego kodu.

Stworzymy sobie grupę o nazwie #buttons i będzie ona, jak wskazuje nazwa, przyciski. Wygląda ona następująco:

Jak widzicie, wewnątrz znajdują się 3 domieszki, które mają za zadanie stworzyć niebieski, czerwony i zielony button.

Teraz odwołamy się do naszej przestrzeni nazw by wyciągnąć z niej potrzebne nam domieszki. Odwołujemy się za pomocą zapisu #nazwa-przestrzeni > .nazwa-domieszki. Więc w naszym pliku LESS umieścimy zapis:

A po skompilowaniu do CSS otrzymamy kod:

Jak widzicie, podczas kompilacji została wybrana odpowiednia domieszka z utworzonej przez nas przestrzeni nazw a wszystkie przyciski mamy ładnie pogrupowane.

Nawiązując do przykładu z podziałem strony na 4 części. Powiedzmy, że chcemy zmienić kolor tekstu, nie musimy wtedy tworzyć 4 klas o różnych nazwach a jedynie wewnątrz każdej przestrzeni nazw np div1 stworzyć domieszkę .paragraph-color.
Wyobraźcie sobie gdybyście chcieli ostylować 50 paragrafów i musieli byście wymyślić 50 nazw klas dla nich:)

Co ważne, domieszki zamknięte wewnątrz przestrzeni nazw mają zasięg lokalny. Oznacza to, że jeśli chcieli byśmy użyć domieszki .btn-blue bez odwoływania się do przestrzeni nazw, nie uda się nam to a kompilator zwróci błąd.


Dawid 7 kwietnia 2015 o 17:45

A jeśli ktoś zrobiłby:

Nie „kłóciłoby” to się z przestrzenią nazw?

Odpowiedz
Robert 8 kwietnia 2015 o 07:06

Domieszki zamknięte wewnątrz przestrzeni nazw mają zasięg lokalny. Oznacza to, że jeśli chcieli byśmy użyć domieszki .btn-blue bez odwoływania się do przestrzeni nazw, nie uda się nam to a kompilator zwróci błąd. Także nie kłóci się to:)

Odpowiedz
    Mateusz 22 maja 2015 o 21:01

    Nie jestem pewien, ale wydaje mi się, że koledze chodziło o to, czy kompilator będzie wiedział, że chodzi nam o przestrzeń nazwa „buttons” i domieszkę „.btn-blue”, a nie o np. ID i klasę, tak jak w jego przykładzie.

    BTW, świetny tutorial, dzięki za włożoną pracę ;)

    Odpowiedz