SASS'ta İç İçe Yazım

Bu makale, SASS'ta iç içe yazımı açıklar.

SASS'ta iç içe yazımı, anlamanızı pekiştirecek örnek kodlarla adım adım açıklayacağız.

YouTube Video

SASS'ta İç İçe Yazım

SASS, verimli stil oluşturma için birçok özellik sunan CSS için geliştirilmiş bir stil sayfası dilidir. Bunların arasında, iç içe yazım özellikle CSS'nin hiyerarşik yapısını görsel olarak göstermek için çok faydalı bir özelliktir.

İç İçe Yazımın Temelleri

SASS'ta, CSS seçicilerini hiyerarşik bir yapıda yazarak kodunuzu görsel olarak düzenleyebilirsiniz. Örneğin, aşağıdaki CSS kodunu iç içe yazım ile nasıl yeniden yazabileceğinizi görelim.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

SASS kullanarak, bu kodu aşağıda gösterildiği gibi iç içe yazım ile daha kısa şekilde yazabilirsiniz.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}

• Bu kod, navigasyon menüsü stillerini kısaca ve hiyerarşik olarak tanımlamak için SASS'taki iç içe yazım özelliğini kullanır. İç içe yazım kullanılarak, ebeveyn-çocuk ilişkileri görsel olarak daha net hale gelir ve okunabilirlik artar.

Ebeveyn Seçicilere Referans Verme (&)

İç içe stillerde ebeveyn seçiciye referans vermek gerektiğinde & kullanılır. Bu şekilde, belirli durumlara veya modifikasyonlara sahip seçiciler oluşturabilirsiniz.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}

• Bu kod, SCSS'te .button seçicisi için :hover ve :active durumlarını tanımlamak amacıyla & kullanır.

Oluşturulan CSS

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Medya Sorgularını İç İçe Yazmak

SASS'ta medya sorgularını da iç içe yazabilirsiniz. Bu, stillerinizin alakalı kalmasını sağlarken duyarlı tasarım uygulamanıza olanak tanır.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}

• Bu kod, .container sınıfı içinde bir medya sorgusunu iç içe yazarak ekran boyutuna göre genişliği değişen duyarlı bir tasarım sağlar.

Oluşturulan CSS

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

İç İçe Yazım Hakkında Dikkat Edilmesi Gerekenler

Aşırı iç içe yazım, kodunuzu çok katmanlı hale getirip bakımı zorlaştırabilir. Aşağıdaki örnekteki gibi derin iç içe yazımdan kaçınmalısınız.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Bu tür kodlar çok derin iç içe geçmiş durumda, bu nedenle aşağıdaki gibi yeniden düzenlenebilir.

1.header .nav ul li a {
2    color: red;
3}

Pratik Örnek: Navigasyon Çubuğu

Aşağıda, SASS iç içe yazım kullanılarak yapılmış bir navigasyon çubuğu stil örneği bulunmaktadır.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}

• Bu kod, navigasyon çubuğu içindeki liste ve bağlantıların stillerini, hover efektleri dahil olmak üzere, SASS iç içe yazım ile düzenler ve tanımlar.

Oluşturulan CSS

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Özet

SASS'taki iç içe yazım özelliği, CSS'nin hiyerarşik yapısını özlü bir şekilde tanımlamak ve okunabilirliği artırmak için güçlü bir araçtır. Ancak, aşırı iç içe yazımdan kaçınmak ve kodunuzu doğru bir şekilde düzenlemek önemlidir.

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

YouTube Video