Jedna z rzeczy, które CSS Nie ma domyślnie użycia struktur w stylu programowania, w których możemy ponownie wykorzystać kod w logiczny sposób, najlepsze, co możemy osiągnąć w standardowy sposób, to tworzenie klas i grupowanie w etykietach tego, na co chcemy wpływać te zmiany.
Takie podejście oznacza, że pod koniec dnia mamy do czynienia z długimi arkuszami stylów i chociaż ten wynik nie będzie się różnił przy użyciu Less.js, jeśli zmieni się sposób w jaki dostaniemy się do wspomnianych liści, to dzięki Mieszanki i dziedziczenia, gdzie możemy zadeklarować i użyć niektórych komponentów, aby uniknąć konieczności ręcznego rozwijania struktur.
Wymagania1- Aby wykonać ten samouczek, będziemy wymagać pewnych rzeczy wcześniej, musimy mieć folder, w którym możemy przechowywać nasze pliki .mniej Tak .css, musimy mieć do niego uprawnienia, aby w razie potrzeby móc wprowadzać zmiany.
2- Musimy mieć sprawną instalację Less.js, a także wszystkie jego warunki wstępne, takie jak są Node.js Tak npm, dzięki czemu możemy skompilować nasze wygenerowane arkusze stylów.
3- Wreszcie będziemy potrzebować edytora tekstu, aby móc stworzyć kod, którego możemy użyć Wzniosły tekst o NotePad++, choć klasyczny notatnik również się u nas sprawdzi, wszystko zależy od tego, czy chcemy pomocy z kodem, czy zaawansowanych funkcjonalności.
Ustaw właściwości CSS za pomocą MixinJedna z pierwszych rzeczy, o których powinniśmy wiedzieć Mieszanki, jest to, że są to metody, które pomagają nam ustalić właściwości CSS dla naszego projektu, aby pomóc nam ponownie wykorzystać kod i osiągnąć bardziej spójne style. Specyfika Mixina polega na tym, że podczas kompilacji naszego kodu Mniej Nie jest to brane pod uwagę, w tym sensie, że arkusz stylów Mixins nie jest generowany, osiąga się to poprzez uwzględnienie nawiasów podczas ich definiowania, gdy mamy Mixin musimy zaimportować jego plik źródłowy i w ten sposób po prostu jego wartości są przeniesione do naszego głównego arkusza, który umieścimy na naszej stronie.
Tworzymy nasz pierwszy Mieszanie
Stwórzmy Mieszanie co pozwala nam ustalić własność CSS zaokrąglić krawędzie elementu w naszym HTML, w tym celu musimy wykonać następujące kroki:
1- Zamierzamy utworzyć w naszym folderze projektu plik o nazwie mixins.less, a w środku umieścimy następującą treść:
.rounded-edges () {border-radius: 7px; }2- Teraz utworzymy plik o nazwie projekt.mniej, tutaj ustalimy sposób, w jaki zostaną zastosowane różne style naszej strony HTML, abyśmy przyzwyczaili się do pracy Mniej stworzymy kilka zasad CSS abyśmy mogli zobaczyć, jak MieszankiZobaczmy kod, który musimy umieścić w tym pliku.
@import "mixins.less"; @ kolor tła-nagłówka: niebieski; @ content-background-color: zielony; @ stopka-kolor-tła: czerwony; nagłówek {. zaokrąglone krawędzie (); kolor tła: @ kolor tła-nagłówka; kolor: kontrast (@ kolor tła-nagłówka); } p {.zaokrąglone-krawędzie (); kolor tła: @ kolor tła treści; kolor: kontrast (@ treść-kolor-tła); } stopka {. zaokrąglone krawędzie (); kolor tła: @ kolor tła-stopki; kolor: kontrast (@ stopka-kolor-tła); }Jak widać zaczynamy od zaimportowania pliku, który wygenerowaliśmy w poprzednim kroku, następnie ustalamy 3 zmienne, którym podajemy kolor jako wartość, na końcu zaczynamy tworzyć klasy dla elementów HTML, pierwszą rzeczą, którą robimy, jest wywołanie naszej funkcji Zaokrąglone kanty(), a następnie przypisujemy kolory elementów ze zmiennymi.
3- W tym kroku utworzymy plik HTML, który możemy nazwać dowolnie, o ile ma strukturę podobną do następującej:
Mieszanki z Less La cabeceraJak widać, po prostu włączyliśmy nasz plik .mniej jako .js, który zawiera narzędzie, zdecydowaliśmy się na tę opcję, dzięki czemu nie musimy kompilować, jednak musimy pamiętać, że nie powinno to być stosowane w produkcji. W ciele HTML Generujemy różne elementy, które zdefiniowaliśmy w CSS, aby zobaczyć zastosowanie stylów.Treść
Stopka
4- Na koniec, jeśli chcemy zobaczyć wynik, po prostu otwórz nasz dokument w przeglądarce, takiej jak Firefox abyśmy mogli zobaczyć, jak wszystko wygląda, zobaczmy na poniższym obrazku, co otrzymaliśmy:
Jeśli pójdziemy trochę dalej i zobaczymy kod źródłowy interpretowany przez przeglądarkę, zobaczymy, jak różne zmienne i Mieszanie zastosowano, faktycznie został zastąpiony przez kod CSS, co oznacza, że nawet jeśli napisaliśmy właściwość tylko raz Mniej umieszcza go tam, gdzie odpowiada dopasowanie, zobaczmy:
Dziedzictwo w naszych stylach
Praca z dziedziczeniem jest czymś, co nam pomaga i dlatego możemy tworzyć elementy nadrzędne, które przekazują pewne właściwości swoim gorszym lub zawartym elementom, to znaczy istnieją wspólne cechy, których nie będziemy musieli powtarzać w elementach, które chcemy je mieć.
Jak zawsze, celem niepowtarzania kodu jest zaoszczędzenie nam pracy i czasu, a także redukcja błędów i zwiększenie łatwości utrzymania naszego kodu dzięki spójności i centralizacji jego zasobów.
Jednym z najbardziej podstawowych, ale skutecznych sposobów pracy z dziedziczeniem jest użycie elementów zagnieżdżonych, powiedzmy, że mamy sekcję HTML a w środku będziemy mieli kilka elementów, jeśli użyjemy CSS Klasycznie powiedzieć, że wszystkie elementy tej sekcji mają pewne właściwości, ale są one różne, konieczne byłoby zrobienie przynajmniej jednej linii dla każdego stylu, zobaczmy, co mamy na myśli:
sekcja element1 {treść1: xx; } sekcja element2 {treść2: zz; }Jak widać, tworzymy więcej kodu, niż powinniśmy potrzebować, zamiast tego, jeśli używamy dziedziczenia i zagnieżdżania w Mniej możemy osiągnąć coś takiego:
sekcja {element1 {treść1: xx; } item2 {treść2: zz; }}Jak widać, nie tylko piszemy mniej, ale również przedstawienie tego, co chcemy osiągnąć, jest znacznie bardziej logiczne, co pomaga nam zrozumieć i właściwie oddzielić elementy, które zamierzamy wykorzystać w naszych stylach.
Tworzę style zagnieżdżone
Teraz zastosujemy to, co właśnie wyjaśniliśmy w poprzednim punkcie, musimy utworzyć plik .mniej gdzie tworzymy styl, który jest zagnieżdżony, aby zaoszczędzić pracę i uczynić ją bardziej logiczną. Aby zrealizować to zadanie, musimy wykonać następujące kroki:
1- Stwórzmy plik.mniej jak możemy nazwać dziedziczenie.bez, w tym miejscu stworzymy zagnieżdżone style, aby to zrozumieć, po prostu zobaczymy kod, który zamierzamy umieścić i dzięki temu koncepcja przyjdzie do nas w lepszy sposób.
sekcja {h1 {rozmiar czcionki: 4em;} p {dopełnienie: 0 5px;}}Widzimy, że stworzyliśmy styl dla żywiołu Sekcjai że wszystko h1 lub P w tym elemencie kontenera musi działać z ustalonymi regułami, które zagnieździliśmy.
2- Teraz musimy stworzyć nasz plik HTML które będzie wyglądało podobnie jak w poprzednim ćwiczeniu, jakie zmiany dotyczą nazw plików do uwzględnienia i struktury w obrębie ciało, ale jeśli widzimy to w sposób abstrakcyjny, mówimy o tym samym, spójrzmy na kod.
Dziedziczenie w LessJak widzimy po prostu dołączając nasz plik Mniej jest to, że wygenerujemy potrzebne style, jeśli zobaczymy jak to wygląda w przeglądarce otrzymamy coś takiego:Nasza treść
Jeśli jednak zauważymy, co się dzieje z CSS Kiedy zostanie zinterpretowany lub skompilowany, zobaczymy, że zagnieżdżony formularz, który zbudowaliśmy, nie jest respektowany, ale ponieważ kompilator tworzy tę niezagnieżdżoną formę bezpośrednio, nie musimy się martwić, że tak będzie, zobaczmy, co kod, który widzi nasza przeglądarka, wygląda tak:
Na tym możemy zakończyć ten samouczek, jak widzieliśmy Mniej to nie tylko pisanie CSS innym sposobem jest uczynienie tych różnic użytecznymi, co prowadzi nas do zaoszczędzenia czasu, uczynienia aplikacji bardziej przyjaznymi dla naszego zespołu programistów i zaoszczędzenia wysiłku poprzez bardziej logiczne myślenie i ponowne wykorzystanie komponentów. Sposób, w jaki to wszystko ma dla nas największy sens, polega na tym, że nadal ćwiczymy i stosujemy te przykłady w praktycznych i rzeczywistych przypadkach, abyśmy mogli przyzwyczaić się do tego sposobu pracy.
Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
