Stylus CSS Nedir ve Nasıl Kullanılır?

Web geliştirme söz konusu olduğunda, bir uygulamaya stil vermenin en yaygın yolu CSS kullanmaktır. Bununla birlikte, hata ayıklamanın çok zor olması nedeniyle CSS ile çalışmak külfetli olabilir.

Stylus CSS'yi nasıl kullanacağınızı öğrenin ve mevcut en popüler CSS ön işlemcilerinden biriyle başka bir seçeneğiniz olacak.

CSS Ön İşlemcisi Nedir?

CSS ön işlemcileri, CSS yazmayı kolaylaştıran araçlardır. Genellikle kendi özel sözdizimlerinden kodu derlerler. .css Tarayıcıların anlayabileceği biçim.

Örneğin, Sass gibi CSS ön işlemcileri, döngüler, karışımlar, iç içe seçiciler ve if/else ifadeleri gibi özel özellikler sunar. Bu özellikler, özellikle büyük ekiplerde CSS kodunuzun bakımını kolaylaştırır.

Bir CSS işlemcisi kullanmak için derleyiciyi yerel ortamınıza ve/veya üretim sunucunuza kurmanız gerekir. Vite gibi bazı ön uç oluşturma araçları şunları eklemenize izin verir: LessCSS gibi CSS ön işlemcileri projenizde

Stylus CSS Nasıl Çalışır?

Stylus'u yerel ortamınıza yüklemek için Node.js'ye ve Düğüm Paket Yöneticisi (NPM) veya makinenizde kurulu İplik. Aşağıdaki terminal komutunu çalıştırın:

npm yükleme kalemi

Veya:

iplik ekleme kalemi

Her Stylus CSS dosyası bir .stil eklenti. Stylus CSS kodunuzu yazdıktan sonra, şu komutla derleyebilirsiniz:

kalem

Bu, tüm .stil dosyalar ve çıktı .css Geçerli dizindeki dosyalar. Stylus derleyici ayrıca derlemeyi mümkün kılar .css içine dosyalar .stil ile --css bayrak. dönüştürmek için .css dosyaya .stil biçimlendirmek için şu komutu kullanın:

kalem --css style.css style.styl

Stylus CSS'de Sözdizimi ve Üst Öğe Seçiciler

Geleneksel CSS'de, parantezli bir stil bloğu tanımlarsınız; bu karakterlerin dahil edilmemesi bozuk stillere yol açacaktır. Stylus CSS'de parantez kullanmak isteğe bağlıdır.

Stylus, Python benzeri bir sözdizimini destekler, yani bunun yerine girintileri kullanarak bloklar tanımlayabilirsiniz, bunun gibi:

.konteyner
marj: 10piksel

Yukarıdaki kod bloğu aşağıdaki CSS'ye derlenir:

.konteyner {
marj: 10piksel;
}

Less gibi CSS ön işlemcilerinde olduğu gibi, bir ana seçiciye & karakter:

düğme
renk: beyaz;
 &:vurgulu
renk: sarı;

Hangi derler:

düğme {
renk: #ffff;
}
düğme:vurgulu {
renk: #ff0;
}

Stylus CSS'de Değişkenler Nasıl Kullanılır?

Less CSS gibi CSS ön işlemcilerinde, değişkenleri şu şekilde tanımlarsınız: @ karakter, geleneksel CSS ise bir değişkeni tanımlamak için "--" kullanır.

Stylus'ta işler biraz farklıdır: bir değişkeni tanımlamak için özel bir sembole ihtiyacınız yoktur. Bunun yerine, eşittir işareti (=) bir değere bağlamak için:

arka plan rengi = siyah

Artık içindeki değişkeni kullanabilirsiniz. .stil dosya şu şekilde:

div
arka plan rengi: arka plan rengi

Yukarıdaki kod blokları aşağıdaki CSS'ye derlenir:

div {
arka plan rengi: #000;
}

Parantezlerle boş bir değişken tanımlayabilirsiniz. Örneğin:

boş değişken = ()

kullanarak diğer özellik değerlerine başvurabilirsiniz. @ sembol. Örneğin, bir div'in yüksekliğini genişliğinin yarısı olarak ayarlamak isterseniz, aşağıdakileri yapabilirsiniz:

eleman genişliği = 563piksel
div
Genişlik: eleman genişliği
yükseklik: (eleman genişliği / 2)

Bu işe yarar, ancak değişkeni tamamen oluşturmaktan da kaçınabilir ve Genişlik bunun yerine özellik değeri:

div
Genişlik: 563piksel
yükseklik: (@Genişlik / 2)

Bu kod bloğunda, @ sembolü, gerçek değere başvurmanıza olanak tanır. Genişlik üzerindeki mülk div. Seçtiğiniz yaklaşımdan bağımsız olarak, .stil dosya, aşağıdaki CSS'yi almalısınız:

div {
Genişlik: 563piksel;
yükseklik: 281.5 piksel;
}

Stylus CSS'deki işlevler

Stylus CSS'de değer döndüren işlevler oluşturabilirsiniz. ayarlamak istediğinizi varsayalım. Metin hizalama bir div'in özelliği "merkez" ise, Genişlik 400 pikselden büyük veya "sol" ise Genişlik 400 pikselden küçüktür. Bu mantığı işleyen bir işlev oluşturabilirsiniz.

Merkezi hizalama(N)
eğer (N > 400)
 'merkez'
başkaeğer (N < 200)
 'sol'
div {
Genişlik: 563piksel
Metin hizalama: Merkezi hizalama(@Genişlik)
yükseklik: (@Genişlik / 2)
}

Bu kod bloğu şunu çağırır: Merkezi hizalama işlevi, geçen Genişlik ile başvurarak özellik değeri @ sembol. bu Merkezi hizalama işlev, parametresinin olup olmadığını kontrol eder, N, 400'den büyüktür ve öyleyse "merkez" değerini döndürür. Eğer N 200'den küçükse, işlev "sol" değerini döndürür.

Derleyici çalıştığında aşağıdaki çıktıyı üretmelidir:

div {
Genişlik: 563piksel;
Metin hizalama: 'merkez';
yükseklik: 281.5 piksel;
}

Çoğu programlama dilinde işlevler, parametreleri sağladığınız sıraya göre atar. Bu, parametreleri yanlış sırada geçirmenin bir sonucu olarak hatalara yol açabilir; bu, geçmeniz gereken parametre sayısı arttıkça daha olasıdır.

Stylus bir çözüm sunar: adlandırılmış parametreler. Bir işlevi çağırdığınızda sıralı parametreler yerine bunları kullanın, bunun gibi:

çıkarmak(B:30px, A:10px)/*-20px*/

CSS Ön İşlemcisi Ne Zaman Kullanılır?

CSS ön işlemcileri, iş akışınızı kolaylaştırmak için kullanabileceğiniz çok güçlü araçlardır. Projeniz için doğru aracı seçmek üretkenliğinizi artırmanıza yardımcı olabilir. Projeniz çok az miktarda CSS'ye ihtiyaç duyuyorsa, bir CSS ön işlemcisi kullanmak gereksiz olabilir.

Büyük miktarda CSS'ye dayanan bir ekibin parçası olarak büyük bir proje oluşturuyorsanız, bir ön işlemci kullanmayı düşünün. Karmaşık projelere stil vermeyi kolaylaştıran işlevler, döngüler ve karışımlar gibi özellikler sunarlar.