Daha Az CSS Nedir ve Nasıl Kullanılır?

Deneyimli bir CSS geliştiricisiyseniz, dilin dezavantajlarının farkında olacaksınız. Yerleştirme ve karıştırma gibi uzun zamandır talep edilen özellikler için yaygın destekten hala yoksundur.

Daha Az (Yalın Stil Sayfaları), birçok güçlü özelliğe sahip bir CSS uzantısıdır. CSS biliyorsanız, Less'in sözdizimi çok benzer olduğu için Less'i öğrenmek kolaydır.

Daha Az Nasıl Kurulur

ile Daha Az yükleyebilirsiniz. JavaScript Paket Yöneticisi, NPM koşarak:

npm daha az kur -g

Kurulumdan sonra derleyebilirsiniz .az dosyalar .css kullanmak daha az emretmek. Örneğin, aşağıdaki komut derler stilsiz ve sonuçları bir stil.css dosya.

daha az stil.daha az stil.css

Daha Az Değişkenler

Farklı değişkenleri tanımlamak için "--" operatörünü kullanan normal CSS, Daha az değişkenleri "@" sembolünü kullanarak tanımlar. Örneğin:

@Genişlik:40 piksel;
@yükseklik:80 piksel;

Kod bloğu, sırasıyla iki değeri tutan genişlik ve yükseklik olmak üzere iki değişken oluşturur: 40px ve 80px. CSS'de yaygın olarak kullanılan değerleri almak ve bunları bir değişkende saklamak yaygın bir uygulamadır. Bu, yalnızca bir kontrol kaynağı olduğu için bu değerleri değiştirmeyi kolaylaştırır.

Less'te değişkenleri nasıl kullanabileceğiniz aşağıda açıklanmıştır. Oluşturduğunuz bir index.htm dosyasını açın ve aşağıdaki standart kodu ekleyin:

html>
<htmldil="tr">
<KAFA>
<metakarakter kümesi="UTF-8">
<metahttp eşdeğeri="X-UA Uyumlu"içerik="IE=kenar">
<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ı"href="stil.css">
<başlık>Daha Az CSS Kullanmakbaşlık>
KAFA>
<vücut>
<div>
 Dünya gezegeninin çocuklarından merhaba!
div>
vücut>
html>

Ardından, bir stilsiz dosya ve aşağıdakileri ekleyin:

@Genişlik:400 piksel;
@yükseklik:400 piksel;
@vertical-center: merkez;
@txt-beyaz: beyaz;
@bg-kırmızı: rgb(220, 11, 11);
@font-40:40 piksel;
div {
Genişlik: @Genişlik;
yükseklik: @yükseklik;
görüntülemek: esnek;
renk: @txt-beyaz;
arka plan rengi: @bg-kırmızı;
yazı Boyutu: @font-40;
}

Şimdi, derleyebildiğiniz zaman .az dosyalamak .css kullanmak daha az emretmek:

daha az stil.daha az stil.css

Derlenmiş CSS şöyle görünmelidir:

div {
Genişlik: 400piksel;
yükseklik: 400piksel;
görüntülemek: esnek;
renk: beyaz;
arka plan rengi: #dc0b0b;
yazı Boyutu: 40piksel;
}

Tarayıcınızı açtığınızda, görmeniz gereken şey şu:

Değişkenleri seçici adları, URL'ler ve daha fazlası olarak kullanmanıza izin veren enterpolasyon gibi, Less'te değişkenlerle yapabileceğiniz daha çok şey vardır. İşte değişken enterpolasyonunun nasıl uygulanacağına dair bir örnek:

@ özel seçici: konteyner;
.@{özel seçici} {
dolgu malzemesi: 10 piksel;
marj: 10 piksel;
sınır: sağlam 10 piksel;
}

Yukarıdaki kod bloğu, @{...} bir değişkeni seçici olarak kullanmak için yan tümce. Derlendiğinde, kod aşağıdakilerle sonuçlanacaktır:

.konteyner{
dolgu malzemesi: 10piksel;
marj: 10piksel;
sınır: sağlam 10piksel;
}

Daha Az Aritmetik İşlemler

Less ayrıca toplama, çıkarma, bölme ve çarpma gibi aritmetik işlemler için destek sağlar. Bu işlemler sabitler, değerler ve değişkenlerle çalışır.

@değişken-1:5 piksel;
// Değişken ve sabit arasında Çarpma İşlemi
@değişken-2:@değişken-1 * 2
// Değer ile değişken arasında toplama işlemi.
@değişken-3:10 piksel + @değişken-2

Mixins Nasıl Kullanılır?

Mixins, stil sayfası boyunca stilleri (veya CSS kodunu) yeniden kullanmanıza olanak tanır. Diğer Sass gibi CSS uzantıları Ayrıca Mixins sunuyoruz. Karışımların Less'te nasıl çalıştığını göstermek için bir index.htm oluşturun ve aşağıdaki kodu ekleyin:

html>
<htmldil="tr">
<KAFA>
<metakarakter kümesi="UTF-8">
<metahttp eşdeğeri="X-UA Uyumlu"içerik="IE=kenar">
<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ı"href="stil.css">
<başlık>Daha Az CSS Kullanmakbaşlık>
KAFA>
<vücut>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 mimar repudiandae ipsum animi velit id iste dolore reprehenderit
 can sıkıntısı! İstemeden quos autem culpa et sit, acceptda reiciendis
 çok kolay.
