Funkcje znacznie upraszczają programowanie i dotyczy to również pisania kodu CSS.
Less CSS to solidny i dynamiczny preprocesor CSS, który w ostatnich latach zyskał dużą popularność. Jako preprocesor służy jako rozszerzenie „Vanilla CSS”, tradycyjnego języka stylów CSS używanego w sieci rozwoju, dostarczając szereg dodatkowych funkcji i funkcjonalności, które poprawiają ogólną stylistykę doświadczenie.
Jeśli jesteś dobrze zorientowany w pisaniu standardowego CSS, możesz płynnie przejść do korzystania z Less CSS bez stromej krzywej uczenia się. Ta kompatybilność ułatwia utrzymanie istniejącej wiedzy o CSS przy jednoczesnym wykorzystaniu zaawansowanych możliwości Less.
Czym są funkcje i dlaczego są ważne?
W programowaniu funkcja jest blokiem kodu, który wykonuje określone zadanie. Możesz także użyć go ponownie w innym miejscu w programie. Funkcje zwykle pobierają dane, przetwarzają je i zwracają wyniki.
Ułatwiają redukowanie zduplikowanego kodu w programie. Załóżmy na przykład, że masz program, który oblicza rabat na podstawie ceny wprowadzonej przez użytkownika. W
język taki jak JavaScript, możesz zaimplementować to w ten sposób:funkcjonowaćsprawdźRabat(cena, próg){
Jeśli (cena >= próg){
pozwalać zniżka = 5/100 * cena;
powrót`Twoja zniżka wynosi $${rabat}`;
} w przeciwnym razie {
powrót`Przepraszamy, ten przedmiot nie kwalifikuje się do zniżki. `
}
}
Następnie możesz wywołać funkcję i przekazać w cena i próg.
pozwalać cena = zachęta ("Wprowadź cenę przedmiotu: ")
alert (checkDiscount (cena, 500))
Abstrahując logikę sprawdzania rabatów, program jest nie tylko czytelny, ale masz teraz blok kodu wielokrotnego użytku, który przetwarza rabat i zwraca wynik. Funkcje mogą zrobić o wiele więcej, ale to tylko podstawy.
Zrozumienie funkcji w mniej CSS
W tradycyjnym CSS jako programista masz bardzo ograniczony zestaw funkcji. Jedną z najpopularniejszych funkcji w CSS jest tzw funkcja matematyczna calc(). który robi dokładnie to, na co wygląda — wykonuje obliczenia i wykorzystuje wynik jako wartość właściwości w CSS.
P{
kolor tła: czerwony;
szerokość: oblicz(13piks- 4piks);
}
W Less CSS istnieje kilka funkcji, które wykonują więcej niż tylko operacje arytmetyczne. Jedną z funkcji, z którą możesz się spotkać w Less, jest Jeśli funkcjonować. The Jeśli funkcja przyjmuje trzy parametry: warunek i dwie wartości. Poniższy blok kodu pokazuje, jak możesz użyć tej funkcji:
@szerokość: 10 piks;
@wysokość: 20px;
dz{
margines:Jeśli((@szerokość > @wysokość), 10 piks, 20px)
}
W powyższym bloku kodu kompilator Less sprawdza, czy zmienna szerokość (określony przez @ symbol) jest większy niż zmienna wysokość. Jeśli warunek jest prawdziwy, funkcja zwraca pierwszą wartość po warunku (10px). W przeciwnym razie funkcja zwraca drugą wartość (20px).
Po kompilacji dane wyjściowe CSS powinny wyglądać mniej więcej tak:
dz {
margines: 20piks;
}
Jak używać wartości logicznej w Less
Wartość logiczna to zmienna, która ma dwie możliwe wartości: PRAWDA Lub FAŁSZ. z wartość logiczna () funkcji w Less, możesz przechowywać prawdziwą lub fałszywą wartość wyrażenia w zmiennej do późniejszego wykorzystania. Oto jak to działa.
@kolor tekstu: czerwony;
@bg-kolor: wartość logiczna(@kolor-tekstu = czerwony);
W powyższym bloku kodu kompilator Less sprawdza, czy kolor tekstu jest czerwony. A później kolor bg zmienna przechowuje wartość.
dz{
kolor tła: Jeśli(@bg-kolor,zielony żółty);
}
Powyższy blok kodu kompiluje się do czegoś takiego:
dz {
kolor tła: zielony;
}
Zastępowanie tekstu w łańcuchu za pomocą funkcji replace().
Składnia dla zastępować() funkcja wygląda tak:
zastępować(strunowy, wzór, wymiana, flagi)
strunowy reprezentuje ciąg, który chcesz wyszukać i zamienić. wzór jest ciągiem do wyszukania. wzór może być również wyrażeniem regularnym, ale zwykle jest to ciąg znaków. Po pomyślnym dopasowaniu kompilator Less CSS zastępuje to wzór z wymiana.
Opcjonalnie tzw zastępować() funkcja może również zawierać flagi parametr dla flag wyrażeń regularnych.
@strunowy: "Cześć";
@wzór: "cześć";
@wymiana: "I";
dz::zanim{
treść: zastępować(@strunowy,@wzór,@wymiana)
}
Powyższy blok kodu powinien spowodować po kompilacji:
dz::zanim {
treść: "Cześć";
}
Funkcje listy w mniej CSS
W Less CSS do zdefiniowania listy wartości używasz przecinków lub spacji. Na przykład:
@artykuły spożywcze: "chleb", "banan", "Ziemniak", "mleko";
Możesz użyć długość() funkcja do oceny liczby elementów na liście.
@wynik: długość(@artykuły spożywcze);
Możesz także skorzystać z tzw wyciąg() funkcja, aby wyodrębnić wartość w określonej pozycji. Na przykład, jeśli chcesz uzyskać trzeci element w pliku artykuły spożywcze liście, wykonaj następujące czynności:
@trzeci element: wyciąg(@artykuły spożywcze, 3);
W przeciwieństwie do zwykłych języków programowania, w których indeks listy zaczyna się od 0, indeksem początkowym listy w Less CSS jest zawsze 1.
Kolejną funkcją listy, która może się przydać podczas tworzenia stron internetowych za pomocą Less, jest funkcja zakres() funkcjonować. Przyjmuje trzy parametry. Pierwszy parametr określa pozycję początkową w zakresie. Drugi parametr wskazuje pozycję końcową, a ostatni parametr określa wartość przyrostu lub zmniejszenia między poszczególnymi pozycjami w zakresie. Jeśli nie zostanie podany, wartością domyślną jest 1.
div {
margines: zakres (10px, 40px, 10);
}
Powyższy blok kodu powinien skompilować się do następującego:
div {
margines: 10px 20px 30px 40px;
}Jak widać, kompilator Less CSS zaczyna od 10px, zwiększając poprzednią wartość o 10, aż do osiągnięcia pozycji końcowej (40px).
Budowanie prostej strony internetowej z mniejszą liczbą funkcji CSS
Nadszedł czas, aby zebrać wszystko, czego się nauczyłeś i stworzyć prosty projekt z Less CSS. Utwórz folder i dodaj indeks.htm I bezszyjkowy akta.
Otworzyć indeks.htm plik i dodaj następujący kod HTML.
HTML>
<HTMLlang="pl">
<głowa>
<metazestaw znaków=„UTF-8”>
<metanazwa=„rzutnia”treść=„szerokość = szerokość urządzenia, skala początkowa = 1,0”>
<połączyćrel=„arkusz stylów/mniej”typ="tekst/css"href="bezszyjkowy" />
<tytuł>Dokumenttytuł>
głowa>
<ciało>
<dzklasa="pojemnik">
<h1>
h1>
dz>
<scenariuszźródło=" https://cdn.jsdelivr.net/npm/less" >scenariusz>
ciało>
HTML>
W powyższym bloku kodu znajduje się element nadrzędny "pojemnik"dz z pustym h1 element. The źródło atrybut na scenariusz wskazuje ścieżkę do Less CSS Compiler.
Bez tego scenariusz tag, przeglądarka nie będzie w stanie zrozumieć Twojego kodu. Alternatywnie możesz zainstalować Less CSS na swoim komputerze przez Menedżer pakietów węzłów (NPM), uruchamiając następujące polecenie w terminalu:
npm install -g mniej
Kiedy tylko będziesz gotowy do skompilowania pliku .mniej plik, po prostu uruchom poniższe polecenie, upewniając się, że określiłeś plik, do którego kompilator powinien zapisać dane wyjściowe.
mniej stylu. mniej stylu. css
w bezszyjkowy plik, utwórz dwie zmienne, a mianowicie: szerokość kontenera I pojemnik-bg-kolor do reprezentowania szerokości i koloru tła "pojemnik"dz odpowiednio.
@szerokość kontenera: 50rem;
@pojemnik-bg-kolor: żółty;
Następnie utwórz trzy zmienne, a mianowicie: strunowy, wzór, I wymiana. Następnie dodaj style dla "pojemnik"dz i h1 element.
@strunowy: „Pozdrowienia od dzieci planety Ziemia!”;
@wzór: „dzieci planety Ziemia!”;
@wymiana: „mieszkańcy Plutona!”;.pojemnik{
szerokość: @szerokość kontenera;
kolor tła: @pojemnik-bg-kolor;
wyściółka: Jeśli(@szerokość kontenera > 30rem, zakres(20px, 80px, 20),"");
granica: solidny;
}
h1:pierworodny::Po{
treść: zastępować(@strunowy,@wzór,@wymiana);
}
W powyższym bloku kodu plik zakres() funkcja ustawia wyściółka nieruchomość na "pojemnik"dz. Kompilator Less powinien skompilować plik bezszyjkowy zapisz w następującym:
.pojemnik {
szerokość: 50Rem;
kolor tła: żółty;
wyściółka: 20piks 40piks 60piks 80piks;
granica: solidny;
}
h1:pierworodny::Po {
treść: "CześćzthemieszkańcyzPluton!";
}
Kiedy otworzysz indeks.htm plik w przeglądarce, oto co powinieneś zobaczyć:
Popraw swoją produktywność dzięki preprocesorom CSS
W zwykłych językach programowania funkcje zmniejszają ilość kodu potrzebnego do napisania i minimalizują błędy. Preprocesory CSS, takie jak Less, udostępniają kilka funkcji, które ułatwiają pisanie kodu CSS.
Preprocesory CSS przydają się podczas pracy z dużymi plikami. Ułatwiają debugowanie problemów, zwiększając w ten sposób produktywność programisty.
