Daha gelişmiş kavramlar için Sass Belgelerine bakın . Kendi başına CSS eğlenceli ve etkili olabilir, ancak belge büyüdükçe ve daha fazla kod yazdıkça, bakımı zorlaşır. Sass çok daha büyük projelerin bakımını kolaylaştırır.
Ön şartlar
Temel HTML ve CSS
Scss vs sass
Sass (Synthetically Awesome Style Sheet), sass'ın daha eski bir sürümüdür ve bir .scssuzantı kullanır .
Scss (Sassy Scss) ise Sass'ın şu anki sürümüdür.
Scss, tıpkı JavaScript gibi farklı kod bloklarını göstermek için süslü parantez kullanır, Sass ise Python gibi girinti ve tekdüze sekme boyutu kullanır.
Sass - Sözdizimsel Müthiş StyleSheets: .sass uzantısı SCSS - Sassy CSS: .scss uzatma // Scss Syntax (Curly Brackets) body { margin: 0; padding: 0; box-sizing: border-box; header { height: 50px; font-size: 30px; p { line-height: 10px; letter-spacing: 3px; &:hover { color: white; background: #000000; } } } } // Sass Syntax (Indented Blocks) body margin: 0; padding: 0; box-sizing: border-box; header height: 50px; font-size: 30px; p line-height: 10px; letter-spacing: 3px; &:hover color: white; background: #000000;Scss'i Css'e Derleme
Tarayıcının stil dili CSS'dir. Tarayıcı CSS'yi anlar ancak Scss'i anlamaz. Bununla birlikte, tarayıcının anlayabilmesi için scss kodumuzun css olarak derlenmesi gerekir.
SCSS'nin temiz css koduna derlenmesinin birçok yolu vardır.
Sass Ruby yazılmıştır .
Scss Kodunu Derleme Yolları
Sass'ı Ruby ile komut satırından yükleme Koala, Live Reload ve Hammer gibi derleme yazılımlarını yükleme Global olarak npm kullanarak yükleme ve komut satırını kullanarak sass kodunu css'e derleme VS Kod UzantılarıBu öğreticide, VS Kod Uzantısını kullanacağım, nasıl ayarlayacağınızı zaten biliyorsanız bölümü atlamaktan çekinmeyin.
VS Kodu İçin Sass Kurulumu
Var Visual Studio Kod yüklü. Uzantılar paneline gidin ve live sass compiler Uzantıyı Ritiwck Dey ile tıklayın ve yükleyin. ( Uzantıyı Yüklemek için VS Kodunu Yeniden Yükle ) Uzantı yüklendikten sonra, kaydedilecek konumu ve dosya uzantısını ayarlamanız gerekir.Yer ve uzantı kişisel bir tercihtir.
settings.jsonVS Kodu'nda dosya arayın . Ayarlarda bulunabilir. Kaydetme konumunuzu ve uzantılarınızı etkinleştirmek ve değişiklikleri kaydetmek için aşağıdaki JSON kodunu ekleyin. "liveSassCompile.settings.formats":[ // My Settings { "format": "expanded", "extension":".css", "savePath":"/css", }, // You can also use this for production. // It reduces the css file size { "format": "compressed", "extension":".min.css", "savePath":"/css", } ] VS Kodunun altında bir Watch Sassdüğme gösterilir. Sass'ınızı css'ye derlemek için tıklayın.Düğme tıklatıldıktan sonra, uzantı her kaydetmede scss dosyasını css olarak yeniden derler .
Sass Sözdizimi
Hemen hemen her geçerli css geçerli sass. Herhangi bir sass özelliği olmayan bir sass dosyasına geçerli bir css yazarsanız, herhangi bir değişiklik yapmadan aynı geçerli css ile yeniden derler
Sass Özellikleri
Değişkenler @ İf, @each ve @for gibi Akış Bildirimlerini Kontrol Edin Yerleştirme ve İnterpolasyon Modüller ve Partials Karışımlar ve Fonksiyonlar miras Operatörler ve Operasyonlar