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:

LESS
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:

LESS
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:

CSS
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.

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
Kategorie
Kursy wideo LESS
Ekspresowe tworzenie stron z Bootstrap & LESS Produktywne tworzenie stron z LESS & SASS
Reklamy