PrepRocessor CSS: İnceleme, Seçim, Uygulama. Metin Koruyucu Alternatifler

CSS ön işlemcisi (CSS ön işlemcisi)- Bu, eklenen sözdizimtik yapılar kullanılarak CSS için yeni özellikler ve özellikler sağlayan CSS'nin bir eklentidir.

Ön İşlemcilerin Amacı: Projelerdeki stillerin geliştirilmesini ve desteğini basitleştirmek ve hızlandırmak için bir Web geliştiricisi için uygun bir sözdizimsel tasarımlar sağlamak.

CSS ön işlemciler, ön işlemci dili kullanarak yazılmış kodu temiz ve geçerlidir.

Ön işlemcilerin yardımıyla, yazılı kodunuz şunlar olur: İnsanlar, yapılandırılmış ve mantıksal, üretkenlik için okunabilir.

En popüler ön işlemler arasında ayrıştırDaha az, SASS (SCSS), Stylus. Ayrıca, bu alanda az ya da çok gözle görülür bir araçlar kapatma stil sayfaları, CSS Crush, şu anda daha az popülerdirler, ancak aynı tüm geliştiriciler kullanırlar. Daha az, SASS (SCSS), kalemi olanaklarını ve özelliklerini anlamaya çalışalım.

CSS'nin standart kullanımı oldukça karmaşıktır. Yuvalama olmadan sözdizimi görsel algı için doğrudan karmaşıktır. Normal değişkenlerin ve fonksiyonların yokluğu, CSS kodunu dar ve çok gereksiz ve gerekli olmayan ayrıntılara sahip hale getirir.

MEVCUT DOKÜMANTASYON - Şimdi herkes seçilen ön işlemciye aşırı maliyetler olmadan kısa sürede ustalaşabilir. İkinci avantaj, ön işlemcilerin kullanımının basitliğidir. Bunu yapmak için, yalnızca ön işlemciye yönelik olan dosyaları takip edecek özel bir program kurmanız gerekir ve değiştirdiklerinde, bu dosyaların içeriğini temiz bir CSS kodunda derleyecektir.

Daha ileri kullanıcılar için özel proje kollektörleri vardır.

Az - En popüler ve sık kullanılan ön işlemci. Javascript temelinde tasarlanan, ön işlemcilerin temel olanaklarını içerir, ancak olağan anlayışta şartlı yapılar ve döngüler sağlamaz. Sadelik ve anlaşmazlığı nedeniyle, CSS için standart bir sözdizimi ve eklentilerin işleyişinden dolayı işlevselliği genişletme olasılığı vardır.

Daha az, CSS dinamik yetenekleri sağlar: değişkenler, karıştırma (karıştırma), işlemler ve fonksiyonlar. Belgeler geliştirici için çok kolay ve sözdizimi saf CSS'ye çok benzer. Twitter Bootstrap gibi popüler çerçeveler, aktif olarak dinamik daha az işlevleri kullanır. Bununla birlikte, daha az, sınıfları stil sayfasında herhangi bir yere karıştırılarak yeniden kullanmayı mümkün kılar.

Başka bir güçlü ve popüler ön işlemcisi - SASS.. Bu aracın etrafında büyük bir geliştirici topluluğunu oluşturdu. 2007 yılında Haml için bir modül olarak kurulur ve Ruby'de yazılmıştır (C ++ 'da port sağlar). Daha az ile karşılaştırıldığında çok çeşitli fonksiyonlara sahiptir. Ön işlemci, Pusula Kütüphanesi nedeniyle işlevselliğini genişletir, bu da CSS çerçevesinin ötesine geçmeyi mümkün kılan ve daha büyük ölçüde çalışır. İki tür sözdizimi sağlar: SASS (sözdizimsel müthiş stil sayfaları), rölantide bulunan daha basit CSS sözdizimi. O daha eski bir sürüm olarak kabul edilir. SCSS (Sassy CSS), CSS sözdiziminin standartlarına dayanmaktadır.

- Oldukça genç, ama zaten vaat eden CSS ön işlemcisi. 2010 yılında tasarlandı. Birçoğu, rahat ve genişletilebilir bir ön işlemciyi ve SASS'tan daha esnek olduğunu düşünür. Javascript için tasarlanmıştır. Böyle CSS'den daha basit ve kolay hale getirmek için birçok sözdizimi seçeneği için destek var.

Geliştirici için faydalı araçlar:

• Kodkit.: SASS, daha az ve kalemi dosyalarını derlemeyi yapar ve ardından dosyaları güncelledikten sonra web tarayıcınızı otomatik olarak yükler. Sistem performansını artırmak için proje görüntülerini optimize eder. Teknoloji ödenir, ancak iş için bir deneme sürümü de vardır.
• Livereload.: Dosyalardaki değişiklikleri kontrol eder, ardından bunları işler ve web tarayıcısını otomatik olarak yeniden başlatır. Sürüm Mac ve Windows için çalışır.
• İzci.: Yakut ortamında sass ve pusula ile çalışır. Mac ve Windows için çalışır.
• Basitçe.: Mac ve Windows için normal ve basit daha az CSS derleyicisi.

Çalışması için bir tedavi ön işlem seçimi seçmek için, birkaç kullanmayı deneyin. Ve test sonuçlarına göre, seçiminizi yapmanız için çok daha kolay olacaksınız. Ayrıca, ön işlemciye hakim olurken, yeni bir dil öğrenmezsiniz, ancak yalnızca yeni bir sözdizimi ve yetenekleri öğrenirsiniz. şirket ™ Size dünya css'de keyifli bir iş isterim!

2545 kez 1 Bugün bir kez görüntülendi (a)

Kesinlikle tüm deneyimli vizonlar ön işlemciler kullanır. İstisna yok. Bu aktivitede başarılı olmak istiyorsanız, bu programları unutmayın. İlk bakışta, yeni gelen sessiz korku diyebilirler - zaten programlamaya çok benzer! Aslında, CSS ön işlemcilerinin tüm yeteneklerini gün hakkında ve eğer denerseniz, birkaç saat içinde. Gelecekte, hayatı önemli ölçüde basitleştireceklerdir.

