Stylus'la tanışın. CSS Ön İşlemcileri: Dengeli Bir Seçim

Ön Uç sahnesinin bir parçasıysanız, Sass önişlemci dilinin uzak bir akrabası olan ve kimsenin gerçekten bilmediği Stylus'u duymuş olabilirsiniz. Sass gibi, Slylus da Node.js ile yazılmış bir CSS ön işlemcisidir. GitHub web servisine göre kendini şöyle tanımlar:

[…] CSS oluşturmak için verimli, dinamik ve etkileyici bir yol sağlayan devrim niteliğinde yeni bir dil.

Peki, burada "devrimci" kelimesinin kullanımının biraz abartılı olduğunu söyleyelim. Ama diğer her şey doğru. "Ne? Bir tane daha mı?" diye soruyorsun. "Bir nevi," diye yanıtlıyorum. Ancak, Stylus hiç de yeni bir dil değil. 2011'in başlarında var olmaya başladı, ancak fark ettiğim gibi, onunla ilgili görüşler oldukça farklı. Bu arada, Mozilla Developer Network'teki en son değişikliklerin Stylus kullanılarak yapıldığını biliyor muydunuz? Projede çalışan David Walsh, Stylus'u kullanmaya başlama hakkında da yazdı.

Peki Stylus'un Sass'a göre faydaları nelerdir? İlk olarak, kişisel olarak benim için bir artı olan Node.sj temelinde geliştirildi. Ve LibSass için Sass sarmalayıcı sayesinde bir Düğüm iş akışında Sass'ı kullanabilmek ne kadar harika olsa da, Node.js'de yazılmış LibSass için aynı şey söylenemez.

Buna ek olarak, Slylus, projeye, ekibe ve katı kodlama ilkelerine bağlı kalma eğilimine bağlı olarak iyi veya kötü olabilen son derece dövülebilir bir sözdizimine sahiptir. Stil sayfasına çok fazla mantık "dahil etmeye" başlamadığınız ve bunu yapmadan önce kodu girmediğiniz sürece, dövülebilir sözdiziminin iyi olduğunu düşünüyorum.

Genel olarak, Stylus ve Sass aynı özelliklerin çoğunu destekler; Stylus özelliklerinin tam listesine göz atabilirsiniz, ancak çığır açan bir şey beklemeyin (birkaç gelişmiş özellik olmasına rağmen). Ana hatlar Sass'takinden çok daha bulanık olsa da Slylus birçok sözdizimsel özelliği de destekler: farklı stiller ne istersen (girintili, CSS stili) ve aynı tarzda karıştırıp eşleştirebilirsin (bunun için bir ayrıştırıcı yazmak eğlenceli olmalı).

Yani ne düşünüyorsun? Denemek istemek?

Başlamak

Daha önce belirtildiği gibi, Slylus, diğer herhangi bir npm paketi gibi kurabilmemiz için Node.js'de yazılmıştır:

$ npm stylus -g'yi kurun

Buradan, JavaScript API'sini kullanarak bir Düğüm iş akışına bağlayabilir veya stil sayfaları oluşturmak için yürütülebilir komut satırını kullanabilirsiniz. Basitlik adına, Stylus komut satırı aracını kullanacağız, ancak bunu Node komut dosyası, Gulp veya Grunt'tan almaktan çekinmeyin.

stylus ./stylesheets/ --out ./public/css

Önceki komut, Stylus'a tüm Stylus stillerini (.styl) stil sayfaları klasöründen toplamasını ve bunları public/css klasöründe toplamasını söyler. Elbette değişiklik yapmak isterseniz dizine de bakabilirsiniz:

ekran kalemi --watch ./stylesheets/ --out ./public/css

Stylus'ta yazma stilleri

Yeni başlıyorsanız ve yeni sözdizimiyle kendinizi bunaltmak istemiyorsanız, bir .styl dosyasına basit CSS yazabilirsiniz. Stylus standart CSS sözdizimini desteklediğinden, yalnızca biraz genişletmek için CSS koduyla başlayabilirsiniz.

Temel Sözdizimi

Sözdiziminin kendisine gelince, hemen hemen her şey isteğe bağlıdır. Kıvırcık parantezler: neden rahatsız ediyorsun? Kolon: hadi! Virgüller: evet, onlara kimin ihtiyacı var! parantez: lütfen. Aşağıda mükemmel doğru kod ekran kalemi:

Foo .bar renk domates arka plan derin gök mavisi

İlk bakışta bir tür ihlal, ancak buna alışabiliriz, özellikle sözdizimsel belirteçler mevcut olduğunda. Muhtemelen tahmin ettiğiniz gibi, önceki kod şu şekilde derlenir:

Foo, .bar ( renk: domates; arka plan: derin gök mavisi; )

Değişkenler

CSS önişlemcilerinin en yaygın olarak kullanılan özelliği değişken tanımlayabilmesidir. Slylus'un bunu da sunması sürpriz değil. Sass'tan farklı olarak, iki nokta üst üste (:) yerine eşittir işareti (=) ile ifade edilirler. Ayrıca dolar işareti ($) isteğe bağlıdır ve güvenle atlanabilir.

//`text-font-stack` değişkenini tanımlayın text-font-stack = "Helvetica", "Arial", sans-serif; // Bunu gövde yazı tipi %125 / 1.5 metin-yazı tipi-yığın `font` özelliğinin bir parçası olarak kullanın

Şimdi Stylus'un yaptığı, Sass'ın veya başka herhangi bir önişlemcinin yapmadığı bir şey var: bir özelliğin değerine bakın. Genişliğin yarısı kadar negatif bir sol kenar boşluğu uygulamak istediğinizi varsayalım; Sass'ta genişliği bir değişkende saklamanız gerekir, ancak Stylus'ta değil:

@width kullanırken, Stylus'a genişlik değerini almasını söyleriz

mevcut bloğun özellikleri, onu bir değişken olarak ele alır. Gayet basit! Bir başka ilginç kullanım durumu, daha önce tanımlanıp tanımlanmadığına bağlı olarak bir özelliğin çıktısını almaktır:

Foo // ... diğer stiller z-endeksi: @z-endeksi olmadıkça 1

Bu durumda, .foo zaten sahip olmadığı sürece z-endeksi 1 olacaktır. set değeri z-endeksi özelliği için. Karışımlar (safsızlıklar) ile eşleştirildiğinde, bu güçlü bir hareket olacaktır.

Karışımlar (safsızlıklar)

Bu arada, "mixin"i muhtemelen en popüler Sass özelliklerinden biri olarak tanımlayalım! Stylus katkısının belirli bir anahtar kelime; adının sonunda parantez (boş veya değil) varsa bir katkıdır.

Boyut(genişlik, yükseklik = genişlik) genişlik genişlik yükseklik yükseklik

Tıpkı ilk durumda olduğu gibi, bir mixin eklemek için @include veya + gibi özel bir sözdizimine gerek yoktur:

foo boyutu (100 piksel)

Hatta isterseniz parantezleri atlayabilirsiniz, bu durumda tamamen standart (henüz değil) bir CSS özelliğini kullanıyormuşsunuz gibi olur. Bu mekanizmaya şeffaf safsızlıklar denir, çünkü bunların kapanımları görünmezdir.

foo boyutu 100px

Bu ilk bakışta gereksiz bir hile gibi görünebilir, ancak bu özellik aslında yazarların standart CSS sözdizimini genişletmesine izin verir. Aşağıdaki taşma karışımını göz önünde bulundurun:

