BilgisayarlarProgramlama

CSS önişlemci: genel bakış, seçim, uygulama

Kesinlikle, tüm deneyimli düzen tasarımcıları önişlemci kullanır. İstisna yoktur. Bu etkinlikte başarılı olmak istiyorsanız, bu programları unutmayın. İlk bakışta, yeni başlayanlara sakin bir korkuya neden olabilirler - programlamaya çok benzer! Aslında CSS önişlemcilerinin tüm özelliklerini yaklaşık bir günde anlayabilir ve denerseniz birkaç saat kullanabilirsiniz. Gelecekte, hayatınızı önemli ölçüde basitleştireceklerdir.

CSS önişlemcilerinin görünümü

Bu teknolojinin özelliklerini daha iyi anlamak için, kısaca kendimizi web sayfalarının görsel sunum gelişiminin tarihine daldırın.

Kitlesel İnternet uygulaması yeni başlamıştı, hiçbir stil sayfası yoktu. Belgelerin tasarımı sadece tarayıcılara bağlıydı. Her birinin belirli etiketleri işlemek için kullandığı kendi stilleri vardı. Buna göre, sayfalar hangi tarayıcıyı açtığınıza bağlı olarak farklı görünüyordu. Sonuç, kaos, karışıklık, geliştiriciler için sorunlar.

1994'te Norveçli bilim adamı Haakon Lee sayfanın görünümünü HTML belgesinden ayrı olarak tasarlamak için kullanılabilecek bir stil sayfası geliştirdi. Bu fikir hemen üzerinde çalışmaya başlayan W3C konsorsiyumunun temsilcilerine davet edildi. Birkaç yıl sonra, CSS belirtiminin ilk sürümü yayınlandı. Sonra sürekli geliştirildi, geliştirildi ... Fakat kavram aynı kaldı: her stile belirli özellikler verildi.

CSS tablolarının kullanımı her zaman bazı sorunlara neden olmuştur. Örneğin, coder genellikle özellikleri sınıflandırmak ve gruplamakta güçlük çekiyordu ve miras o kadar basit değildi.

Ve sonra iki bin geldi. Profesyonel ön hat geliştiricileri, stilleri ile esnek ve dinamik çalışmanın önemli olduğu biçimlendirmeyi daha sık yapmaya başladı. O sırada varolan CSS, yeni tarayıcı özellikleri için ön ek ve izleme desteğini gerektiriyordu. Ardından JavaScript ve Ruby uzmanları, önişlemciler yaratarak iş dünyasına girdiler - CSS için yeni özellikler ekleyerek onlara yeni özellikler eklediler.

Yeni başlayanlar için CSS: önişlemcilerin özellikleri

Birkaç işlevi yerine getirirler:

  • Tarayıcı öneklerini ve kesmeleri birleştirin;
  • Sözdizimini basitleştirin;
  • İç içe seçicilerle hatasız çalışmaya izin ver;
  • Stil mantığını geliştirin.

Kısacası, önişlemci, CSS özelliklerine programlama mantığı ekler. Şimdi stil, olağan stiller numaralandırmasıyla değil, çeşitli basit hileler ve yaklaşımlarla gerçekleştirilir: değişkenler, işlevler, meksinler, döngüler, koşullar. Buna ek olarak, matematiği kullanmak mümkün hale geldi.

Bu tür eklentilerin popülaritesini gören W3C, bunlardan yavaş yavaş CSS koduna özellikler eklemeye başladı. Örneğin, birçok tarayıcı tarafından desteklenen belirtimde calc () işlevi çıktı. Yakında değişkenlerin ayarlanması ve myxin'lerin oluşturulması mümkün olacak. Ancak, bu uzak gelecekte gerçekleşecek ve önişlemciler zaten burada ve zaten mükemmel çalışıyorlar.

Popüler CSS önişlemcileri. şımarıklık

2007'de geliştirildi. Başlangıçta HTML şablon motoru olan Haml'ın bir bileşeniydi. CSS unsurlarını yönetmek için yeni özellikler, Ruby on Rails'in her yerinde yaymaya başlayan geliştiricilerin beğenisini kazanmıştır. Sass'te şu anda herhangi bir önişlemciye dahil olan çok sayıda fırsat ortaya çıktı: değişkenler, seçiciler, mixinler gömülü (daha sonra bunlara argüman ekleyemezsiniz).

Sass'de değişken bildirimi

Değişkenler $ işareti kullanılarak bildirilir. Onlarda, özellikleri ve kümelerini kaydedebilirsiniz, örneğin: "$ borderSolid: 1px solid red;"; Bu örnekte, borderSolid adı verilen bir değişkeni ilan ettik ve 1px değerini koyu kırmızı olarak sakladık. Şimdi CSS'de 1 piksellik bir kırmızı kenarlık yaratmamız gerekiyorsa, bu değişkeni mülkün isminden sonra belirtir. Beyannameden sonra değişkenler değiştirilemez. Birçok yerleşik fonksiyonlar mevcuttur. Örneğin, # FF5050 değerine sahip bir değişken $ redColor bildirin. Şimdi CSS'de, bir öğenin özelliklerinde font rengini ayarlamak için kullanırız: p {color: $ redColor; }. Renkle denemek ister misiniz? Koyu veya açık renk işlevlerini kullanın. Bu şekilde yapılır: p {color: darken ($ redColor,% 20); }. Sonuç olarak, redColor rengi% 20 daha hafif olur.

