SASS Söz Dizimi ve SCSS Söz Dizimi

Bu makale, SASS ve SCSS söz dizimini açıklar.

SASS ve SCSS söz dizimleri arasındaki farkları detaylı olarak açıklayacak ve anlayışınızı derinleştirmek için somut örnekler sunacağız.

YouTube Video

SASS Söz Dizimi ve SCSS Söz Dizimi

SASS, CSS'nin yeteneklerini genişletmek için tasarlanmış bir stil sayfası dilidir. SASS'ın iki ayrı söz dizimi vardır. Bunlar SASS söz dizimi ve SCSS söz dizimidir.

SASS ve SCSS'ye Genel Bakış

SASS Söz Dizimi

SASS söz dizimi aşağıdaki gibi yazılır:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• Köşeli parantez {} veya noktalı virgül ; kullanmayan, girintilemeye dayalı bir söz dizimi.
• Kısa ve okunabilir kod yazmak için tasarlanmıştır.
• Dosya uzantısı .sass'tır.

SCSS Söz Dizimi

SCSS söz dizimi aşağıdaki gibi yazılır:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• CSS'ye benzer, köşeli parantez {} ve noktalı virgül ; kullanılan bir söz dizimi.
• Mevcut CSS kodlarıyla yüksek uyumlu, CSS'in doğrudan bir SCSS dosyasına dönüştürülmesine olanak tanır.
• Dosya uzantısı .scss'dir.

SASS ve SCSS Arasındaki Temel Farklar

Seçim Kriterleri

Hangisinin kullanılacağı proje ve takım ihtiyaçlarına bağlıdır.

• SASS söz dizimi ne zaman seçilir

  • SASS söz dizimi ile kısa ve temiz kod yazabilirsiniz.
  • Tüm ekip SASS söz dizimine alışkınsa uygun bir tercihtir.

• SCSS söz dizimi ne zaman seçilir

  • CSS ile uyumluluk önemliyse ve birçok takım üyesi CSS'e aşina ise SCSS söz dizimi daha uygun olacaktır.

SASS ve SCSS'in Avantajları

Aşağıdakiler, hem SASS hem de SCSS sözdiziminin ortak avantajlarıdır:.

1. Değişken Kullanımı

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• Değişkenleri kullanarak, bir stili bir yerde tanımlayabilir ve birden fazla yerde tekrar kullanabilirsiniz. Sadece değişken değerlerini değiştirerek tüm tasarımda değişiklikler uygulayabilir, böylece bakımı kolaylaştırabilirsiniz.

2. Mixins

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Mixin'ler, birden çok yerde tekrar kullanılan stilleri veya satıcı önekli kodları gruplamanıza ve bunları argümanlar kullanarak esnek bir şekilde uygulamanıza olanak tanır. Bu, kod tekrarlamasını azaltır ve bakımı iyileştirir.

3. İç içe Kurallar

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• İç içe yazım kullanarak, stilleri HTML yapısına uygun olarak hiyerarşik şekilde yazabilir ve ilgili kuralları gruplamayı kolaylaştırabilirsiniz. Bu hem kodun okunabilirliğini hem de bakımını iyileştirir.

4. Kalıtım

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• Kalıtımı kullanarak, ortak stilleri gruplayabilir ve tekrar kullanabilirsiniz. Bu, kod tekrarlamasını azaltır ve tutarlı bir tasarım sağlar.

Sonuç

SASS ve SCSS arasında seçim yapmak geliştiricinin tercihi ve projenin gereksinimlerine bağlıdır.

SASS söz dizimi sadeliğe odaklanırken, SCSS söz dizimi CSS uyumluluğunu vurgular. Her iki söz dizimi de güçlüdür ve CSS verimliliğini önemli ölçüde artırabilir.

Projeniz için en uygun seçeneği seçmek, stil dosyalarını daha verimli yönetmenizi sağlar.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video