Sass nedir?
Sass (Söz dizimsel Müthiş Stil Sayfaları anlamına gelir) CSS'nin bir uzantısıdır. CSS'nin yapabileceklerini gerçekten değiştirmez, aniden Adobe Photoshop karışım modlarını veya herhangi bir şeyi kullanamazsınız - ancak CSS yazmayı çok daha kolay hale getirir.
Saas, tamamen CSS uyumlu bir söz dizimiyle değişkenler, iç içe geçmiş kurallar, mixins, satır içi içe aktarma, renk ve diğer değerleri işlemek için yerleşik işlevler gibi çeşitli özellikler içerir.
Resmi web sitesi: http://sass-lang.com
Neden Sass?
Basamaklı Stil Sayfaları (CSS), W3C tarafından 1996'da ilk kez kabul edildiklerinden beri uzun bir yol kat etti. Web geliştiricilerinin görüntüleri dilimlemek ve düzen için sürdürülemeyen iç içe geçmiş tablolar kullanmak zorunda kaldıkları günler çoktan gitti (ve iyi kurtulma). Ancak CSS3, sınırlı işlevsellik ve sivilceli uygulamaların kötü eski günlerini hatırlayanlarımız için harika.
Önemsiz herhangi bir web sitesi, birden fazla tarayıcıyı desteklemek için tekrarlayan kod ve çoklu kural bildirimleri gerektirir. Size bir örnek vereyim: Müşteriniz site için birincil renk ve iki vurgu içeren basit bir renk şeması seçti:
Ve sonra muhtemelen değerler üzerindeki varyasyonları bulmanız gerekecektir. Çabuk, # 434433'ten% 20 daha açık renk için onaltılı kod nedir?
Büyük olasılıkla devre dışı menü öğeleri için buna ihtiyacınız olacaktır. Tasarımcı, devre dışı bırakılan değerin% 20 yerine% 15 olması gerektiğine karar verdiğinde, hesaplamayı tekrar yapmanız ve kullanıldığı her yerde değiştirmeniz gerekir. CSS3, CCS1'den daha işlevsel olabilir, ancak bu, vegan diyetindeki bir pop yıldızından daha çirkin, sıkıcı ve daha yüksek bakım gerektirir.
# 434433'ü bazilyon kez yazmak ve devre dışı bırakılan değer yüzdesi değiştiğinde
# 76785A'yı
# 696B50 olarak değiştirmek yerine şunu yazabilirsiniz:
Sass Örneği
/*define a variable for the primary color*/
$primary : #434433;
/*use the lighten() function to determine the disabled value, and define it as a variable*/
$disabled: lighten($primary, 20%);
.menu-item {
color: $primary; /* use primary variable */
.disabled-menu-item {
color: $disabled;/* use disabled variable */
}
Şimdi birincil renk değişirse, yalnızca tek bir yerde değiştirirsiniz. Tasarımcı, devre dışı değeri için% 20 yerine% 15 kullanmaya karar verirse, değeri yeniden hesaplamanız gerekmez ve yalnızca tek bir yerde değiştirirsiniz. Daha da iyisi, Sass'ın çalışma şekli nedeniyle (bir sonraki bölümde bundan bahsedeceğiz), tüm değişkenlerinizi tek bir dosyada bildirebilirsiniz (konvansiyona göre, _variables.scss adlı bir dosya) ve @ her stilde ekleyin fazladan bir http araması yapmadan yazdığınız sayfa. Ne kadar tatlı?
Sass Nasıl Çalışır?
Sass kodunu doğrudan tarayıcıya gönderemezsiniz; onunla ne yapacağını bilemez. Bunun yerine, Sass kodunu, aktarma olarak bilinen bir işlem olan standart CSS'ye çevirmek için Sass ön işlemcisini kullanmanız gerekir . Transpilasyon derlemeye çok benzer, ancak insan tarafından okunabilen kaynak kodundan makine tarafından okunabilen nesne koduna çevirmek yerine, insan tarafından okunabilir bir dilden diğerine, bu durumda Sass'tan CSS'ye çevirir. ES2015'i aşağı akış tarayıcılarıyla uyumlu JavaScript'e çeviren web geliştirmede kullanılan başka bir transpiler olan Babel () 'e aşina olabilirsiniz. Farklı diller, aynı süreç.
Transpilasyon işlemi sırasında neler olup bittiğinden endişelenmeyin. Mesleğimizdeki "çok işe yarayan" (çok az) şeylerden biri. Anlamanız gereken tek şey, transpiler'e bazı Sass kodu vermek ve bazı CSS kodlarını geri almaktır.
sass nasıl çalışır
Sass'tan CSS'ye geçiş kolaydır. Aşağıdaki Sass kodu örneğini düşünün.
Sass:
/*define a variable for the primary color*/
$primary : #434433;
/*use the lighten() function to determine the disabled value, and define it as a variable*/
$disabled: lighten($primary, 20%);
.menu-item {
color: $primary;
.disabled-menu-item {
color: $disabled;
}
Şimdi, Saas transpiler yukarıdaki Sass kodu için aşağıdaki CSS'yi oluşturacak.
CSS
.menu-item {
color: #434433;
.disabled-menu-item {
color: #76785A;
}
Gördüğünüz gibi, değişkenler CSS'deki değerlerle değiştirilir. Böylece, Sass uygulamanız için CSS dosyaları oluşturmayı ve korumayı kolaylaştırır.