div>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 mimar repudiandae ipsum animi velit id iste dolore reprehenderit
 can sıkıntısı! İstemeden quos autem culpa et sit, acceptda reiciendis
 çok kolay.
P>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 mimar repudiandae ipsum animi velit id iste dolore reprehenderit
 can sıkıntısı! İstemeden quos autem culpa et sit, acceptda reiciendis
 çok kolay.
P>
vücut>
html>

Ardından, bir stilsiz dosyasını açın ve aşağıdaki satırları ekleyin:

.örnek yazı() {
arka plan rengi: sarı;
}
.ilk harf() {
arka plan rengi: kırmızı;
renk: beyaz;
yazı Boyutu: 30 piksel;
}
P {
.örnek yazı();
}
P::ilk harf {
.ilk harf();
}

Yukarıdaki kod bloğunda iki mixin sınıfı vardır: .örnek yazı Ve .ilk harf. Stil sayfasının başka bir bölümünde bir mixin kullanmak istediğinizde, sonunda parantezler koyarak adıyla referans göstermeniz yeterlidir: .mixin(). Tarayıcıda şöyle bir şey görmelisiniz:

Daha Az Alanda İç İçe Stil Stili

Diyelim ki çocukları olarak iki öğeye sahip bir ebeveyn div'iniz var: a P eleman ve başka div. Normalde, stil vermek istiyorsanız P kırmızı renkli eleman ve div yeşil renkli öğeler için aşağıdaki yaklaşımı kullanabilirsiniz:

divP {
renk: kırmızı;
}
div {
renk: yeşil
}

Daha az kullanımı yoluyla benzer işlevsellik sağlar yuvalama. Yani bu durumda, yukarıdaki kod bloğunun Less eşdeğeri şöyle olacaktır:

div {
renk: yeşil;
P {
renk: kırmızı;
 }
}

Bu sadece kafanızı karıştırmayı kolaylaştırmakla kalmaz, aynı zamanda kodu daha kolay bakım yapılabilir hale getirir. less ile üst seçicilere başvurmak daha kolaydır & Şebeke. Örneğin:

düğme {
arka plan rengi: mavi;
sınır: hiçbiri;
&:vurgulu {
arka plan rengi: gri;
dönüştürmek: ölçek(1.2);
 }
}

Yukarıdaki kod bloğu, derlendiğinde aşağıdaki CSS koduyla sonuçlanacaktır:

düğme {
arka plan rengi: mavi;
sınır: hiçbiri;
}
düğme:vurgulu {
arka plan rengi: gri;
dönüştürmek: ölçek(1.2);
}

Kapsamı ve İşlevleri Daha Az Anlamak

Normal programlama dilleri gibi, değişkenler de onları tanımladığınız bloğun kapsamına sahiptir. Bunu göstermek için yeni bir index.htm dosyasını açın ve daha önce sağlanan ilk HTML standart kodunu ekleyin. Ardından aşağıdaki bloğu ekleyin vücut etiket:

<divsınıf="dış div">
 Dış Div kırmızı olmalıdır.
<br />
<açıklıksınıf="iç div">
 İç div yeşil olmalıdır.
açıklık>
div>

İçinde stilsiz dosya, aşağıdaki satırları ekleyin:

@bg-renk: kırmızı;
vücut {
yazı Boyutu: 40 piksel;
renk: beyaz;
marj: 20 piksel;
}
.inner-div {
@bg-renk: yeşil;
arka plan rengi: @bg-renk;
}
.dış div {
arka plan rengi: @bg-renk;
}

bu iç-div blok yeniden tanımlar arka plan rengi değişken, kapsamı yalnızca bu bloğa göre belirlenir. Yani yeşil renk sadece o sınıfa uygulanır ve geneli etkilemez. arka plan rengi değişken. Derleyip sonucu tarayıcıda açtığınızda, görmeniz gereken şey şu:

Daha az, bazı senaryolarda faydalı olabilecek kullanışlı işlevler de sağlar. Örneğin, yalnızca belirli bir koşul karşılandığında bir stil ayarlamak istiyorsanız, bunu eğer işlev. Bu işlev aşağıdaki sözdizimine sahiptir:

eğer((koşul), değer1, değer2)

kod geri döner değer1 koşul sağlanırsa ve değer2 aksi takdirde. İşte bir örnek:

@var1:20 piksel;
@var2:20 piksel;
div {
dolgu malzemesi: eğer((@var1 = @var2), 10 piksel, 20 piksel);
}

Yukarıdaki kod bloğu, derlendiğinde aşağıdaki CSS ile sonuçlanmalıdır:

div {
dolgu malzemesi: 10piksel;
}

Daha Az ve Diğer CSS Uzantılarıyla Daha Fazlasını Yapın

Binlerce geliştirici, CSS yazmayı biraz eğlenceli hale getirmek için Less'i kullanıyor. İşlevler, karışımlar ve değişkenler gibi harika özellikler, Less'in sunduklarının yalnızca küçük bir kısmı.

Daha az, hem küçük hem de büyük projeler için uygundur. Sass ve Stylus CSS gibi diğer eşit derecede şaşırtıcı CSS uzantı dillerinin kontrol edilmeye değer olduğunu belirtmekte fayda var.