Şimdiye kadar Sass'ı ve “Onu kullanmaya başlamak için gerçekten ihtiyacınız var” diye bir şey duyduğuna eminim.
Yeni bir araç öğrenmek, bunu yapmak için zamanın emilmesini ve bulunmasını imkansız hale getirebilir, ancak bazen endüstrimizi değiştiren ve görmezden gelmek için çok iyi bir araç ortaya çıkar.
Web sayfalarımız ve uygulamalarımız daha karmaşık hale geldikçe, stil sayfalarımız daha büyük ve daha da zorlaşıyor. Sass gibi CSS önişlemcileri, stil sayfalarımızı kısa tutarak ve kodumuzu modülerleştirmemize izin vererek, normal CSS'de henüz mevcut olmayan bir dizi özellik sunarken bize yardımcı oluyor.
Bu ekstra özellikler onları kullanmak için gerçekten eğlenceli hale getirir! Şimdi böyle görünen bir şey görmüş olabilirsiniz:
$i: 6;@while $i > 0 {.item-#{$i} {genişlik: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
ve düşünce, “Whatttttttttttt? Teşekkürler ama normal CSS'imi koruyacağım. ”
Kabul ediyorum, göz korkutucu görünüyor ve bazı insanlar gerçekten çok çılgınlar. karmaşık şeyler Sass'la birlikte, herkesin onu kullanmaya başlayabileceğini ve bir gün içinde aldığınız kazanımların Sass'a iman edeceğini söylemek için buradayım.
Sass'ın bir proje için kurulması, bu makalenin kapsamının biraz ötesindedir, ancak yükleme nispeten kolaydır ve Sass web sitesinde Talimatlar Linux, Mac veya PC için. Harika olan şey, kurulduktan sonra sahip olduğunuz CSS dosyasını alabilir ve yeniden adlandırabilirsiniz. .scss bunu bir Sass dosyası yapmak.
Tüm düzgün biçimlendirilmiş CSS geçerli Sass!
Bu, her zaman olduğu gibi stillerinizi yazmaya devam ederken Sass'i kullanmaya başlayabileceğiniz ve konfor düzeyiniz büyüdükçe daha fazla özellik ekleyerek başlayabileceğiniz anlamına gelir. Bu doğru insanlar, sadece aynı ol '. aynı ol 'ama şimdi elinizde olan beş harika kazanç var:
Yine ana başlık rengi nedir? Yazı tipi kümesini nasıl yazarım? CSS'yi kaç kez yazıyorsunuz ve bir değer için önceki stillerinizi araştırıyor muydunuz ya da onaltılı rengi bulmak için yine renk damlalığını kırmak zorunda kaldınız mı?
Sass, stil sayfanızda yeniden kullanmak istediğiniz bilgileri depolamanın bir yolu olarak değişkenler sağlar. Artık bu renk değerini veya uzun font yığınını hatırlanması kolay bir şey olarak saklayabilirsiniz. Bir değişken bildirme şekliniz dolar işareti ile $ adını takip etti. Bu isim, olmasını istediğin her şey olabilir. Sonra bir kolon yazıyorsun : ardından değer ve yarı-kolon ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Şimdi bu değerlerden birini kullanmak istiyorsanız, bunun yerine sadece değişkeni kullanabilirsiniz.
.mySelector { font-family: $mainFont; color: $mainColor; }
Harika, değil mi? Bu tek özellik, CSS'yi yazarken çok fazla zaman kazandıracağı için yüklemeye değer. Muhtemelen CSS'ye girmesi çok güzel spec ama kim kullanabileceğimizi kim bilir? Şansımız var, Sass ile beklemek zorunda değiliz.
Şimdi kendinize “CSS'nin @import'u var, o kadar da havalı değil” diyor olabilirsiniz ve haklısınız fakat CSS ve Sass sürümleri önemli ölçüde farklıdır. Normal CSS'de @import diğer stil sayfalarında çeker, ancak bunu başka bir HTTP isteği yaparak yaparız, genellikle kaçınmak istediğimiz bir şey. Bu nedenle, daha önce @import kullanmamış olabilirsiniz. Öte yandan Sass, CSS'yi derlemeden önce bu dosyayı çekecek bir ön işlemcidir (ön vurgu).
Sonuç, bir HTTP isteği tarafından işlenen bir CSS sayfasıdır. Bunun anlamı, css'yi daha küçük ve daha bakımı yapılabilir parçalara ayırabilmeniz ve yine de tarayıcıya yalnızca bir sayfa sunabilmenizdir. Düğme üzerindeki metni düzeltmek mi gerekiyor? Uygun düğme stillerini arayan başka stil sayfaları yok. Sadece düğmeyi kısmi aç ve değişiklikleri yap.
Kısmi nedir? Tam olarak neye benziyorlar. Diğer Sass dosyalarına ekleyebileceğiniz küçük CSS parçacıklarını içeren kısmi Sass dosyalarıdır. Bir isimle izleyen bir alt çizgi kullanarak adlandırılır. _myFile.scss . Alt çizgi Sass'in dosyanın sadece kısmi bir dosya olduğunu ve CSS'ye derlenmemesi gerektiğini bilmesini sağlar. Bu kısmi içe aktarmak için dosyanıza @import eklemeniz yeterlidir:
@import 'partials/myPartial';
Bu yüzden partials adlı bir klasörde bulunan _myPartial.scss içe aktarıyorum . Alt çizgi veya dosya uzantısını eklemeniz gerekmez. Sass, hangi dosyayı kastettiğini bilecek kadar akıllı. Parçacıkların kullanımı, kodumuzu modüler hale getirmemizi ve daha taşınabilir ve bakımı daha kolay hale getirmemizi sağlar.
Sass, CSS partisine kadar fonksiyonları getiriyor. Biliyorum, herkes bir programcıdır ve bir fonksiyon kavramı kafanızın üzerinde biraz farklı olabilir, ama endişelenmeyin, çok fazla karmaşık olmayan bir çok kullanışlı özellik ekleyin. Renklere gelince, onları manipüle etmek için kullanışlı birkaç tane var ama üç kişi yeni başlayan insanlar için harika, kolay kazanımlar olarak öne çıkıyor. Onları nasıl kullandığımıza bakalım.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
Sözdizimi oldukça düz ileri. Yukarıda gördüğünüz üç işlevde, her biri için iki argümanımız var. Birincisi, manipüle etmek istediğimiz renk. Bu, onaltılık, RGB veya uygun CSS olan herhangi bir renk formatı olabilir. Hatta bir değişken olabilir. İkincisi, o rengi değiştirmek istediğimiz miktardır. % 10 daha koyu,% 5 oranında açıklaştırın, alfa değerini 0.6 olarak ayarlayın. Bu işlevin sonucu, derlenmiş CSS'de ayarlanan değerdir. Aşağıda aşağıda işimizi görüyorsunuz
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Umarım bunun nasıl faydalı olabileceğini şimdiden görebilirsiniz. Oldukça soğuk bir renk kontrastı eklemek için bu üç işlevi kullanmanın bir düzine yolu vardır ve bunlar normalde bir renk değerinin girebileceği her yerde kullanılabilir. Bu üç buzdağının sadece ucu. Kullanılabilecek çok daha fazla renk işlevi ve birçok yaratıcı yol vardır.
CSS'deki bazı şeyler yazmak biraz yorucudur. Mixinler, sitemiz genelinde yeniden kullanabileceğimiz CSS bildirimleri grupları oluşturur. Satıcı önekleri gerektiren CSS3 stilleri, bir karıĢtırmanın ne zaman kullanılacağına dair mükemmel bir örnektir. Aynı özelliği tekrar tekrar yazmak yerine, bir kez bir mixin yazıp istediğimiz zaman bu miksi çağırıyoruz. Bir karışımı ilan etmek için @mixin Anahtar kelime. Daha sonra ona bir isim verdik ve stilleri bizim gibi kaşlı ayraçlar arasında uygulayacağız: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Argümanlar daha esnek hale getirmek için karışıma bile aktarılabilir. Karışımı kullanmak için sadece @include Anahtar kelime.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Yukarıdaki örnekte gördüğünüz gibi, @include daha sonra mikserin adını ve ardından parantez içindeki tüm argümanlar. Bunun seni ne kadar zaman kazandıracağını düşün. Neden herkes bunu kullanmıyor?
Bu araçlar harikaydı ama en iyisini en iyi şekilde kurtardım. @extend Bir CSS özelliğini bir seçiciden diğerine paylaşmamıza izin veren en kullanışlı özelliklerden biridir. Bir modal pencerede bir kabul ve reddet düğmesi gibi bir çift düğmeyi düşünün. Her ikisi de düğmeler olduklarından, muhtemelen aynı stilin çoğunu paylaşacaklar ancak reddetme düğmesinin öne çıkması için kırmızı bir arka planı olacak. Sass ile tüm düğmeler için varsayılan stilleri yazıp, bu stilleri kırmızı arka planı ekleyeceğimiz reddetme düğmesine “uzat”.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Dostum, kendini tekrarlamak zorunda olmamak ne kadar muhteşem? Bu sadece stillerimizin modülerleştirilmesini teşvik etmekle kalmaz, aynı zamanda düğmelerden düğmelerden çıkma stilleri riskini de azaltır. Bu büyük bir zaman kazanmak kazanmak! Bunu sitenin tüm stilleri için çoğaltın ve CSS yazmak için önemli ölçüde azaltılmış bir zaman dilimine sahibiz.
Heck, kurtardığımız her zaman belki Sass'in daha karmaşık yönlerini öğrenebiliriz.
Umarım bu harika aracı bir atış yapmaya ikna ettim ve üretkenliğinizi artırabilecek bazı özellikleri resmettim. Gerçek şu ki, bu makaleyi yarın tekrar yazabilirim ve paylaşmak için beş tane daha temiz özellikim var. Sadece bu harika! Sass (ve diğer önişlemciler) burada kalmak için burada bir iyilik yapın ve kullanmaya başlayın. Twitter ve Web üzerinde bu kaynakları daha fazla araştırmak isteyenler için:
Twits:
Webs:
Ve eğer Güney Florida Tri-ilçesi bölgesinde iseniz bize katılın Güney Florida Sass Meetup .