Sass birçok dahili fonksiyona sahiptir. En azından onlarla tanışmanızı ve daha iyi öğrenmenizi öneririz.

yuvalama

Daha önce, yuvalanmayı belirtmek için uzun ve rahatsız edici tasarımlar kullanmak zorundaydık. Düşünsene, içinde bir pazarlığı olan bir div var, ve bu pazarda span da var. Div için, yazı tipi rengini kırmızı, p-sarı, yay-pembe olarak ayarlamamız gerekir. Sıradan CSS'de, bu şekilde yapılır:

Div {

Renk: kırmızı;

}

Div p {

Renk: sarı;

}

Div p span {

Renk: pembe;

}

CSS önişlemcisi ile her şey daha kolay ve daha kompakt hale getirilir:

Div {

Renk: kırmızı;

P {

Renk: sarı;

.span {

Renk: pembe;

}

}

}

Elemanlar kelimenin tam anlamıyla birbirlerine "yerleştirilir".

Önişlemci yönergeleri

@import yönergesi ile dosyaları içe aktarabilirsiniz. Örneğin fonts.sass isimli bir dosyamızda, fontların stilleri beyan edilmiştir. Ana style.sass dosyasına bağlarız: @import 'fonts'. Bitti! Stilleri olan bir büyük dosya yerine, gerekli özelliklere hızlı ve kolay bir şekilde erişmek için kullanabileceğiniz birkaç dosya var.

balık asalağı

En ilginç zadumoklardan biri. Tek satırda bir özellik kümesinin belirlenmesine izin verir. Aşağıdaki şekilde çalışın:

@mixin largeFont {

Yazı tipi ailesi: 'Times New Roman';

Yazı tipi boyutu: 64px;

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

Yazı tipi ağırlığı: koyu;

}

Bir sayfadaki bir öğeye bir mixin uygulamak için, @include yönergesini kullanın. Örneğin, onu h1 başlığına uygulamak istiyoruz. Aşağıdaki yapı elde edilir: h1 {@include: largeFont; }

Mixin'den gelen tüm özellikler h1 öğesine atanacaktır.

Daha Az Önişlemci

Sass sözdizimi programlamayı anımsatır. Yeni başlayanlar için CSS öğrenen öğrenciler için daha uygun bir seçenek arıyorsanız, Daha Az dikkat edin. 2009 yılında kurulmuştur. Ana özellik yerli CSS sözdiziminin desteğidir, bu nedenle kodlayıcı programlamayı tanımayan yabancılarla öğrenmek daha kolaydır.

Değişkenler @ simgesi ile bildirilir. Örneğin: @fontSize: 14px; Yerleştirme, Sass'taki ile aynı ilkeler üzerinde çalışır. Mixins şu şekilde ilan edilir: .largeFont () {font-family: 'Times New Roman'; Yazı tipi boyutu: 64px; Satır yüksekliği: 80 piksel; Yazı tipi ağırlığı: koyu; }. Bağlantı için, önişlemci yönergelerini kullanmanız gerekmez - yalnızca seçilen öğenin özelliklerine yeni oluşturulan bir karışımı ekleyin. Örneğin: h1 {.largeFont; }.

pikap iğnesi

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

Değişkenler iki yolla açıkça veya dolaylı olarak bildirilebilir. Örneğin: font = 'Times New Roman'; Kapalı bir seçenektir. Fakat $ font = 'Times New Roman' - açıkça. Mixins bildirilir ve örtülü olarak bağlanır. Sözdizimi şöyledir: redColor () rengi kırmızı. Şimdi öğeye ekleyebiliriz, örneğin: h1 redColor ();.

İlk bakışta Stylus anlaşılmaz görünebilir. "Yerli" parantezler ve noktalı virgüller nerede? Ama içine dalarsanız, her şey daha net olur. Bununla birlikte, bu önişlemci ile uzun süren bir gelişmenin, klasik CSS sözdizimini kullanmanız "sizi bırakabilir" olduğunu unutmayın. Bu, bazen "temiz" stiller ile çalışmanız gerektiğinde sorunlara neden olur.

Hangi önişlemci seçmeliyim?

Aslında, ... önemli değil. Tüm seçenekler, hemen hemen aynı olasılıkları sağlar, sadece her birinin sözdizimi farklıdır. Aşağıdakileri yapmanızı öneririz:

  • Bir programcı iseniz ve stilleri kod olarak kullanmak istiyorsanız, Sass'i kullanın;
  • Bir mizanpaj tasarımcısıysanız ve olağan düzende olduğu gibi stillerle çalışmak istiyorsanız Az'a dikkat edin;
  • Minimalizmden hoşlanıyorsanız, Stylus'u kullanın.

Tüm seçenekler için geliştirmeyi daha da basitleştirebilecek çok sayıda ilginç kütüphane mevcuttur. Sass kullanıcıları, yerleşik birçok özellikli güçlü bir araç olan Pusula'ya dikkat etmeleri önerilir. Örneğin, kurduktan sonra, hiçbir zaman satıcı önekleri hakkında endişelenmeniz gerekmeyecek. Izgaralarla daha basit çalışma. Renkler, sprite ile çalışmak için araçlar vardır. Birçok önceden bildirilen myxin'ler mevcuttur. Bu alete birkaç gün verin - böylece size gelecekte çok zaman ve enerji tasarrufu sağlayacaktır.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 unansea.com. Theme powered by WordPress.