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