autor: Robert
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
#buttons { .btn-blue { color: #ffffff; background: #3498db; padding: 10px 20px 10px 20px; text-decoration: none; &:hover { background: #3cb0fd; text-decoration: none; } } .btn-red { color: #ffffff; background: #e30c0c; padding: 10px 20px 10px 20px; text-decoration: none; &:hover { background: #e33d3d; text-decoration: none; } } .btn-green { color: #ffffff; background: #00ff09; padding: 10px 20px 10px 20px; text-decoration: none; &:hover { background: #75ff7e; text-decoration: none; } } } |
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:
1 2 3 4 5 6 7 8 9 10 11 |
#blueDiv a { #buttons > .btn-blue; } #redDiv a { #buttons > .btn-red; } #greenDiv a { #buttons > .btn-green; } |
A po skompilowaniu do CSS otrzymamy kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
#blueDiv a { color: #ffffff; background: #3498db; padding: 10px 20px 10px 20px; text-decoration: none; } #blueDiv a:hover { background: #3cb0fd; text-decoration: none; } #redDiv a { color: #ffffff; background: #e30c0c; padding: 10px 20px 10px 20px; text-decoration: none; } #redDiv a:hover { background: #e33d3d; text-decoration: none; } #greenDiv a { color: #ffffff; background: #00ff09; padding: 10px 20px 10px 20px; text-decoration: none; } #greenDiv a:hover { background: #75ff7e; text-decoration: none; } |
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.
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