Öncözler CSS nasıl ortaya çıktı?

Bu teknolojinin özelliklerini daha iyi anlamak için, kendinizi web sayfalarının görsel sunumunun geliştirilmesinin tarihine kısaca daldıracağız.

Sadece internetin kitlesel kullanımı başladığında, stil tabloları yoktur. Belge tasarımı yalnızca tarayıcılardan bağlıydı. Her birinin belirli etiketleri işlemek için kullanılan kendi stilleri vardı. Buna göre, sayfalar hangi tarayıcıya açtığınıza bağlı olarak farklı görünüyordu. Sonuç, kaos, karışıklık, geliştiriciler için problemlerdir.

1994 yılında Norveçli bilim adamı Hokon Lee, sayfanın görünümünü HTML belgesinden ayrı olarak tasarlamak için kullanılabilecek bir stil tablosu geliştirdi. Fikir, hemen rafine etmeye başlayan W3C konsorsiyumun temsilcileri ile karşı karşıya. Birkaç yıl sonra, CSS şartnamesinin ilk versiyonu yayınlandı. O zaman sürekli iyileştirildi, rafine edildi ... ama kavram aynı kaldı: Bazı özellikler her tarza ayarlandı.

CSS tablolarının kullanılması her zaman belirli problemlere neden oldu. Örneğin, vesticorsörler genellikle özellikleri sıralama ve gruplandırma zorluğu vardı ve her şey bu kadar kesin değil.

Ve şimdi iki binde biri gelir. Markalama Daha fazla ve daha sık, stillerle esnek ve dinamik çalışmanın önemli olduğu profesyonel cepheler geliştiricilerine katılmaya başladı. O zamanlar mevcut olan CSS, yeni tarayıcı yetenekleri için ön eklerin yerleştirilmesini ve izleme desteğini talep etmiştir. Daha sonra JavaScript ve Ruby uzmanları, CSS için ön işlemler oluşturarak çalışmaları yaptılar, bunun için yeni fırsatlar ekler.

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

Birkaç fonksiyon yaparlar:

• tarayıcı öneklerini ve haki'yi birleştirin;

• sözdizimini basitleştirin;

• yuvalanmış seçicilerle hatasız çalışmayı mümkün kılar;

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

Kısacası: Preprocessor, CSS'ye programlama mantığı ekler. Şimdi stilizasyon, stillerin normal düzenlenmesiyle ve birkaç basit teknik ve yaklaşımların yardımıyla gerçekleştirilir: değişkenler, fonksiyonlar, karışımlar, döngüler, koşullar. Ek olarak, matematik kullanmak mümkündü.

Bu tür eklentilerin popülaritesini görmek, W3C, CSS koduna kademeli olarak kademeli olarak eklemeye başladı. Örneğin, CALC () işlevi, birçok tarayıcı tarafından desteklenen şartnamede belirdi. Yakında değişkenleri ayarlamak ve miksler oluşturmak mümkün olacağı bekleniyor. Bununla birlikte, bu uzak gelecekte olacak ve ön ödemeler zaten burada ve zaten iyi çalışıyor.

Popüler CSS ön işlemcileri. SASS.

2007 yılında tasarlanmıştır. Aslen bir Haml bileşenidir - HTML şablonu. Yeni CSS elemanları yönetimi yetenekleri, geliştiricilerin her yerde dağıtmaya başlayan raylar üzerinde yakuttur. Sass, artık herhangi bir ön işlemciye dahil olan çok sayıda özellik ortaya çıktı: değişkenler, seçiciler, karışımlar (daha sonra, argümanlar eklemek imkansızdı).

Sass değişkenleri

Değişkenler $ işareti kullanılarak ilan edilir. Örneğin özellikleri ve kitlerini kaydedebilirler, örneğin: "$ bordersolid: 1px katı kırmızı;". Bu örnekte, Bordersolid adında bir değişken ilan ettik ve 1px katı kırmızı olarak kaydedildi. Şimdi, eğer CSS'de 1px'te kırmızı bir kenarlık genişliği oluşturmanız gerekecek, bu değişkeni özellik adından sonra gösterir. Duyurudan sonra değişkenler değiştirilemez. Mevcut birden fazla yerleşik özellik. Örneğin, $ Redcolor değişkenini # FF5050 değeri ile ilan edeceğiz. Şimdi CSS kodunda, bazı öğelerin özelliklerinde, yazı tipinin rengini belirtmek için kullanıyoruz: P (Renk: $ Redcolor;). Renkli denemek ister misiniz? Karanlık veya hafifletme işlevlerini kullanın. Bu şöyle yapılır: P (Renk: Koyu ($ Redcolor,% 20);). Sonuç olarak, Redcolor'un rengi% 20 daha hafif olacaktır.

Yuva

Daha önce, yuvalama belirlemek için uzun ve rahatsız edici tasarımlar kullanmak gerekliydi. P yalanların ve içinde, sırayla, bulunduğu bir div olduğunu hayal edin. DIV için, kırmızı yazı tipi rengini, P - Sarı, span - pembe için ayarlamamız gerekir. Her zamanki CSS'de aşağıdaki gibi yapılır:

CSS ön işlemcisinin yardımıyla, her şey daha kolay ve daha kompakt yapılır:

Elementler kelimenin tam anlamıyla bir diğerinde "yatırım yapılır.

Önişlemci yönergeleri

@IMPort Direktifini kullanarak, dosyaları içe aktarabilirsiniz. Örneğin, yazı tipleri için stilleri bildiren bir fonts.Sass dosyamız var. Ana dosya Style.Sass: @import 'fontları' olarak bağlıyoruz. Hazır! Stilleri olan büyük bir dosya yerine, istediğiniz özelliklere hızlı ve kolay erişim için kullanılabilecek birkaç tane var.

