İşlevler, programlama deneyiminizi önemli ölçüde basitleştirir ve bu, CSS kodu yazarken de geçerlidir.
Less CSS, son yıllarda önemli ölçüde ilgi ve popülerlik toplayan sağlam ve dinamik bir CSS ön işlemcisidir. Bir ön işlemci olarak, web'de kullanılan geleneksel CSS biçimlendirme dili olan "Vanilla CSS"nin bir uzantısı olarak hizmet eder. geliştirme, genel stili geliştiren bir dizi ek özellik ve işlevsellik sağlayarak deneyim.
Standart CSS yazma konusunda bilgiliyseniz, hızlı bir öğrenme eğrisi olmadan sorunsuz bir şekilde Daha Az CSS kullanmaya geçebilirsiniz. Bu uyumluluk, Less'in gelişmiş özelliklerinden yararlanırken mevcut CSS bilginizi korumanızı kolaylaştırır.
Fonksiyonlar Nedir ve Neden Önemlidir?
Programlamada fonksiyon, belirli bir görevi yerine getiren bir kod bloğudur. Programın başka bir yerinde de yeniden kullanabilirsiniz. İşlevler genellikle verileri alır, işler ve sonuçları döndürür.
Bir program içindeki yinelenen kodu azaltmayı kolaylaştırırlar. Örneğin, kullanıcının girdiği fiyata göre indirimi hesaplayan bir programınız olduğunu varsayalım. İçinde
JavaScript gibi dil, şu şekilde uygulayabilirsiniz:işlevindirimi kontrol et(fiyat, eşik){
eğer (fiyat >= eşik){
izin vermek indirim = 5/100 * fiyat;
geri dönmek`İndiriminiz $${indirim}`;
} başka {
geri dönmek`Üzgünüz, bu ürün indirim için uygun değil. `
}
}
Ardından işlevi çağırabilir ve fiyat ve eşik.
izin vermek fiyat = sor("Ürün fiyatını giriniz: ")
uyarı (checkDiscount (fiyat, 500))
İndirimleri kontrol etme mantığını soyutlayarak, program yalnızca okunabilir olmakla kalmaz, aynı zamanda indirimi işleyen ve sonucu döndüren yeniden kullanılabilir bir kod bloğuna da sahip olursunuz. Fonksiyonların yapabileceği daha çok şey var ama bu sadece temel bilgiler.
Daha Az CSS'de İşlevleri Anlamak
Geleneksel CSS'de, bir geliştirici olarak kullanabileceğiniz çok sınırlı sayıda işlev vardır. CSS'deki en popüler işlevlerden biri, calc()matematik işlevi tam olarak göründüğü şeyi yapar—hesaplamalar yapar ve sonucu CSS'de bir özellik değeri olarak kullanır.
P{
arka plan rengi: kırmızı;
Genişlik: kalk(13piksel- 4piksel);
}
Less CSS'de, yalnızca aritmetik işlemlerden daha fazlasını yapan birkaç işlev vardır. Less'te karşılaşabileceğiniz bir işlev, eğer işlev. bu eğer fonksiyon üç parametre alır: bir koşul ve iki değer. Aşağıdaki kod bloğu, bu işlevi nasıl kullanabileceğinizi gösterir:
@Genişlik: 10 piksel;
@yükseklik: 20 piksel;
div{
marj:eğer((@Genişlik > @yükseklik), 10 piksel, 20 piksel)
}
Yukarıdaki kod bloğunda, Less derleyici değişkenin olup olmadığını kontrol eder. Genişlik (tarafından tanımlanan @ sembolü) değişkenden daha büyüktür yükseklik. Koşul doğruysa işlev, koşuldan sonraki ilk değeri (10 piksel) döndürür. Aksi takdirde işlev ikinci değeri (20px) döndürür.
Derlemeden sonra, CSS çıktısı şöyle görünmelidir:
div {
marj: 20piksel;
}
Bir Boole Nasıl Daha Az Kullanılır
Boole, iki olası değeri olan bir değişkendir: doğru veya YANLIŞ. İle mantıksal() Less işlevinde, bir ifadenin doğru veya yanlış değerini daha sonra kullanmak üzere bir değişkende saklayabilirsiniz. İşte nasıl çalıştığı.
@metin rengi: kırmızı;
@bg-renk: boolean(@text-color = red);
Yukarıdaki kod bloğunda, Less derleyicisi şunları kontrol eder: metin rengi kırmızı. Sonra arka plan rengi değişken değeri saklar.
div{
arka plan rengi: eğer(@bg-renk,yeşil sarı);
}
Yukarıdaki kod bloğu aşağıdaki gibi derlenir:
div {
arka plan rengi: yeşil;
}
Bir Dize İçindeki Metni replace() İşleviyle Değiştirme
için sözdizimi yer değiştirmek() işlev şöyle görünür:
yer değiştirmek(sicim, model, yenisiyle değiştirme, bayraklar)
sicim aramak ve değiştirmek istediğiniz dizeyi temsil eder. model aranacak dizedir. model düzenli bir ifade de olabilir, ancak genellikle bir dizedir. Başarılı bir eşleştirmeden sonra, Less CSS derleyicisi bunun yerini alır. model ile yenisiyle değiştirme.
İsteğe bağlı olarak, yer değiştirmek() işlevi ayrıca içerebilir bayraklar normal ifade bayrakları için parametre.
@sicim: "Merhaba";
@model: "merhaba";
@yenisiyle değiştirme: "Ben";
div::önce{
içerik: yer değiştirmek(@sicim,@model,@yenisiyle değiştirme)
}
Yukarıdaki kod bloğu, derlemeden sonra aşağıdakilerle sonuçlanmalıdır:
div::önce {
içerik: "MERHABA";
}
Daha Az CSS'de İşlevleri Listeleme
Daha Az CSS'de, bir değer listesi tanımlamak için virgül veya boşluk kullanırsınız. Örneğin:
@bakkaliye: "ekmek", "muz", "patates", "süt";
kullanabilirsiniz uzunluk() Listedeki öğe sayısını değerlendirmek için işlev.
@sonuç: uzunluk(@bakkaliye);
Şunu da kullanabilirsiniz: çıkarmak() belirli bir konumdaki değeri çıkarmak için işlev. Örneğin, üçüncü öğeyi elde etmek istiyorsanız, yiyecek listesi, aşağıdakileri yaparsınız:
@üçüncü öğe: özü(@bakkaliye, 3);
Liste dizininin 0'dan başladığı normal programlama dillerinin aksine, Less CSS'de bir listenin başlangıç dizini her zaman 1'dir.
Less ile web siteleri oluştururken kullanışlı olabilecek başka bir liste işlevi, menzil() işlev. Üç parametre alır. İlk parametre, aralıktaki başlangıç konumunu belirtir. İkinci parametre bitiş konumunu, son parametre ise aralıktaki her bir öğe arasındaki artış veya azalma değerini belirtir. Sağlanmazsa, varsayılan değer 1'dir.
div {
kenar boşluğu: aralık (10 piksel, 40 piksel, 10);
}
Yukarıdaki kod bloğu aşağıdaki şekilde derlenmelidir:
div {
kenar boşluğu: 10 piksel 20 piksel 30 piksel 40 piksel;
}Gördüğünüz gibi, Less CSS derleyicisi 10px'den başlar ve son konuma (40px) ulaşana kadar önceki değeri 10 artırır.
Daha Az CSS İşleviyle Basit Bir Web Sitesi Oluşturma
Öğrendiğiniz her şeyi bir araya getirmenin ve Less CSS ile basit bir proje oluşturmanın zamanı geldi. Bir klasör oluşturun ve ekleyin index.htm Ve stilsiz Dosyalar.
Aç index.htm dosyasını açın ve aşağıdaki HTML kodunu ekleyin.
html>
<htmldil="tr">
<KAFA>
<metakarakter kümesi="UTF-8">
<metaisim="görüntü alanı"içerik="genişlik=cihaz genişliği, başlangıç ölçeği=1.0">
<bağlantırel="stil sayfası/daha az"tip="metin/css"href="stil.less" />
<başlık>belgebaşlık>
KAFA>
<vücut>
<divsınıf="konteyner">
<h1>
h1>
div>
<senaryokaynak=" https://cdn.jsdelivr.net/npm/less" >senaryo>
vücut>
html>
Yukarıdaki kod bloğunda bir ebeveyn var "konteyner"div boş olan h1 eleman. bu kaynak öznitelik senaryo etiketi, Less CSS Derleyicisine giden yolu işaret eder.
Bu olmadan senaryo etiketi, tarayıcı kodunuzu anlamayacaktır. Alternatif olarak, bilgisayarınıza Daha Az CSS yükleyebilirsiniz. Düğüm Paket Yöneticisi (NPM), terminalde aşağıdaki komutu çalıştırarak:
npm kurulum -g daha az
Derlemeye hazır olduğunuzda .az dosya, derleyicinin çıktıyı yazacağı dosyayı belirttiğinizden emin olarak aşağıdaki komutu çalıştırmanız yeterlidir.
daha az stil.daha az stil.css
İçinde stilsiz dosya, yani iki değişken oluşturun: konteyner genişliği Ve konteyner-bg-rengi genişliğini ve arka plan rengini temsil etmek için "konteyner"div sırasıyla.
@kapsayıcı genişliği: 50rem;
@container-bg-rengi: sarı;
Ardından, üç değişken oluşturun: sicim, model, Ve yenisiyle değiştirme. Sonra için stilleri ekleyin "konteyner"div ve h1 eleman.
@sicim: "Dünya gezegeninin çocuklarından merhaba!";
@model: "Dünya gezegeninin çocukları!";
@yenisiyle değiştirme: "Pluto'nun sakinleri!";.konteyner{
Genişlik: @kapsayıcı genişliği;
arka plan rengi: @container-bg-rengi;
dolgu malzemesi: eğer(@kapsayıcı genişliği > 30rem, menzil(20 piksel, 80 piksel, 20),"");
sınır: sağlam;
}
h1:ilk çocuk::sonrasında{
içerik: yer değiştirmek(@sicim,@model,@yenisiyle değiştirme);
}
Yukarıdaki kod bloğunda, menzil() işlev ayarlar dolgu malzemesi üzerindeki mülk "konteyner"div. Less derleyicisi şunu derlemelidir: stilsiz dosyanın içine:
.konteyner {
Genişlik: 50rem;
arka plan rengi: sarı;
dolgu malzemesi: 20piksel 40piksel 60piksel 80piksel;
sınır: sağlam;
}
h1:ilk çocuk::sonrasında {
içerik: "Merhabaitibarenthesakinlerile ilgiliPlüton!";
}
açtığınızda index.htm dosya, görmeniz gereken şey bu:
CSS Ön İşlemcileri ile Verimliliğinizi Artırın
Normal programlama dillerinde işlevler, yazmak için ihtiyaç duyduğunuz kod miktarını azaltır ve hataları en aza indirir. Less gibi CSS ön işlemcileri, CSS kodu yazmayı kolaylaştıran çeşitli özellikler sağlar.
CSS ön işlemcileri, büyük dosyalarla çalışırken kullanışlıdır. Sorunlarda hata ayıklamayı kolaylaştırarak geliştiricinin üretkenliğini artırırlar.