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 .scss
uzantı 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.json
VS 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 Sass
düğ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