Karışım

En ilginç fikirlerden biri. Bir satırın bir bütün özelliği ayarlamasını sağlar. Aşağıdaki gibi çalışın:

@mixin largefont (

yazı Tipi-Ailesi: 'Times New Roman';

yazı tipi boyutu: 64px;

hat Yüksekliği: 80px;

yazı Tipi Ağırlığı: Kalın;

Karışımı sayfadaki öğeye uygulamak için @include direktifini kullanın. Örneğin, H1 başlığına uygulamak istiyoruz. Aşağıdaki tasarıma dönüşür: H1 (@include: LargeFont;)

Karışımın tüm özellikleri H1 öğesine atanacaktır.

Ön işlemler daha az

SASS Syntax programlamayı hatırlatıyor. Yeni başlayanlar için CSS çalışmalarına uygun bir seçenek arıyorsanız, daha az dikkat edin. 2009 yılında kuruldu. Başlıca özellik, vestnels için programlama ile yerel bu kadar yabancılığın desteğidir. Usta olması daha kolay olacaktır.

Değişkenler @ sembolü kullanılarak bildirilir. Örneğin: @fontsize: 14px;. Yuvalama, Sass'da olduğu gibi aynı prensiplerde çalışır. Mixins aşağıdaki gibi ilan edilir: .largefont () (Yazı Tipi Yüzü: 'Times New Roman'; Yazı Tipi Boyutu: 64PX; Hat Yüksekliği: 80px; Yazı Tipi Ağırlığı: Kalın;). Bağlanmak için, ön işlemler direktiflerini kullanmanız gerekmez - sadece seçilen öğenin özelliklerine taze yönlendirilmiş karışım ekleyin. Örneğin: H1 (.largefont;).

Stylus.

Başka bir ön işlemci. 2011 yılında Jade, Express ve diğer faydalı ürünler verdiğim yazar tarafından yaratılmıştır.

Değişkenler iki şekilde ilan edilebilir - açıkça veya dolaylı olarak. Örneğin: Font \u003d 'Times New Roman'; - Bu örtük bir seçenektir. Ancak $ Font \u003d 'Times New Roman' net. Mixins ilan edilir ve dolaylı olarak bağlanır. Sözdizimi: redcolor () rengi kırmızı. Şimdi bir öğeyi ekleyebiliriz, örneğin: H1 Redcolor ();

İlk bakışta, stylus anlaşılmaz görünebilir. Nerede "akrabalar" parantezleri ve noktalı virgüller? Ama sadece dalmak için duruyor, her şeyin ne kadar netleştiği. Bununla birlikte, bu ön işlemci ile uzun vadeli gelişimin, Klasik CSS sözdizimini kullandığınızı "öğrenebilir". Bu bazen "temiz" stillerle çalışmak için gerekli ise sorunlara neden olur.

Hangi ön işlemciyi seçecek?

Aslında, ... önemli değil. Tüm seçenekler yaklaşık olarak aynı özellikleri sağlar, basitçe her birini farklı sözdizimi sağlar. Aşağıdaki gibi davranmanızı öneririz:

• eğer bir programcı iseniz ve kodlu stillerle çalışmak istiyorsanız, SASS kullanın;
• eğer bir projeksiyonsanız ve düzenli bir düzende olduğu gibi stillerle çalışmak istiyorsanız, daha az dikkat edin;
• minimalizmden hoşlanıyorsanız, Stylus kullanın.

Tüm seçenekler için, gelişmeyi kolayca basitleştirebilen çok sayıda ilginç kütüphane mevcuttur. SASS kullanıcılarının pusulaya dikkat etmeleri için teşvik edilir - çoklu entegre özelliklere sahip güçlü bir araç. Örneğin, yükledikten sonra satıcı önekleri hakkında asla endişelenmenize gerek kalmaz. Izgaralarla çalışmayı basitleştirir. Çiçeklerle çalışmak için yardımcı programlar var, sprites. Birkaç tane zaten ilan edilen mixin var. Bunu ortama birkaç gün gönderin - böylece gelecekte çok fazla çaba ve zaman kazandırır.

Modern CSS - güç ve ön işlemlerle birlikte - genel olarak savaş makinesinde sayfalardaki içeriğin tasarımı için. Makale, örneklerle genişletilmiş bir SASS / SCSS el kitabı sağlar. Okuduktan sonra, daha büyük stiller için mixins, değişkenler ve direktiflerin nasıl kullanılacağını öğrenin.

Not Tüm SASS / SCSS kodu CSS'de derlenir, böylece tarayıcılar bunu anlayabilir ve doğru şekilde görüntülenebilir. Şu anda, tarayıcılar, SASS / SCSS ile veya diğer herhangi bir CSS ön işleme ile çalışmayı desteklemez, standart CSS özellikleri benzer işlevsellik sağlamaz.

Neden CSS yerine SASS / SCS kullanıyorsunuz?

1. Yuva - SCSS, CSS kurallarını birbirine yatırım yapmanızı sağlar. Yuvalanmış kurallar yalnızca dış seçicilere karşılık gelen unsurlar için geçerlidir (ve eğer SASS hakkında konuşursak, her şey parantez olmadan güzel ve sezgisel olarak anlaşılabilir).
2. Değişkenler - Standart CSS ayrıca değişken kavramına sahiptir, ancak Sass'ta biraz farklı çalışabilirsiniz. Örneğin, onları yönergeye göre tekrarlayın. Veya özellikleri dinamik olarak oluşturun. Daha fazla ayrıntı, projenin Rusça konuşan sitesini keşfedebilirsiniz.
3. Geliştirilmiş Matematiksel İşlemler- CSS değerlerini ekleyebilir, kesin, çarpabilirsiniz ve bölebilirsiniz. Standart CSS'nin aksine, SASS / SCSS CACT () olmadan yapmanızı sağlar.
4. Trigonometri - SCSS, JavaScript gibi diğer dillerde yapabileceğiniz gibi, yalnızca SASS / SCSS sözdizimini kullanarak kendi (sinusoidal ve kosinüs) işlevlerinizi yazmanıza izin verir.
5. Direktif @Bir süreliğine ve ifade @ if - Extent - CSS kodunu tanıdık unsurları kullanarak diğer dillerden yazabilirsiniz. Ancak paylaşmayın - sonuç olarak, çıktı normal CSS olacaktır.
6. Mixins (safsızlıklar) - Bir kez bir CSS özellikleri oluşturabilir ve bunlarla tekrar çalışabilir veya diğer değerlerle karıştırabilirsiniz. Mixins bireysel bir düzen oluşturmak için kullanılabilir. Kirlilikler ayrıca tüm CSS kurallarını veya SASS belgesinde izin verilen diğerlerini de içerebilir. Hatta az miktarda karışımla çok çeşitli stiller oluşturmanıza olanak sağlayabilir.
7. Fonksiyonlar - Tekrarlanan kullanım için işlevler biçiminde CSS tanımlarını oluşturabilirsiniz.

PrepoCessor Sass

Sass dinamik değil. CSS özelliklerini ve gerçek zamanlı değerleri oluşturamaz ve / veya canlandıramazsınız. Ancak onları daha verimli bir şekilde oluşturabilir ve bunları oradan ödünç almak için standart özelliklere (CSS'deki animasyon gibi) izin verebilirsiniz.

Sözdizimi

SCSS, özellikle kod yazmak için zaman kesen yeni sözdizimi hariç, yeni bir CSS özelliği eklemez.

Önkoşullar

5 CSS ön işlemleri vardır: SASS, SCSS, Az, Kalem ve Postcss.

Çoğunlukla ilgili bu makale, SASS'a benzer olan SCS'leri kapsar. Bu ön işlemciler hakkında daha fazla bilgi için taşma veya Qaru (Rusça'ya çeviri) daha fazla bilgi edinebilirsiniz.

SASS - (.SASS) S.yntaktik. A.wesome. S.tyle. S.tets.

SCSS - (.SCSS) SASS.y. C.rötuş. S.tyle. S.tets.

Uzantılar .Sass I.SCSS benzer, ama yine de aynı değil. Komut satırı fanları için bir dönüşüm yöntemi veriyoruz:

Sass'tan SCS'lerden Dönüşüm $ Sass-Convert Style.sass Style.css # Sass'tan SCS'lerden dönüşüm $ Sass-Convert Style.scss Style.Sass

SASS, File.Sass'ın uzantılı SCS'ler için ilk şartnamedir. Gelişimi 2006 yılında başladı, ancak daha sonra genişleme ile alternatif bir sözdizimi geliştirildi. CSSS.

Not İşlevselliğe sahip diğer ön işlemler SCS'lere benzer, ancak sözdizimi farklı olabilir. Ayrıca, CSS'de çalışan her şey aynı zamanda SASS ve SCS'lerde de mükemmel şekilde oynanır.

Değişkenler

SASS / SCSS değişkenlerle çalışmanıza izin verir. CSS'de, çift çizgi (-) ve ön işlemlerde dolar işareti ($) ile gösterilir.

$ Number: 1; $ Renk: # FF0000; $ Metin: "Sonsuza kadar Tproger."; $ Metin: "Sonsuza dek." ! Varsayılan; $ hiçbir şey: null;

Bir etiket ekleyerek değeri olmayan değişkenlerle varsayılan bir değer atayabilirsiniz! Varsayılan değerin sonunda. Bu durumda, değişken zaten bir değer atanmışsa, değişmez; Değişken boşsa, yeni bir belirtilen değer atanır.

#Container (içerik: $ metin;)

Herhangi bir özelliğe SASS değişkenleri atanabilir.

İç içe geçmiş kurallar

Bir boşluk kullanarak standart iç içe CSS elemanları:

/ * İç içe geçmiş kurallar * / #a (renk: kırmızı;) #a #b (renk: yeşil;) #a #b #c p (renk: mavi;)

SCS'li aynı iç içe maddeler:

/ * Yuvalanmış Kurallar * / #a (Renk: Kırmızı; #B (Renk: Yeşil; #C P (Renk: Mavi;))))

Görüldüğü gibi, sözdizimi daha temiz ve daha az tekrarlanır.

Bu, aşırı yüklenmiş düzenleri kontrol ederken özellikle yararlıdır. Böylece, ekli özelliklerin kodda kaydedildiği hizalama, uygulama düzeninin gerçek yapısına tam olarak karşılık gelir.

Ön işlemcinin sahnelerinin arkasında hala onu tarayıcıda görüntülenebilmesini sağlayan standart CSS koduna (yukarıda gösterilmiştir) derler. Sadece CSS yazma şeklini değiştiriyoruz.

Ampersand

#p (Renk: Siyah; A (Yazı Tipi Ağırlığı: Kalın; &: Hover (Renk: Kırmızı;))))

Sembol ile, ebeveyn seçicinin nerede yerleştirileceğini açıkça belirtebilirsiniz.

Aşağıdaki CSS'deki SASS (önceki örnekten) derleme sonucu.

#p (Renk: Siyah;) #p A (Yazı Tipi Ağırlığı: Kalın;) #p A: Hover (Renk: Kırmızı;)

Sonuç olarak, AMPERSAn, Ebeveyn Elemanı A (A: Hover) adına derlendi.

Mixins (onlar safsızlıklar)

Mixinler ayrıca özellikler dahil seçicileri de içerebilir. Ve seçiciler, AMPERSAND (&) ile ana öğeye bağlantılar içerebilir, bunu hatırlıyor musunuz?

Birden fazla tarayıcı ile çalışma örnek

CSS'teki bazı şeyler, özellikle CSS3'te, çoğu zaman çok sayıda satıcı önek (-Webkit- veya -MOZ-) gerektiren bir şey yazmaya çok sıkıcıdır.

Mixins, sitede birkaç kez kullanmak zorunda olduğunuz CSS bildirim grupları oluşturmanıza olanak sağlar. İyi uygulama, satıcı önekleri için mixins kullanımı olacaktır. Misal:

@Mixin Sınır-Radius ($ radius) (// önekleri: -Webkit-Sınır-yarıçapı: $ yarıçapı; // Krom ve Safari -Moz-Border-Radius: $ Radius; // Firefox -MS-Sınır-yarıçapı: $ RADIUS; // Internet Explorer -o-Sınır-yarıçapı: $ radius; // Opera Sınır Yarıçapı: $ Radius; // Standart CSS) // Yaratılışından sonra Sınır-yarıçapı karıştırıcısını kullanma örneği. Kutu (@include Sınır yarıçapı (10px);)

Aritmetik işlemler

Gerçek hayatta olduğu gibi, uyumsuz veri türleri olan sayılarla çalışamazsınız (örneğin, PX ve EM eklenmesi).

Toplama ve çıkarma

P (yazı tipi boyutu: 10px + 2EM; // Hata! Yazı tipi boyutu: 10px + 6px; // 16px yazı tipi boyutu: 10px + 2; // 12px)

Katlanmış veri türüne her zaman dikkat edin. Yani, pikseller için pikseller, fillere filler. Aynı şekilde, çıkarma, ancak eksi işareti ile çalışır.

Yürütme Örneği:

Çarpma işlemi

CSS (A * B) kullanarak, ancak calc ve yuvarlak parantez olmadan, CSS'teki gibi yapılır. Ek olarak, çarpma işaretini hala sayılardan boşluklarla ayırabilirsiniz (5 * 6 \u003d\u003d 5 * 6).

İstisna, pikselleri kendi aralarında çarpamaz. Yani, 10px * 10px! \u003d 100px. 10px * 10 \u003d\u003d 100px.

P (genişlik: 10px * 10px; // Hata! Genişlik: 10px * 10; // 100 piksel genişlik: 1px * 5 + 5px; // 10px genişlik: 5 * (5px + 5px); // 50px Genişlik: 5px + ( 10px / 2) * 3; // 20px)

Bölünme

Şeylerin bölünmesiyle, biraz daha zordur, ancak bunu çözebilirsiniz, çünkü standart CSS eğik çizgisinde (Slash), kısa bir yazma özellikleri formu ile kullanım için ayrılmıştır. Aşağıdaki örnek.

/ * Mülkiyet kayıtlarının kısa formu * / font: italik kalın .8EM / 1.2 arial, sans-serif; / * Standart form kayıt formu * / font tarzı: italik; Yazı Tipi Ağırlığı: Kalın; Yazı tipi boyutu: .8em; Hat yüksekliği: 1.2; Yazı Tipi ailesi: Arial, Sans-serif;

Bölüm olasılığını içeren üç asistan var:

1. Değer (veya bunun herhangi bir kısmı) bir değişkende depolanır veya işlev tarafından geri döndürülür.
2. Değerler parantez içine alınır.
3. Değer, başka bir aritmetik ifadenin bir parçası olarak kullanılır.

$ var1: 20; $ var2: 4; P (üstten: 16px / 24px; // standart CSS üstünde değişiklik yapılmamıştır: (20px / 5px); // demouncing (ancak yalnızca sadece parantez kullanırken) üst: # ($ var1) / # ($ var2); Düzenli bir CSS kodu olarak görüntülenir, bölüm üst: $ var1 / $ var2; // karar üst: rastgele (4) / 5; // teslimat yapılır (eğer bir çiftte bir çiftte kullanılırsa) üst: Bir daha aritmetik eylem eklendiğinde 2px / 4px + 3px; // bölünme yapılır)

CSS derleme sonucu:

P (Üst: 16px / 24px; üst: 4; üst: 20/4; üst: 5; üst: 0.6; üst: 3.5px;)

Kalıntı

Kalıntı, bölüm operasyonunun geri kalanını hesaplar. Aşağıda bir HTML listesi için nasıl "zebra" oluşturulacağına bakacak.

@mixin zebra () (@ of $ 1'den 1 ila 7 (@if ($ i% 2 \u003d\u003d 1) (.stripe - # ($ i) (arka plan rengi: siyah; Renk: beyaz;))) * (@include zebra (); Metin hizası: Merkez;)

Zebra karışımı oluşturmak, kodun yukarıdan yerleştirilmesinde gösterilir. @For ve @if aşağıdaki bölümde açıklanmaktadır.

Bir örnek oluşturmak için, birkaç HTML öğesi yazmanız gerekir.

Tarayıcıda sonuç:

Zebra başarıyla Mikcin Zebra tarafından üretildi

Operatörler Karşılaştırma

@İf Direktifi, ekspresyon SassScript'i kabul eder ve ifade yanlış veya null dışında herhangi bir değer döndürürse, içine yerleştirilmiş stilleri kullanır.

Aşağıda, @if ve @else direktiflerinin karıştırmaya nasıl yatırıldığı gösterilmiştir.

@Mixin Spacy ($ Padding, $ marj) (@if ($ dolgu\u003e $ marj) (dolgu: $ dolgu;) @else (dolgu: $ marj;)) .Container (@include aralığı (10px, 20px);)

Eylemde karşılaştırma. Mixin Splock, dolgunun boyutunu seçecektir 've eğer bir marjdan daha büyükse.

CSS'yi derledikten sonra:

Konteyner (dolgu: 20px;)

Mantık operatörleri

Mantıksal operatörlerin açıklaması

Genişliğine bağlı olarak arka planı değiştirecek bir düğme oluşturmak için SASS Mantıksal Operatörleri Kullanma.

@Mixin button-rengi ($ yükseklik, $ width) (@if (($ yükseklik)< $width) and ($width >\u003d 35px)) (arka plan rengi: mavi;) @else (arka plan-renk: yeşil;)). Button (@include button-rengi (20px, 30px))

Teller

CSS'de, 2 tip dizelik tanımlanır: Tırnaklar ve onsuz. Sass her ikisini de tanır. Sonuç olarak, SASS'ta kullanılan dizeleri türde bulunan CSS'de alacaksınız.

Bazı durumlarda, izin verilen CSS değerlerine, teklifsizce dizeleri ekleyebilirsiniz, ancak yalnızca eklenen dizge nihai element ise.

P (Yazı tipi: 50px ari + "al"; // 50px arial'de derlendi)

Aşağıdaki örnek, ihtiyacın nasıl yapılacağını göstermektedir.

P (Yazı Tipi: "50px" + Arial; // Hata!)

İçlerinde boşluk yoksa, farklı türlerin çizgilerini katlayabilirsiniz. Aşağıdaki örnek derlenmeyecektir.

P: Sonra (İçerik: "Return Linus" + Torvalds !; // Hata!)

P: Sonra (İçerik: "İade Linus" + "Torvalds!"; // torvaldalara dikkat edin! ")

Birkaç satır ekleme örneği:

P: Sonra (içerik: "lot" + "insanlık" + "-" + "yineleme.";)

Satır ve sayıların eklenmesi:

P: Sonra (İçerik: "Özyineleme" + 2013 + "Tüketici Kaynakları";)

Not İçerik özelliği yalnızca Pseudo seçicileri ile çalışır: önce ve: sonra. CSS belgesindeki içeriği kullanmamalı, ancak doğrudan HTML'deki etiketler arasında kullanmak için tavsiye edilir.

Akış Kontrol Operatörleri

SCSS fonksiyonlarına sahiptir (Lucacation ()) ve direktif (@Directive). Sadece yukarıda, karışımların içindeki argümanların iletimi yapıldığında işlevin bir örneğini zaten gördük.

Fonksiyonlar genellikle adı için hemen aşağıdaki gibi parantez içinde oluşur. Ve yönerge @ sembolü ile başlar.

Javascript gibi, SCS'ler standart bir akış kontrol operatörü kümesiyle çalışmanıza izin verir.

eğer ()

İf () bir fonksiyondur (ve bazen yapay zekanın temeli).

Kullanımı oldukça ilkel görünüyor: Operatör, durumda belirtilen iki değerden birini döndürür.

/ * İşlevi kullanarak () * / if (true, 1px, 2px) \u003d\u003e 1px ise; eğer (yanlış, 1px, 2px) \u003d\u003e 2px ise;

@Eğer.

@if, duruma dayalı dallanma için kullanılan bir yönergedir.

/ * Direktif kullanımı @if * / p (@if 1 + 1 \u003d\u003d 2 (kenarlık: 1px katı;) @if 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

Tamamlama sonucu:

P (sınır: 1px katı;)

Aşağıda, @else yönergesinin eklenmesiyle birleşik dallanma.

/ * Değişken $ türü oluşturma * / $ tür: Nehir; / * Mavi renkte konteynerlerin boyanması Değişkeni - River * / DIV (@if $ type \u003d\u003d River (renk: mavi;)) / * Metin için Koşullu Renkler Etiket

* / P (@if $ type \u003d\u003d Tree (Renk: Yeşil;) @Else ise $ Type \u003d\u003d River (Renk: Mavi;) @Else ise $ Type \u003d\u003d Kir (Renk: Brown;))

Ebeveyn elemanının varlığını kontrol edin

Amper ve varsa ebeveyn öğesini seçer. Bu durumda, NULL geri döner. Bu nedenle, @if yönergesi ile birlikte kullanılabilir.

Aşağıdaki örneklerde, ana öğenin varlığına bağlı olarak koşullu CSS-stilleri oluşturmayı düşünün.

/ * Bir ebeveyn elemanının * / @Mixin'in varlığını kontrol edin (@if & (/ *) (/ * Ebeveyn elemanına mavi renk uygulayın * / &: hover: mavi;)) @else ( / * Ebeveyn eleman yoktur, referanslara mavi kullanımı * / A (renk: mavi;)))

Direktifi @for

Direktifi @ için bir dizi stil seti sayısını görüntüler. Her bir tekrarı için, çıktıyı değiştirmek için bir metre değişkeni kullanılır.

Direktifi @ için 5 kez uygundur.

@ $ 1 ila 5 (.definition - # ($ i) (genişlik: 10px * $ i;)))

CSS derleme sonucu:

Tanım-1 (Genişlik: 10px;) .Definisyon-2 (genişlik: 20px;) .Definisyon-3 (genişlik: 30px;) .Definisyon-4 (genişlik: 40px;) .Definisyon-5 (genişlik: 50px;)

Direktifi.

@EACH Direktifi, listenin veya sözlüğün her birinin her birine varolur ve var olan stilleri, $ VAR'in karşılık gelen değerini kullanarak görüntüler.

@ach $ hayvan, aslan, koyun, güvercin (# ($ hayvan) -Icon (arka plan-resim: URL ("/ resim / # ($ hayvan) .png"))))))

CSS derleme sonucu:

Platypus-icon (arka plan-görüntü: URL ("/ görüntüler / platypus.png");). Lion-icon (arka plan-görüntü: URL ("/ image / lion.png");) .Seh-simge (arka arka plan) Image: URL ("/ görüntüler / koyun.png");) .dove-icon (arka plan-görüntü: URL ("/ görüntüler / dove.png");)

@While @while.

@While Direktifi, ifade SassScript'i kabul eder ve çevrimsel olarak, ifade doğru hesaplanana kadar içine yatırılan stilleri görüntüler. Daha nadir görmesine rağmen, @ için uygun olanlardan daha karmaşık döngüler oluşturmak için kullanılabilir. Örneğin:

$ Dizin: 5; @While $ indeks\u003e 0 (.Element - # ($ indeks) (genişlik: 10px * $ indeks;) $ Dizin: $ Dizin - 1;)

Tamamlama sonucu:

Element-5 (genişlik: 50px;) .element-4 (genişlik: 40px;) .element-3 (genişlik: 30px;) .element-2 (genişlik: 20px;) .Element-1 (genişlik: 10px;)

SASS / SCS'lerde fonksiyonlar

SASS / SCSS kullanarak işlevleri ve diğer dillerde de kullanabilirsiniz.

300px döndüren üç yüz PX () işlevini oluşturun.

@function üç yüz-px () (@return 300px;) .Name (genişlik: üç yüz piksel (); sınır: 1px katı gri; ekran: blok; pozisyon: mutlak;)

Bir sınıf uyguladıktan sonra elemanın adı 300 piksele eşit olacaktır.

SASS'deki fonksiyonlar herhangi bir doğru CSS değerini döndürebilir ve herhangi bir özelliğe atanabilir. İletilen argüman temelinde bile hesaplanabilirler.

@Function Double ($ width) (@return $ width * 2;)

Trigonometri

Trigonometrik fonksiyonlar Günah () ve COS (), örneğin JavaScript gibi birçok dilde gömülü sınıflar şeklinde bulunur.

Örneğin, bir TROBRIER oluşturmak için kullanıcı arayüz animasyonlarının geliştirilmesine harcanan zamanı azaltmanız gerekiyorsa, çalışmaları incelenmelidir. Bu arada, biz zaten makalelerden birindeyiz. Ancak bu durumda kod olacaktır ve HTML belgesine eklenen GIF fotoğrafı değil.

Aşağıda, kod sayısının en aza indirgendiği günah () işlevini kullanarak ilginç animasyon efektleri oluşturmak için birkaç örneğe bakacaktır. Daha sonra, etkileşimli kullanıcı arayüz elemanları (bir dairede hareket, dalgalı bir animasyon) oluşturmak için bu bilgiyi ölçeklendirebilirsiniz.

Trigonometri'yı CSS ile birlikte kullanmanın avantajı, GIF görüntüleriyle gerçekleştiğinden, ek HTTP isteklerinin yokluğunda ifade edilir.

SASS'a trigonometrik fonksiyonları yazabilirsiniz. Daha fazla bilgi edinin.

Kendi işlevlerinizi yazmak

Trigonometride, birçok işlem fonksiyonlara dayanmaktadır. Her işlev diğerine dayanır. Örneğin, RAD () işlevi PI () kullanımını gerektirir. COS () ve SIN () fonksiyonları RAD () kullanımını gerektirir.

@Function Pi () (@return 3.14159265359;)

SASS / SCS'lerdeki yazma işlevleri, diğer dillerde yazma işlevlerine çok benzer.

POW () işlevini kullanma:

@Function Pow ($ number, $ exp) ($ değeri: 1; @if $ exp\u003e 0 (@For $ i 1 arasındadır $ exp ($ değeri: $ value * $ number;)) @else ise $ exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

RAD () işlevini kullanma:

@Function Rad ($ Açı) ($ Birim: Birim ($ Açı); $ Birimsiz: $ Açı / ($ Açı * 0 + 1); // Açısı (açı) değeri derecelerde belirtilirse ("° C) , radyanslara dönüştürmeniz gerekir. @if $ birim \u003d\u003d emek ($ birimsiz: $ birimsiz / 180 * pi ();) @return $ birimsiz;)

Teğet'i hesaplamak için, Tan () işlevinin Günah () ve COS () fonksiyonlarını uygulamak için ihtiyaç duyar.

26.07.2017

5 En İyi CSS Ön İşlemcileri 2017, iş akışınızı hızlandıracak.

CSS ön işlemciler, CSS programcılarının çalışmalarını daha heyecanlı hale getirmek için özel olarak tasarlanmıştır. Tekrarlanan kullanım olasılığı ile kolayca düzenlenebilir ve güvenilir kod yazmanıza izin verir.

Başka bir deyişle, CSS ön işlemcisi, yeni özelliklere sahip CSS'ye bir ektir: değişkenler, uzantılar, ithalat vb.

Bu makalede, 2017'nin en iyi 5 CSS ön işlemcisi hakkında konuşacağım.

01. SASS

SASS, büyük bir topluluğa ve güçlü işlevselliğe sahip en popüler ön işlemdir. Sadece yakutlu agrega çalışır ve öğrenmede çok basittir. Önyükleme, temel ve materyaller gibi ön uç çerçevelerin çoğu SASS kullanılarak oluşturulur.

SASS iki sözdizimi var:

• .Sass
• .scss

02. Stylus.

Stylus, dinamik CSS üretimi için başka bir büyük ön hazırlıktır. Kıvırcık parantezleri, virgülleri ve virgülle puanları düşürmek istiyorsanız, sizin için en iyi seçim olabilir. Stylus node.js üzerinde çalışır ve kurulumu ve kullanımı çok kolaydır. Doygunluk () gibi birçok özel işlevi vardır. Diğer lider derleyiciler tarafından sağlanan tüm işlevleri de kullanabilirsiniz.

03. daha az.

Daha az, ayrıca daha az .js veya daha az CSS olarak bilinen, bir başka önde gelen CSS ön işlemcisidir. Bu, değişkenler, gömülü stiller ve benzeri gibi standart fonksiyonlara ihtiyacınız varsa, mükemmel bir seçimdir. Bu JavaScript Kütüphanesi başlangıçta Ruby'de yazılmıştır.

• Ayrıca bakınız:

04. Stylecow.

Stylecow, NPM kullanarak yüklenebilecek düğüm üzerinde yazılı bir ön işlemdir. Kolayca eklentiler oluşturabileceğiniz güçlü bir API's sahiptir.

05. CSS-Crush

PHP programlayıcıları için mükemmel bir seçenek haline gelecek olan PHP üzerine inşa edilen ön işlemci, çünkü birçok platform üzerinde çalışıyor. CSS-Crush, ön işlemcinin her zamanki özelliklerine sahiptir (değişkenler, gömülü stiller vb.)

Sonuç

En iyi CSS ön işlemcisini arıyorsanız, ağda çok farklı seçenek bulacaksınız. Bence, yeni başlayanlar için en iyi seçenekler SASS ve STYLUS'dur.

Ve nihayetinde, bu geliştiriciler sakinleşir ve yeni gelenleri öldürmeyi durdurur!? Sonuna başa çıkmak için zamanım yoktu CSS.Ben de söylendi: "Tüm gerçek ayetler uzun zamandır önceliğe geçti. Peki, ne saf CSS. 2020'ün arifesinde!? "Ne yapmalı?

İlk olarak, geliştiriciler yeni teknolojileri icat etmekten asla vazgeçmeyeceklerdir. Ve profesyonel ayetler - onlara karşı minnettar. Stil Masa Dili Dili CSS., sitelerin ilkel olduğu zaman icat etti. Ancak yıllar geçti, siteler daha zor ve büyük oldu, ancak yerleşim yöntemleri aynı kaldı. Kodun benzer bölümlerini yazmak için penseler mühürlendi. Sitedeki rengi hızlı bir şekilde değiştirmek imkansızdı. Daha fazla yerleşim otomasyonu için bir ihtiyaç var ve ortaya çıktı. Ön İşlemciler CSS Kod. Ve bugün onlardan biri hakkında konuşacağız, Ön işlemler daha az.

Daha az ve vs kodunun derlenmesi

Tüm bunlar derlemek için gerekli olacak Az Kod kod editörüdür Vs kodu. ve genişleme Kolay daha az.. Nasıl çalışır?

1. Genişletme ile stil dosyası oluşturun .Daha az
2. Kaydettikten sonra otomatik olarak üretir .csss Aynı klasördeki dosya.

Değişiklikleri her kaydettiğinizde Az Dosyalar B tarafından derlenir. CSS. Dosyalar. Tarayıcılar henüz anlamayı öğrenmedi Az, ihtiyaçları var CSS. kod.

Değişkenler daha az.

Değişkenlerle bittiğimiz en sık kullanılan özellikler. Site genellikle tekrarlanan renkler ve font ailelerini kullanır. Tüm renkleri değişkenlere giriyoruz ve ardından kuralın renk kodu değil, değişken olduğunu değiştiririz. SORUN: "Şaka nedir? Yine de bir şey kaydetmeniz gerekmiyor, fark nedir?"

Ana özellik hızlı renk değiştirmedir. Renk, bir değişkende sadece bir kez değişir. Rengi bir değişkende değiştirmek, sitenin tüm sayfalarındaki rengi değiştirir. Bu çipten sadece biri zaten kullanmaya başlamak için yeterli Az. Bildirmek daha az değişkenler. Ve onlara ihtiyacımız olan değerleri tutuyoruz, değişkenlerin isimlerini anlamlı olarak veriyoruz.

@Primary: # 194eb4;
@Secondary: # f2b834;
@Success: # 4CB514;
@Black: # 000;
@white: #fff;

Şimdi biz yaptığımız gibi olağan kodu yazıyoruz. CSS., Ama değerler yerine değişkenleri değiştiririz.

Az

Div (
Dolgu: 0;

Siyah renk;
}

Kaydettikten sonra derlendi CSS. kod. Hiç dokunmayız CSS. Dosya, tüm işler yapılır Az dosya. Herhangi bir şekilde tekrarlayan özellikleri değişkenlere dönüştürebilirsiniz.

CSS.

Div (
Dolgu: 0;
Yazı tipi ailesi: Roboto, Sans-serif;
Renk: # 000;
}

Daha az karıştırın (karıştırılır)

Karışım Özellikler kümesini tekrar kullanmak için kullanışlıdır - çerçeveler, düğmeler, başlıklar. Farklı seçicilere gruplanmış bir özellik kümesi uygulanabilir.

Sitede farklı renk düğmelerinin benzer düğmeleri, ancak aynı yazı tipi özellikleri ile. Düğme oluşturma işleminin otomatikleştirilmesine yardımcı olan bir karışım oluşturun.

Button_font (

Metin dönüşümü: büyük harf;
Yazı tipi boyutu: 18px;
}

Karışımı, düğme seçicinin özelliklerinde karıştırırız.

Portfolio__button (
Dolgu: 15px 80px;
Renk: # 344258;
.button_font;
}

Çıktımda:

Portfolio__button (
Dolgu: 15px 80px;
Renk: # 344258;
Yazı Tipi ailesi: "Din Pro Bold";
Metin dönüşümü: büyük harf;
Yazı tipi boyutu: 18px;
}

Sembol ampersand

Seçicinin adının çoğaltılması yerine, Amper ve sembolünü kullanın.

Portfolio__item (
Konum: Göreceli;
Arka plan rengi: # 3C3C3C;
}
&: Hover (
Arka plan rengi: #ccc;
}
}

CSS.

.portfolio__item (
Konum: Göreceli;
Arka plan rengi: # 3C3C3C;
}
.portfolio__item: Hover (
Arka plan rengi: #ccc;
}

Medya istekleri daha az

Medya isteklerini doğrudan seçicinin içine kaydedebilirsiniz.

Az

.Üst Başlık (
Renk: # 344258;
Yazı tipi boyutu: 40px;

Dolgu: 0 20px;
@Media sadece ekran ve (maksimum genişlik: 320px) (
Yazı tipi boyutu: 22px;
}
}

CSS.

.Üst Başlık (
Renk: # 344258;
Yazı tipi boyutu: 40px;
Yazı Tipi ailesi: "Din Pro", Sans-Serif;
Dolgu: 0 20px;
}
@Media sadece ekran ve (maksimum genişlik: 320px) (
.Üst Başlık (
Yazı tipi boyutu: 22px;
}
}

Sonuç

Bu makale, teklif veren tüm olasılıkların% 25'ini açıklamaz. Az. Evet, gerekmez, makalenin amacı, yeni gelenlerin ön işlemcileri kullanmaya başlamaları için motivasyonudur. En basitten başlayarak, yavaş yavaş daha karmaşık doğru hareket edin.