Sass Değişkenleri

Sass Değişkenleri

Değişken, daha sonra tekrar kullanabileceğiniz bilgi saklama yöntemidir.

Sass ile,informationörneğin, değişkenlerde saklanır:

• string
• number
• color
• boolean
• list
• null

Sass, değişkenleri tanımlamak için $ işaretini ve adını kullanır:

Sass değişken grameri:

$variablename: value;

Aşağıdaki örnek 4 değişken tanımlar:

• myFont
• myColor
• myFontSize
• myWidth

Değişkenleri tanıttıktan sonra, bu değişkenleri herhangi bir yerde kullanabilirsiniz:

SCSS Güçlüğü:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
}

Bu yüzden, Sass dosyası derlenirken, değişkenleri (myFont, myColor vb.) kullanır ve aşağıdaki gibi normal CSS ve CSS içindeki değişken değerlerini çıktı verir:

CSS Çıktısı:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
#container {
  width: 680px;
}

Sass değişken aralığı

Sass değişkenleri sadece tanımlandıkları iç katman seviyesinde kullanılabilir.

Aşağıdaki örneği göz önünde bulundurun:

SCSS Güçlüğü:

$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

<p> Etiket içeriğindeki metin rengi kırmızı mı yeşil mi? Kırmızıdır!

Diğer bir tanım, $myColor: green; şu konumda bulunur <h1> kurallar içinde ve sadece orada kullanılabilir!

Bu yüzden, CSS çıktısı şu şekilde olacaktır:

CSS Çıktısı:

h1 {
  color: green;
}
p {
  color: red;
}

İyi, bu değişken etkisi alanının varsayılan davranışı budur.

Sass !global kullanarak

kullanılabilir !global Değişken etkisi alanının varsayılan davranışını değiştiren anahtar kelimedir.

!global değişkenin genel olduğunu gösterir, bu da tüm seviyelerde erişilebilir anlamına gelir.

Aşağıdaki örneğe bakın (yukarıdaki ile aynı, ancak ekledi) !global）：

SCSS Güçlüğü:

$myColor: red;
h1 {
  $myColor: green !global;
  color: $myColor;
}
p {
  color: $myColor;
}

Şimdi <p> Etiket içeriğindeki metin rengi yeşil olacaktır!

Bu yüzden, CSS çıktısı şu şekilde olacaktır:

CSS Çıktısı:

h1 {
  color: green;
}
p {
  color: green;
}

İpucu:Düzenli kuralların dışında genel değişkenler tanımlanmalıdır. Akıllıca bir şey, tüm genel değişkenleri kendi dosyalarında tanımlamak, "_globals.scss" adını vermek ve @include Bu dosya içeren anahtar kelimeler içerir.