Taşma(değer) if değer == üç nokta beyaz boşluk şimdi rap taşma gizli metin taşma Üç nokta başka taşma: değer

Verilen değer üç nokta ise, üç nokta ile taşan bir satıra sahip olması gereken iyi bilinen bildirim üçlüsünü yazdırır. Aksi takdirde, verilen değeri yazdırır. Bunu nasıl kullanacağınız aşağıda açıklanmıştır:

Foo taşması üç nokta

Ve bu verecek:

Foo ( boşluk: nowrap; taşma: gizli; metin taşması: üç nokta; )

Bunun oldukça havalı bir numara olduğunu kabul etmelisiniz. Kafa karıştırıcı (ve muhtemelen tehlikeli) olabilse de; genişletebilmek standart özellikler Ekstra değerlere sahip CSS aslında ilginç bir konsept.

@content stilinde bir mixin'e bazı içeriği iletmek istiyorsanız, bu muhtemelen bir (block) değişkeni aracılığıyladır. Dahil etme sırasında, ilave içerik iletmek için mixin adının önüne + işareti koymanız yeterlidir.

Has-js() html.js & (blok).foo +has-js() kırmızı renk

Bu kod şu şekilde derlenmiştir:

html.js .foo ( renk: #f00; )

Stylus mixins'in son ve çok ilginç bir özelliği, dahil edildiklerinde mixin'e iletilen tüm argümanları (varsa) içeren yerel değişken argümanlarına sahip olmalarıdır. Bu değişken, örneğin JavaScript'te olduğu gibi [..] kullanılarak belirli dizinlerdeki değeri çıkarmak için manipüle edilebilir ve bir dizi gibi ele alınabilir.

Ve sonuç olarak…

Stylus'un tüm özelliklerini ve sözdizimsel püf noktalarını keşfetmek çok uzun olurdu ve bence şimdiden iyi bir giriş yaptık, en azından başlamak için yeterli!

Gördüğünüz gibi, Stylus çok dövülebilir. CSS yazmaya yardımcı olabilecek tüm araçlar arasında, Stylus, CSS'yi gerçek bir programlama diline yaklaştıran açık ara tek araçtır.

Sass'ın Pusula'ya sahip olması gibi Stylus'un da kendi altyapısına sahip olduğunu ve buna Nib dendiğini unutmayın. Uç sağlayan araçlardır ek asistanlar ve Stylus karışımları için tarayıcılar arası destek.

Bazı insanlar bundan hoşlanabilir ve bazıları hoşlanmayabilir. Benim tavsiyem sözdizimi konusunda çok katı olmak olsa da. Böyle hoşgörülü bir sözdizimi ile çalışmak her zaman mutluluk olmayabilir. Her iki durumda da, Sass'tan sağlıklı bir rekabet görmek güzel.

CSS ön işlemcisinin gerçek gücünden yararlanmak bir maceradır. Hepsi şu anda kullanıma hazır sayısız dil, sözdizimi ve özellik var.

Bu makalede, üç farklı önişlemci kullanmanın farklı özelliklerine ve faydalarına bakacağız: Sass, LESS ve Stylus.

Tanıtım

Ön işlemciler, tüm tarayıcılarda çalışan CSS oluşturur.

CSS ön işlemcileri 3, tarayıcı uyumluluğunu bozmadan CSS'ye harika, yaratıcı özellikler eklemek amacıyla yazılmış dillerdir. Bunu, yazdığımız kodu taş devrine kadar her tarayıcıda kullanılabilecek sade CSS'de derleyerek yapıyorlar. Önişlemcilerin tabloya getirdiği binlerce özellik var ve bu makalede yayınlanmış olanlardan bazılarına ve başlıksız olanlardan bazılarına göz atacağız. Hadi başlayalım.

Sözdizimi

en önemli kısım CSS ön işlemcisinde kod yazmak, sözdizimini anlamaktır. Şansımıza, sözdizimi üç önişlemcinin tümü için normal CSS ile aynıdır (veya olabilir).

Sass & AZ

Sass ve LESS, standart CSS sözdizimini kullanır. Bu, mevcut bir CSS dosyasını bir ön işlemciye dönüştürmeyi kolaylaştırır. Sass, .scss uzantısını kullanır ve LESS, .less uzantısını kullanır. Temel bir Sass veya LESS dosyası şu şekilde yapılandırılabilir:

/* style.scss veya style.less */
h1 (
renk: #0982C1;
}

Gördüğünüz gibi, hem Sass hem de LESS'te mükemmel şekilde derlenen normal bir CSS.

Sass'ın ayrıca noktalı virgülleri atlayan daha eski bir sözdizimine sahip olduğunu ve diş telleri. Hala kullanımdayken, kullanımdan kaldırıldı ve bu örnekte onu kullanmayacağız. Sözdizimi .sass uzantısını kullanır ve şöyle görünür:

/* stil.sass */
h1
renk: #0982c1

kalem

Stylus'un sözdizimi çok daha ayrıntılıdır. Stylus, .styl dosya uzantısını kullanarak standart CSS sözdizimini kabul eder, ancak parantez, iki nokta üst üste ve noktalı virgülün isteğe bağlı olduğu bazı diğer varyasyonları da kabul eder. Örneğin:

/* stil. stil */
h1 (
renk: #0982C1;
}
/* parantezleri atlayın */
h1
renk: #0982C1;
/* iki nokta üst üste ve noktalı virgülü atla */
h1
renk #0982C1

Bir stil sayfasında farklı varyasyonların kullanılması da geçerlidir, bu nedenle bir sonraki hatasız derlenecektir.

H1(
renk #0982c1
}
h2
yazı tipi boyutu: 1.2em

Değişkenler

Değişkenler, stil sayfası boyunca bildirilebilir ve kullanılabilir. CSS değeri olan (renkler, sayılar [etkin birimler] veya metin gibi) herhangi bir değere sahip olabilirler ve stil sayfamızın herhangi bir yerinde referans alınabilirler.

küstah

Sass değişkenleri $ sembolü ile eklenir ve değer ve ad noktalı virgülle ayrılır, tıpkı css özelliği.

$mainRenk: #0982c1;
$siteGenişliği: 1024 piksel;
$borderStyle: noktalı;
gövde (
renk: $mainRenk;
kenarlık: 1px $borderStyle $mainColor;
maksimum genişlik: $siteWidth;
}

AZ

LESS değişkenleri, değişken adlarına bir @ sembolü eklenmesi dışında, Sass değişkenleriyle tamamen aynıdır.

@mainColor: #0982c1;
@siteGenişliği: 1024 piksel;
@borderStyle: noktalı;
gövde (
renk: @mainColor;
kenarlık: 1px @borderStyle @mainColor;
maksimum genişlik: @siteWidth;
}

kalem

Stylus değişkenlerinin bunlara eklenmesine gerek yoktur, ancak $ sembolünün kullanımına izin verir. Her zaman olduğu gibi, sondaki noktalı virgül gerekli değildir, ancak değer ile değişken arasında eşittir işareti vardır. Unutulmamalıdır ki, değişken adına @ sembolünü eklersek, ancak başvuru yaparken değeri kullanmazsak Stylus (0.22.4) derlenir. Başka bir deyişle, yapmayın.

MainColor = #0982c1
siteGenişliği = 1024 piksel
$borderStyle = noktalı
gövde
renk anaRenk
border 1px $borderStyle mainColor
max-width siteWidth

Derlenmiş CSS

Yukarıdaki dosyaların her biri aynı CSS ile derlenecektir. Değişkenlerin ne kadar yararlı olduğunu görmek için hayal gücünüzü kullanabilirsiniz. Artık bir rengi değiştirip yirmi kez tekrarlamamız gerekmiyor ya da sitemizin genişliğini değiştirmek istiyoruz ve onu bulmak için aramamız gerekiyor. Derlemeden sonraki CSS:

Gövde(
renk: #0982c1;
kenarlık: 1 piksel noktalı #0982c1;
maksimum genişlik: 1024 piksel
}

ek

CSS'mizde aynı ebeveyne sahip birden fazla öğeye başvurmamız gerekirse, üst öğeyi tekrar tekrar yazmaya devam etmek sıkıcı olabilir.

Bölüm (
kenar boşluğu: 10 piksel
}
bölüm gezinme(
yükseklik: 25 piksel;
}
bölüm gezinme (
renk: #0982C1;
}
bölüm nav a:hover (
metin-dekorasyon: altı çizili;
}

Bunun yerine, önişlemciyi kullanarak alt seçicileri ebeveyn parantezlerinin içine yazabiliriz. Ek olarak, & karakteri bir ebeveyn seçiciyi belirtir.

Sass, LESS ve Stylus

Üç önişlemcinin tümü, yuvalama seçicileri için aynı sözdizimine sahiptir.

Bölüm (
kenar boşluğu: 10 piksel
nav(
yükseklik: 25 piksel;
a(
renk: #0982C1;
&: üzerine gelin (
metin-dekorasyon: altı çizili;
}
}
}
}

Derlenmiş CSS

Bu, yukarıdaki koddan derlenmiş CSS'dir. Başladığımız zamankiyle tamamen aynı - ne kadar uygun!

Bölüm (
kenar boşluğu: 10 piksel
}
bölüm gezinme(
yükseklik: 25 piksel;
}
bölüm gezinme (
renk: #0982C1;
}
bölüm nav a:hover (
metin-dekorasyon: altı çizili;
}

karışımlar

Karışımlar, özelliklerin stil sayfamızda yeniden kullanılmasına izin veren özelliklerdir. Tüm stil sayfamızı gözden geçirmek ve bir özelliği birden çok kez değiştirmek yerine, artık onu karışımımızın içinde değiştirebiliriz. Bu, belirli öğe stili ve satıcı önekleri için gerçekten yararlı olabilir. Bir CSS seçici içinden mixin'ler çağrıldığında, mixin'in argümanları tanınır ve mixin içindeki stiller seçiciye uygulanır.

küstah

/* Belirtilmemişse varsayılan olarak 2 piksel olan $borderWidth argümanıyla (isteğe bağlı) Sass karıştırma hatası */
@mixin hatası($borderWidth: 2px) (
kenarlık: $borderWidth katı #F00;
renk: #F00;
}
.Genel hata(
dolgu: 20 piksel
kenar boşluğu: 4 piksel
@include hatası(); /* Karıştırma hatasından stiller uygular */
}
.sisteme giriş hatası(
sol: 12 piksel;
konum: mutlak;
üst: 20 piksel;
@include hatası (5 piksel); /* $borderWidth değişkeni 5px'e eşit olan karıştırma hatasından stiller uygular*/
}

KÜÇÜK

/* Belirtilmemişse varsayılan olarak 2 piksel olan @borderWidth argümanıyla (isteğe bağlı) DAHA AZ karıştırma hatası */
.error(@borderWidth: 2px) (
kenarlık: @borderWidth katı #F00;
renk: #F00;
}
.Genel hata(
dolgu: 20 piksel
kenar boşluğu: 4 piksel
.hata(); /* Karıştırma hatasından stiller uygular */
}
.sisteme giriş hatası(
sol: 12 piksel;
konum: mutlak;
üst: 20 piksel;
.hata(5 piksel); /* 5px'e eşit @borderWidth argümanıyla karıştırma hatasından stiller uygular */
}

kalem

/* Belirtilmemişse varsayılan olarak 2 piksel olan (isteğe bağlı) borderWidth bağımsız değişkeni ile ekran kalemi karıştırma hatası */
error(borderWidth=2px) (
kenarlık: borderWidth katı #F00;
renk: #F00;
}
.Genel hata(
dolgu: 20 piksel
kenar boşluğu: 4 piksel
hata(); /* Karıştırma hatasından stiller uygular */
}
.sisteme giriş hatası(
sol: 12 piksel;
konum: mutlak;
üst: 20 piksel;
hata (5 piksel); /* borderWidth argümanı 5 piksele eşit olan karıştırma hatasından stiller uygular */
}

Derlenmiş CSS

Tüm ön işlemciler aynı kodu oluşturur:

Genel hata(
dolgu: 20 piksel
kenar boşluğu: 4 piksel
kenarlık: 2 piksel katı #f00;
renk: #f00;
}
.sisteme giriş hatası(
sol: 12 piksel;
konum: mutlak;
üst: 20 piksel;
kenarlık: 5 piksel katı #f00;
renk: #f00;
}

Miras

CSS'yi eski moda şekilde yazarken, aynı stilleri aynı anda birden çok öğeye uygulamak için aşağıdaki kodu kullanabiliriz:

P,
ul
ol(
/* buradaki stiller */
}

Bu harika çalışıyor, ancak öğeleri ayrı ayrı biçimlendirmemiz gerekirse, her biri için farklı bir seçicinin oluşturulması gerekir ve hızla daha karmaşık ve bakımı daha zor hale gelebilir. Buna karşı koymak için mirası kullanabilirsiniz. Kalıtım başkalarının yeteneğidir CSS seçicileri başka bir seçicinin özelliklerini devralır.

Sass & Stylus

.engellemek(
kenar boşluğu: 10 piksel 5 piksel;
dolgu: 2 piksel
}
p(
@uzatmak
kenarlık: 1 piksel düz #EEE;
}
ul, ol (
renk: #333;
metin dönüştürme: büyük harf;
}

Derlenmiş CSS (Sass & Stylus)

.block, p, ul, ol (
kenar boşluğu: 10 piksel 5 piksel;
dolgu: 2 piksel
}
p(
kenarlık: 1 piksel düz #EEE;
}
ul, ol (
renk: #333;
metin dönüştürme: büyük harf;
}

KÜÇÜK

LESS, Sass ve Stylus gibi stil mirasını gerçekten desteklemez. Aynı özelliklere birden çok seçici eklemek yerine, kalıtımı bağımsız değişken içermeyen bir karışım olarak ele alır ve stilleri kendi seçicilerine aktarır. Bunun dezavantajı, özelliklerin derlenmiş stil sayfanızda tekrarlanmasıdır. Bunu nasıl kuracağınız aşağıda açıklanmıştır:

Engellemek (
kenar boşluğu: 10 piksel 5 piksel;
dolgu: 2 piksel
}
p(
.engellemek; /* Stilleri ".block"tan devral */
kenarlık: 1 piksel düz #EEE;
}
ul, ol (
.engellemek; /* Stilleri ".block"tan devral */
renk: #333;
metin dönüştürme: büyük harf;
}

Derlenmiş CSS (DAHA AZ)

.engellemek(
kenar boşluğu: 10 piksel 5 piksel;
dolgu: 2 piksel
}
p(
kenar boşluğu: 10 piksel 5 piksel;
dolgu: 2 piksel
kenarlık: 1 piksel düz #EEE;
}
ul
ol(
kenar boşluğu: 10 piksel 5 piksel;
dolgu: 2 piksel
renk: #333;
metin dönüştürme: büyük harf;
}

Gördüğünüz gibi, .block'tan gelen stiller, miras almak istediğimiz seçicilere enjekte edildi. Burada önceliğin bir sorun haline gelebileceğini unutmamak önemlidir, bu yüzden dikkatli olun.

İçe aktarmak

CSS topluluğunda, birden çok HTTP isteği gerektirdiği için CSS'nin içe aktarılması hoş karşılanmaz. Ancak, bir önişlemci ile içe aktarma farklı şekilde çalışır. Üç önişlemciden herhangi birinden bir dosya içe aktarırsanız, tam anlamıyla içe aktarmayı derleme zamanında içerecek ve yalnızca bir dosya oluşturacaktır. Normal .css dosyalarını içe aktarmanın varsayılan olarak @import "file.css" ile derlendiğini unutmayın; kod. Ayrıca, karışımlar ve değişkenler içe aktarılabilir ve ana stil sayfanızda kullanılabilir. İthalat oluşturma yapar bireysel dosyalar organizasyon için çok faydalıdır.

Sass, LESS ve Stylus

/* dosya tipi) */
gövde (
arka plan: #EEE;
}
@import "reset.css";
@import "dosya.(tür)";
p(
arka plan: #0982C1;
}

Derlenmiş CSS

@import "reset.css";
gövde (
arka plan: #EEE;
}
p(
arka plan: #0982C1;
}

Renk fonksiyonları

Renk işlevleri, derleme sırasında rengi dönüştüren işlevlerin içine yerleştirilmiştir. Bu, degradeler, daha koyu vurgulu renkler ve daha fazlasını oluşturmak için son derece yararlı olabilir.

küstah

hafiflet($renk, %10); /* $color'dan %10 daha açık bir renk döndürür */
koyulaştır($renk, %10); /* $color'dan %10 daha koyu bir renk döndürür */
doygunluk($renk, %10); /* $color'dan %10 daha doygun bir renk döndürür */
desaturate($renk, %10); /* $color'dan %10 daha az doygunluğa sahip bir renk döndürür */
gri tonlamalı($renk); /* $color'un gri tonlamasını döndürür */
tamamlayıcı($renk); /* $color'un tamamlayıcı rengini döndürür */
ters çevir($renk); /* $color'un ters çevrilmiş rengini döndürür */
karıştır($renk1, $renk2, %50); /* $color1 ile $color2'yi %50 ağırlıkta karıştırır */

Bu, Sass'taki mevcut renk fonksiyonlarının kısa bir listesidir, mevcut Sass renk fonksiyonlarının tam listesi Sass belgelerini okuyarak bulunabilir.

Renk fonksiyonları, rengin kullanıldığı her yerde kullanılabilir. İşte bir örnek:

$renk: #0982C1;
h1 (
arka plan: $renk;
kenarlık: 3 piksel katı koyulaştırma($renk, %50);
}

KÜÇÜK

aydınlat(@renk, %10); /* @color'dan %10 daha açık bir renk döndürür */
koyulaştır(@renk, %10); /* @color'dan %10 daha koyu bir renk döndürür */
doygunluk(@renk, %10); /* @color'dan %10 daha doygun bir renk döndürür */
desaturate(@color, 10%); /* @color'dan %10 daha az doygun bir renk döndürür */
döndürme(@renk, 10); /* hue değeri @color'dan 10 derece daha büyük olan bir renk döndürür */
döndürme(@renk, -10); /* @color'dan 10 derece daha küçük tonlu bir renk döndürür */
mix(@color1, @color2); /* @color1 ve @color2 karışımını döndür */

LESS Belgelerini okuyarak tüm LESS özelliklerinin bir listesi bulunabilir.

LESS'te renk işlevinin kullanımına bir örnek:

@renk: #0982C1;
h1 (
arka plan rengi;
kenarlık: 3 piksel katı koyulaştırma(@renk, %50);
}

kalem

hafiflet(renk, %10); /* "renk"ten %10 daha açık bir renk döndürür */
karartılmış(renk, %10); /* "renk"ten %10 daha koyu bir renk döndürür */
doygunluk(renk, %10); /* "renk"ten %10 daha doygun bir renk döndürür */
desaturate(renk, %10); /* "renk"ten %10 daha az doygunluk veren bir renk döndürür */

Tam liste tüm Stylus renk özellikleri, Stylus belgelerini okuyarak bulunabilir.

İşte Stylus renk fonksiyonlarını kullanan bir örnek:

Renk=#0982C1
h1
arka plan rengi
kenarlık 3px katı koyulaştır(renk, %50)

Operasyonlar

CSS'de matematik yapmak oldukça faydalıdır ve artık oldukça mümkündür. Çok basit ve işte nasıl yapıldığı:

Sass, LESS ve Stylus

gövde (
kenar boşluğu: (14 piksel/2);
üst: 50 piksel + 100 piksel
sağ: 100 piksel - 50 piksel;
sol: 10 * 10;
}

Pratik uygulamalar

Ön işlemcilerin yapabileceği birçok özelliği ve yeni özellikleri ele aldık, ancak pratik veya pratik hiçbir şeyi ele almadık. Önişlemci kullanmanın bir cankurtaran olduğu gerçek dünya uygulamalarının kısa bir listesi.

Satıcı önekleri

Bu, bir önişlemci kullanmanın nedenlerinden biridir ve çok iyi bir nedenle - çok zaman ve gözyaşı tasarrufu sağlar. Satıcı öneklerini işlemek için bir karışım oluşturmak kolaydır ve çok fazla tekrar ve zahmetli düzenlemeden tasarruf sağlar. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

küstah

@mixin border-radius($değerler) (
-webkit-border-radius: $değerler;
-moz-border-radius: $değerler;
sınır yarıçapı: $değerler;
}
div (
@include border-radius(10px);
}

KÜÇÜK

.border-radius(@değerler) (
-webkit-border-radius: @değerler;
-moz-border-radius: @değerler;
sınır yarıçapı: @değerler;
}
div (
.border-radius(10px);
}

kalem

border-radius(değerler) (
-webkit-border-radius:değerler;
-moz-border-radius: değerler;
sınır yarıçapı: değerler;
}
div (
sınır yarıçapı (10 piksel);
}

Derlenmiş CSS

div (
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
sınır yarıçapı: 10px
}

3B metin

Birden çok metin gölgesi kullanarak 3B metni taklit etmek akıllıca bir fikirdir. Tek sorun, olaydan sonra renk değiştirmenin zor ve zahmetli olmasıdır. Karışımları ve renk fonksiyonlarını kullanarak 3B metin oluşturabilir ve anında renk değiştirebiliriz!

küstah

@mixin text3d($renk) (
renk: $renk;
metin gölgesi: 1px 1px 0px koyulaştır($renk, %5),
2px 2px 0px koyulaştır($renk, %10),
3px 3px 0px koyulaştır($renk, %15),
4px 4px 0px koyulaştır($renk, 20%),
4px 4px 2px #000;
}
h1 (
yazı tipi boyutu: 32pt
@include text3d(#0982c1);
}

KÜÇÜK

.text3d(@color) (
renk: @renk;
metin gölgesi: 1px 1px 0px koyulaştır(@renk, %5),
2px 2px 0px koyulaştır(@renk, %10),
3px 3px 0px koyulaştır(@renk, %15),
4px 4px 0px koyulaştır(@renk, %20),
4px 4px 2px #000;
}
açıklık (
yazı tipi boyutu: 32pt
.text3d(#0982c1);
}

kalem

metin3d(renk)
renk: renk
metin gölgesi: 1px 1px 0px koyulaştır(renkli, %5), 2px 2px 0px koyulaştır(renkli, %10), 3px 3px 0px koyulaştır(renkli, %15), 4px 4px 0px koyulaştır(renkli, %20), 4px 4px 2 piksel #000
spa
yazı tipi boyutu: 32pt
metin3d(#0982c1)

Kıvrımlı parantezleri atladığım için Stylus metin gölgelerini bir satıra yazmayı seçtim.

Derlenmiş CSS

açıklık (
yazı tipi boyutu: 32pt
renk: #0982c1;
metin gölgesi: 1px 1px 0px #097bb7,
2px 2px 0px #0875ae,
3px 3px 0px #086fa4,
4px 4px 0px #07689a,
4px 4px 2px #000;
}

Son sonuç

sütunlar

Sütunlar için sayısal işlemler ve değişkenler kullanmak, CSS ön işlemcileriyle ilk oynadığımda karşılaştığım bir fikirdi. Bir değişkende istenen genişliği bildirerek, herhangi bir zihinsel matematik olmadan yol boyunca kolayca değiştirebiliriz. İşte nasıl yapıldığı:

küstah

$siteGenişliği: 1024 piksel;
$oluk Genişliği: 20 piksel;
$yan çubuğuGenişliği: 300 piksel;
gövde (
kenar boşluğu: 0 otomatik;
genişlik: $siteGenişliği;
}
.içerik(
yüzer: sol;
genişlik: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.kenar çubuğu(
yüzer: sol;
sol kenar boşluğu: $olukWidth;
genişlik: $sidebarWidth;
}

KÜÇÜK

@siteGenişliği: 1024 piksel;
@gutterWidth: 20 piksel;
@sidebarWidth: 300 piksel;
gövde (
kenar boşluğu: 0 otomatik;
genişlik: @siteWidth;
}
.içerik(
yüzer: sol;
genişlik: @siteWidth - (@ [e-posta korumalı]);
}
.kenar çubuğu(
yüzer: sol;
sol kenar boşluğu: @gutterWidth;
genişlik: @sidebarWidth;
}

kalem

siteGenişliği = 1024 piksel;
oluk Genişliği=20 piksel;
kenar çubuğuGenişliği = 300 piksel;
gövde (
kenar boşluğu: 0 otomatik;
genişlik: siteWidth;
}
.içerik(
yüzer: sol;
genişlik: siteWidth - (sidebarWidth+olukWidth);
}
.kenar çubuğu(
yüzer: sol;
sol kenar boşluğu: oluk genişliği;
genişlik: kenar çubuğuGenişlik;
}

Derlenmiş CSS

gövde (
kenar boşluğu: 0 otomatik;
genişlik: 1024 piksel;
}
.içerik(
yüzer: sol;
genişlik: 704 piksel;
}
.kenar çubuğu(
yüzer: sol;
sol kenar boşluğu: 20 piksel;
genişlik: 300 piksel
}

olağanüstü mülkiyet

CSS ön işlemcisini kullanmak için epeyce tuhaflık var. Eğlenceli olanlardan bazılarını listeleyeceğim, ancak hepsini bulmakla gerçekten ilgileniyorsanız, belgeleri taramanızı veya daha iyisi, günlük kodlamanızda önişlemciyi kullanmaya başlamanızı öneririm.

Hata raporları

CSS'yi makul bir sürede yazdıysanız, eminim bir yerde yanlış yaptığınız ve bulamadığınız noktaya ulaştınız. Eğer benim gibiyseniz, muhtemelen gününüzü saçınızı yolarak ve bir böceğin izini sürmek için çeşitli şeyler hakkında yorum yaparak geçirmişsinizdir.

CSS ön işlemcileri hataları bildirir. Her şey basit. Kodunuzda bir sorun varsa, nerede olduğunu ve şanslıysanız neden olduğunu söyler. Farklı ön işlemcilerde hataların nasıl raporlandığıyla ilgileniyorsanız, bu blog gönderisine göz atabilirsiniz.

Önişlemcileri CSS ile birlikte ele alırsak, resim önişlemci kavramını ayrı ayrı düşünmekten daha nettir.

Tanım

CSS ön işlemcisi(İngilizce CSS ön işlemcisinden), yeni sözdizimsel yapılar kullanarak önceden erişilemeyen özellikleri CSS'ye ekleyen bir CSS eklentisidir.

Önişlemcinin ana görevi, basitleştirmek için geliştirici için uygun sözdizimsel yapılar sağlamak ve böylece projelerde stillerin geliştirilmesini ve desteklenmesini hızlandırmaktır.

CSS ön işlemcileri, önişlemci dili kullanılarak yazılan kodu temiz ve geçerli CSS koduna dönüştürür.

Ön işlemcilerle, aşağıdakileri hedefleyen kod yazabilirsiniz:

• insan tarafından okunabilirlik
• Yapılandırılmış ve mantıklı
• Verim

Ve bu, önişlemcinin size verebileceklerinin sadece küçük bir kısmı. Ama kendinizin önüne geçmeyin.

Sözdizimsel şeker

CSS önişlemcilerini daha fazla tartışmaya geçmeden önce, kelime dağarcığımızı yeni bir kavram olan "sözdizimsel şeker" ile güncelleyelim.

Sözdizimsel şeker(İngilizce sözdizimsel şekerden), önemli değişiklikler veya yeni özellikler getirmeyen, ancak bu dili insanlar için daha okunaklı hale getiren programlama dili sözdizimine yapılan eklemelerdir.

Sözdizimsel şeker dile tanıtır alternatifler Bu dilde gömülü yapıların kayıtları. Alternatif gösterim altında, bir kişi için daha kısa veya daha uygun yapılar anlaşılmalıdır ve bunlar sonunda önişlemci tarafından dönüştürülecektir. kaynak dil, sözdizimsel şeker olmadan.

Bu kavramı CSS ön işlemcilerine uygulamaya çalışırsanız, genel olarak özlerini tam olarak açıklar. Önişlemcilerin asıl görevinin geliştirmeyi basitleştirmek ve hızlandırmak olduğunu bir kez daha hatırlatmama izin verin, ancak alternatif gösterim seçenekleri sunulmadığında bu başka nasıl yapılabilir?

CSS ön işlemcileri nelerdir?

Daha fazlasına geçme zamanı somut örnekler, yani CSS ön işlemcilerinin kendileri. Yazma sırasında, üç popüler önişlemci vardır:

• Sass (SCSS)
• kalem

Ve bizim için birkaç küçük oyuncu:

• Kapanış Stil Sayfaları
• CSS Ezilme

İlk üçü hakkında ayrı ayrı biraz daha düşük konuşacağız, ancak ikisi hakkında son konuşma rağbet görmedikleri için hiç olmayacak. İstenirse, bu önişlemcilerin açıklamaları bir arama motorunda kolayca bulunabilir.

Ön işlemcileri kullanmanın amacı nedir?

Yukarıda belirttiğim gibi, ana avantajları kod okunabilirliği, yapılandırma ve performans iyileştirmedir.

Önişlemciyi bugün kullanmaya başlamak için başka nedenler de var. Buna odaklanmak istiyorum, çünkü geliştiriciler eskiden ve çoğu hala ön işlemcileri kullanmayı reddediyor, onları karmaşık, anlaşılmaz ve gereksiz buluyor.

CSS zor

Standart CSS zor. CSS ön işlemcileri tarafından sunulan iç içe olmayan sözdizimini görselleştirmek zordur. Ek olarak, yuvalama sırasında ebeveynin adını hatırlamanız gerekir. Normal değişkenlerin ve "fonksiyonların" olmaması, CSS kodunu dağınık ve dar görüşlü hale getirir.

Mevcut Belgeler

Önişlemcilerden gelen belgelerin yalnızca "bilgi sahibi" kişiler tarafından kullanılabildiği günler geride kaldı. Artık herkes yapabilir mümkün olan en kısa süredeönişlemcilerden herhangi birinde ustalaşın ve minimum maliyet kuvvetler.

Kullanım kolaylığı

Önişlemcileri kullanmak eskisinden daha kolay ve çok daha kolay hale geldi. Bunu yapmak için, ön işlemciye yönelik dosyaları izleyecek ve değiştiklerinde bu dosyaların içeriğini saf CSS kodunda derleyecek bir program yüklemeniz yeterlidir.

Daha ileri düzey kullanıcılar için özel proje oluşturucular vardır. Bir proje oluşturucu yerine bir önişlemci programı kullanıyorsanız, yeterince havalı olmadığınızı düşünmeyin. Aslında, bu tür montajcılar tam kontrol ve sizi bir Jedi yapmak yerine gelişmiş ayarlar.

Kodun yapısı ve mantığı

Herhangi bir CSS ön işlemcisi tarafından sunulan en popüler özellik, seçicileri iç içe yerleştirme yeteneğidir. Şimdi bir örnek vermeyeceğim, çünkü daha az özellik, yuvalama dahil, kitabın ilgili bölümünde ele alınacaktır. Bu noktada bilmeniz gereken tek şey, önişlemcileri kullanırken, bir seçiciyi diğerinin içine ve diğerini üçüncü bir seçicinin içine yerleştirebilir ve bunun sonucunda kitap içindekiler tablosu gibi görünen bir şey elde edebilirsiniz:

1. Ebeveyn seçici 1.1. İç İçe Seçici 1.2. İç İçe Seçici 1.2.1. İç İçe Seçici 1.3. iç içe seçici

tabii ki, içinde gerçek hayat seçiciler sayılarla başlayamaz, ancak iç içe yerleştirme ile içindekiler arasında bir paralellik çizmek için, bu ihmalin burada uygun olduğunu düşünüyorum.

kirlilikler

Özetle, kullanarak kirlilikler(English Mixins'den), kodu yeniden kullanılabilir hale getirebilirsiniz. Bu, seçiciden seçiciye işaretlemede yardımcı sınıflardan veya yinelenen özelliklerden kaçınmaya yardımcı olur.

modülerlik

Beni şu anda CSS önişlemcisini kullanmaya ikna edecek başka bir bonus, dosyaları dosyaların içine yerleştirme, diğer bir deyişle dosyaları belirli bir sırada birleştirme yeteneği olacaktır. Evet, bu saf CSS ile yapılabilir, ancak diğer özelliklerle birlikte çok fazla olduğu ortaya çıkıyor. güçlü araç.

Aynı zamanda kendi ihtiyaçlarımız için oluşturduğumuz ve diğer insanlar için faydalı olduğunu düşündüğümüz modülleri (safsızlık kitaplıkları) paylaşma fırsatı buluyoruz. Herhangi bir geliştiricinin kitaplığınızı indirebileceği ve kendi amaçları için kullanabileceği, yazdığınız karışımları gerektiği gibi çağırabileceği ortaya çıktı.

Neden CSS geliştirmeyi beklemiyorsunuz?

W3C, CSS hızına (performansa) öncelik verdiğinden, CSS'nin gelişimi çok küçük ve belirsiz adımlarla gerçekleşir. Bir yandan bu doğru ve çok önemli, ancak diğer yandan bu geliştiriciler için bir kolaylık eksikliği.

Örnek olarak, geliştiricilerin baskısı altında tanıtılan CSS4 özelliklerinden birini - ana seçiciyi koyacağım. Bir fikirden bir karara bu kadar uzun bir yol, W3C'nin böyle bir seçiciyi yavaş olarak görmesi ve sahalarda daha fazla kullanılmasının vahşi frenlere yol açmasından kaynaklanıyordu. Tabii ki, bu seçicinin yaygın kullanımından bahsediyoruz, izole vakalardan değil.

Bu nedenle, yakın gelecekte CSS ön işlemcilerinin işlevselliğini ve yeteneklerini gölgeleyebilecek devrimler ve değişiklikler beklemeyin.

Önişlemci çeşitleri

Tabii ki, her alanda olduğu gibi, her zaman rekabet vardır ve şu anda önişlemci pazarında üç ana savaşan kamp vardır:

• Sass (SCSS)
• kalem

Onlara savaşan diyorum, çünkü önişlemcilerden birinin her taraftarı, diğer temsilcilerin, diyelim ki itirafların üzerine pislik dökmeyi kendi görevi olarak görüyor. Bu hoşnutsuzluk, özellikle üç önişlemcinin en eskisi ve en güçlüsü olarak kabul edilen Sass önişlemcisinin hayranları arasında yaygındır.

Tam resim için getirmek istiyorum kısa referans her önişlemci için:

Daha az

Aslında bu kitabın kahramanı. Yazma sırasında en popüler önişlemci. 2009 yılında Alexis Sellier tarafından kurulmuştur ve JavaScript ile yazılmıştır (başlangıçta Ruby ile yazılmıştır, ancak Alexis doğru zamanda doğru hareketi yapmıştır). Önişlemcilerin tüm temel özelliklerine ve hatta daha fazlasına sahiptir, ancak bizim için olağan anlamda koşullu yapılara ve döngülere sahip değildir. Ana avantajı basitliği, CSS için neredeyse standart sözdizimi ve bir eklenti sistemi aracılığıyla işlevselliği genişletme yeteneğidir.

Sass (SCSS)

CSS ön işlemcilerinin en güçlüsü. Oldukça geniş bir geliştirici topluluğuna sahiptir. 2007 yılında HAML için bir modül olarak kurulmuş ve Ruby ile yazılmıştır (C++ portu vardır). Less'e kıyasla çok daha geniş bir özellik yelpazesine sahiptir. Önişlemcinin yetenekleri, ötesine geçmenize izin veren Compass çok işlevli kitaplığı nedeniyle genişletilir. css sınırları ve örneğin otomatik modda sprite'larla çalışın.

İki sözdizimi vardır:

• Sass (Sözdizimsel Olarak Müthiş Stil Sayfaları), kimliğe dayalı basitleştirilmiş bir CSS sözdizimidir. Eskimiş olarak kabul edilir.
• SCSS (Sassy CSS) - standart CSS sözdizimine dayalıdır.

kalem

En genç ama aynı zamanda en umut verici CSS ön işlemcisi. Çevremizde tanınmış bir kişilik olan TJ Holowaychuk tarafından 2010 yılında kurulmuştur. Bunun en uygun ve genişletilebilir önişlemci olduğunu ve ayrıca Sass'tan daha esnek olduğunu söylüyorlar. JavaScript'te yazılmıştır. Benzer CSS'den basitleştirilmişe kadar birçok sözdizimi seçeneğini destekler (eksik: , ; , () ve bazı parantezler).

CSS kasıtlı olarak basit bir dildir. Karmaşık web uygulamalarının yaygınlaşması, ön uç geliştirici konumunun ortaya çıkması ve artan sayıda yeni gereksinimler ile bu basitlik hızla ortadan kalkıyor. Başlatılmamış olanlar için, CSS ön işlemcileri (özellikle Sass , LESS ve Stylus ) stil seçeneklerinizi değişkenler, yuvalama ve karışımlar gibi ek işlevlerle genişletir - size üzerinde çok daha fazla kontrol sağlar büyük miktar stiller.

Önişlemcilerin kullanımını teşvik eden ve sağlayan makalelerde eksiklik Hızlı rehber onlara göre, son yıllarda hiçbiri yok ve birçok an zaten oldukça iyi boyandı. Öyleyse, genellikle gözden kaçan şeylere odaklanalım ve terminal çözümlerine karşı neler yapabileceğimizi görelim.

Giriş (isteğe bağlı)

Giriş bölümünde belirtildiği gibi, Sass, LESS ve Stylus gibi şeyler bize ek işlevsellik Ancak bu dillerde yazılmış dosyalar, tarayıcı içlerindeki herhangi bir şeyi ayrıştırmaya çalışmadan önce CSS'de derlenmelidir. Genel olarak, derleme süreci, iş akışı üzerindeki herhangi bir etkiyi ortadan kaldıracak şekilde otomatikleştirilmiştir.

Listelenen ön işlemcilerden herhangi birini kullanarak aşağıdakilerden yararlanabilirsiniz:

dışavurumculuk:Önişlemcilerin her biri, özü isteğe bağlı olarak veya çeşitli noktalama kurallarının reddedilmesinde yatan bir dizi zaman kazandıran kural içerir. Tercihinize bağlı olarak, stiller parantez, noktalı virgül ve/veya normal virgülden arındırılabilir. Ayrıca, hepsi seçicilerin yuvalanmasını destekler.

Genişletilmiş işlevsellik: Bu diller, değişen derecelerde, Ek özellikler stillerimizi şekillendirmek için; buna karışımlar (isteğe bağlı argümanlar alabilen yeniden kullanılabilir kod parçaları), uzantılar (sınıf mirası) ve değişken desteği dahildir.

Eklentiler: standart cephaneliği genişletmek için çeşitli eklentiler çok yaygın olarak kullanılmaktadır. Sass'ta Pusula, Stylus'ta Uç vardır ve bu farklı bir hikaye olmasına rağmen, tanıtım gerektirmeyen Bootstrap, LESS ile oluşturulmuştur.

Gerçek fayda

Aslında, önişlemcilerin ana faydası daha az çaba sarf etmesidir - fiziksel değil (tuşlara daha az sıklıkta basmak), ancak zihinsel. Önişlemciler, zihninizdeki sıkıcı yükün bir kısmını ortadan kaldırmanız ve bunlar arasında daha az geçiş yapmanız için size etkili bir fırsat sunar. çeşitli uygulamalarön uç geliştirme için tipik olan. Yaygın olarak kullanılan bir renk değeriniz var mı? Projede avlamak veya hafızanızda tutmak yerine onu bir değişkene kaydedin. Öngörülebilir şekilde ve basitçe rengi değiştirmeniz mi gerekiyor? SASS, en yakın renk seçiciye ulaşma ihtiyacını ortadan kaldırmaktan başka hiçbir şey yapmayan bir dizi renk işlemine sahiptir.

Bir önişlemci uygulayarak, doğrudan yazma stillerine konsantre olma fırsatına sahip olursunuz. Duyarlı tasarım aritmetiği, bir hesap makinesine geçmeden doğrudan stil sayfasının içinde çalışır. Pusula sizin için sprite'ların icabına bakabilir. Stilleri modüler dosyalara bölmek ve ardından performansa ulaşmadan bunları birleştirmek sorunsuzdur.

Temel fikir şudur: bu diller, problem çözmeye odaklanmak, araçlar ve bağlam değiştirme ile dikkatinizin dağılması yerine.

ağrısız derleme

Başlamanın önündeki en büyük engel CSS kullanımıön işlemciler genellikle bunun iyi mi kötü mü olduğu konusunda bir yanlış anlama değildir - insanlar komut satırını veya yapılandırma perspektifini kullanarak bir paket kurma teklifinden korkarlar ifadeleri izle. Neyse ki, aniden terminal sizin için uygun değilse, tüm bu sorunlar atlanabilir.

Sağ tarayıcıda

Tam emin değil? Önişlemcilerin bu tarayıcı uygulamalarına bakın.

Kesinlikle tüm deneyimli yerleşim tasarımcıları ön işlemciler kullanır. İstisna yok. Bu aktivitede başarılı olmak istiyorsanız bu programları unutmayınız. İlk bakışta, yeni başlayanlarda sessiz bir korkuya neden olabilirler - bu zaten programlamaya çok benzer! Aslında, CSS ön işlemcilerinin tüm özelliklerini yaklaşık bir günde, denerseniz birkaç saat içinde bile öğrenebilirsiniz. Gelecekte, hayatınızı büyük ölçüde basitleştirecekler.

CSS Ön İşlemcileri Nasıl Ortaya Çıktı?

Bu teknolojinin özelliklerini daha iyi anlamak için kısaca geliştirme tarihine dalalım. Görsel sunum internet sayfaları.

İnternetin toplu kullanımı yeni başladığında, stil sayfaları yoktu. Belgeler yalnızca tarayıcılara bağlıydı. Her birinin belirli etiketleri işlemek için kullanılan kendi stilleri vardı. Buna göre, hangi tarayıcıda açtığınıza bağlı olarak sayfalar farklı görünüyordu. Sonuç, geliştiriciler için kaos, karışıklık, sorunlardır.

1994 yılında, Norveçli bilim adamı Haakon Lee, süslemek için kullanılabilecek bir stil sayfası geliştirdi. görünüm HTML belgesinden ayrı sayfalar. Fikir, hemen iyileştirmeye başlayan W3C konsorsiyumunun temsilcileri tarafından beğenildi. Birkaç yıl sonra, CSS spesifikasyonunun ilk versiyonu yayınlandı. Sonra sürekli geliştirildi, rafine edildi ... Ama konsept aynı kaldı: her stile belirli özellikler verildi.

CSS tablolarını kullanmak her zaman sorunlu olmuştur. Örneğin, mizanpaj tasarımcıları genellikle özellikleri sıralama ve gruplandırma konusunda zorluklar yaşadılar ve kalıtım da o kadar basit değil.

Ve sonra 2000'ler geldi. Profesyonel ön uç geliştiriciler, esnek ve dinamik çalışma stilleri ile. O sırada var olan CSS, yeni tarayıcı özellikleri için ön ek ve izleme desteği gerektiriyordu. Ardından JavaScript ve Ruby uzmanları işe koyuldular ve ön işlemciler oluşturdular - CSS için ona yeni özellikler ekleyen eklentiler.

Yeni Başlayanlar için CSS: Ön İşlemcilerin Özellikleri

Birkaç işlevi yerine getirirler:

• tarayıcı öneklerini ve hack'leri birleştirin;

• sözdizimini basitleştirin;

• iç içe seçicilerle hatasız çalışmayı mümkün kılmak;

• stil mantığını geliştirin.

Kısacası: önişlemci, CSS'nin olanaklarına programlama mantığı ekler. Şimdi stillendirme, stillerin olağan numaralandırılmasıyla değil, birkaç kişinin yardımıyla yapılır. basit numaralar ve yaklaşımlar: değişkenler, fonksiyonlar, karışımlar, döngüler, koşullar. Ayrıca matematiği kullanma fırsatı da oldu.

Bu tür eklentilerin popülaritesini gören W3C, yavaş yavaş onlardan CSS koduna özellikler eklemeye başladı. Örneğin, şartname bu şekilde ortaya çıktı hesap fonksiyonu() birçok tarayıcı tarafından desteklenen. Yakında değişkenleri ayarlamanın ve karışımlar oluşturmanın mümkün olması bekleniyor. Ancak, bu uzak gelecekte olacak ve ön işlemciler zaten burada ve harika çalışıyor.

Popüler CSS ön işlemcileri. küstah

2007 yılında geliştirildi. Başlangıçta, bir HTML şablonlama motoru olan Haml'ın bir bileşeniydi. Yeni yönetim seçenekleri CSS öğeleri her yere dağıtmaya başlayan Ruby on Rails'deki geliştiriciler tarafından beğenildi. Sass'ta ortaya çıktı büyük miktar artık herhangi bir önişlemcide bulunan özellikler: değişkenler, seçicilerin yuvalanması, karışımlar (o zaman, ancak bunlara argüman eklemek imkansızdı).

Sass'ta Değişkenleri Bildirmek

Değişkenler $ işareti ile tanımlanır. Özellikleri ve kümelerini bunlara kaydedebilirsiniz, örneğin: “$borderSolid: 1px düz kırmızı;”. Bu örnekte borderSolid adında bir değişken tanımladık ve içinde 1px sabit kırmızı değerini depoladık. Şimdi, CSS'de 1 piksel genişliğinde kırmızı bir kenarlık oluşturmamız gerekiyorsa, özellik adından sonra bu değişkeni belirtmeniz yeterlidir. Bir kez bildirildiğinde, değişkenler değiştirilemez. Birkaç yerleşik işlev mevcuttur. Örneğin, #FF5050 değerine sahip bir $redColor değişkeni tanımlayalım. Şimdi CSS kodunda, bazı öğelerin özelliklerinde, onu yazı tipi rengini ayarlamak için kullanıyoruz: p ( color: $redColor; ). Renkle deneme yapmak ister misiniz? Koyulaştırma veya aydınlatma işlevlerini kullanın. Bu şu şekilde yapılır: p ( color: darken($redColor, 20%); ). Bu, redColor'u %20 daha hafif hale getirecektir.

yuvalama

Önceden, yuvalamayı belirtmek için uzun ve garip yapılar kullanmak zorundaydık. Diyelim ki p içeren bir div'imiz var ve bunun içinde yayılma alanı bulunuyor. Div için yazı tipi rengini kırmızı, p - sarı, yayılma - pembe olarak ayarlamamız gerekiyor. Normal CSS'de bu şu şekilde yapılır:

CSS ön işlemcisinin yardımıyla her şey daha basit ve daha kompakt hale getirildi:

Öğeler kelimenin tam anlamıyla iç içe geçmiş durumda.

Önişlemci yönergeleri

@import yönergesini kullanarak dosyaları içe aktarabilirsiniz. Örneğin, fontlar için stiller bildiren bir fonts.sass dosyamız var. Bunu ana style.sass dosyasına ekliyoruz: @import 'fonts'. Hazır! bir yerine büyük dosya stiller ile, gerekli özelliklere hızlı ve kolay bir şekilde erişmek için kullanılabilecek birkaç tane var.

karışımlar

En ilginç fikirlerden biri. Bir satırda bir dizi özellik ayarlamanıza izin verir. Aşağıdaki gibi çalışın:

@mixinlargeFont(

yazı tipi ailesi: 'Times New Roman';

yazı tipi boyutu: 64 piksel;

satır yüksekliği: 80 piksel;

yazı tipi ağırlığı: kalın;

Bir sayfadaki bir öğeye mixin uygulamak için @include yönergesini kullanırız. Örneğin, h1 başlığına uygulamak istiyoruz. Sonuç şu yapıdır: h1 ( @include: bigFont; )

Karışımdaki tüm özellikler h1 öğesine atanacaktır.

Önişlemci Daha Az

Sass sözdizimi programlamayı andırır. Yeni başlayan CSS öğrenenler için daha uygun bir seçenek arıyorsanız, Daha Az'a bakın. 2009 yılında oluşturuldu. ana özellik- yerel destek, böylece programlamaya aşina olmayan mizanpaj tasarımcılarının ustalaşması daha kolay olacaktır.

Değişkenler @ sembolü ile tanımlanır. Örneğin: @fontSize: 14px;. Yuvalama, Sass'takiyle aynı ilkeler üzerinde çalışır. Karışımlar şu şekilde bildirilir: .largeFont() ( font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: kalın; ). Bağlanmak için önişlemci yönergelerini kullanmanıza gerek yoktur - sadece seçilen öğenin özelliklerine yeni oluşturulmuş bir karışım ekleyin. Örneğin: h1 ( .largeFont; ).

kalem

Başka bir önişlemci. 2011 yılında dünyaya Jade, Express ve diğer faydalı ürünleri veren aynı yazar tarafından düzenlendi.

Değişkenler açık veya örtük olarak iki şekilde bildirilebilir. Örneğin: font = 'Times New Roman'; örtük bir seçenektir. Ancak $font = 'Times New Roman' açıktır. Karışımlar beyan edilir ve dolaylı olarak dahil edilir. Sözdizimi şöyledir: redColor() renk kırmızı. Şimdi onu öğeye ekleyebiliriz, örneğin: h1 redColor();.

İlk bakışta, Stylus kafa karıştırıcı görünebilir. "Yerel" parantezler ve noktalı virgüller nerede? Ama içine daldığınız anda, her şey çok daha netleşiyor. Ancak, bu önişlemciyle uzun süreli geliştirmenin sizi klasik CSS sözdizimini kullanmaktan "bırakabileceğini" unutmayın. Bu bazen "temiz" stiller ile çalışmanız gerektiğinde sorunlara neden olur.

Hangi ön işlemci seçilir?

Gerçekten... önemli değil. Tüm seçenekler yakl. aynı fırsatlar Sadece sözdizimi herkes için farklıdır. Aşağıdakileri yapmanızı öneririz:

• bir programcıysanız ve kod gibi stiller ile çalışmak istiyorsanız, Sass'ı kullanın;
• bir düzen tasarımcısıysanız ve normal düzen gibi stiller ile çalışmak istiyorsanız, Az'a dikkat edin;
• minimalizmden hoşlanıyorsanız, Stylus kullanın.

Tüm seçenekler için, geliştirmeyi daha da basitleştirebilecek çok sayıda ilginç kitaplık mevcuttur. Sass kullanıcıları, birçok yerleşik özelliğe sahip güçlü bir araç olan Compass'a bir göz atmaya teşvik edilir. Örneğin, kurduktan sonra, bir daha asla satıcı önekleri hakkında endişelenmenize gerek kalmayacak. Ağlarla çalışmak daha kolay. Renklerle, spritelarla çalışmak için araçlar var. Halihazırda duyurulan bir dizi mixin mevcuttur. Bu araca birkaç gün verin - böylece gelecekte çok zaman ve emekten tasarruf edeceksiniz.