Variabel Sass

Variabel Sass

Variabel adalah cara menyimpan informasi yang dapat digunakan kembali nanti.

Dengan Sass, Anda dapat menyiapkaninformasidisimpan dalam variabel, seperti contoh:

• string
• angka
• warna
• nilai boolean
• daftar
• null

Sass menggunakan simbol $ diikuti dengan nama untuk mendeklarasikan variabel：

Sintaks Variabel Sass：

$variablename: value;

Contoh di bawah ini mengumumkan 4 variabel：

• myFont
• myColor
• myFontSize
• myWidth

Setelah mengumumkan variabel, Anda dapat menggunakan variabel ini di tempat mana saja：

Syarat SCSS:

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

Jadi, ketika file Sass disinkronkan, dia akan menggunakan variabel (myFont, myColor, dll) dan mengeluarkan CSS biasa beserta nilai variabel yang ditempatkan di dalam CSS, seperti berikut：

Output CSS:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  dalam aturan, dan hanya di sana yang dapat digunakan!
}
#container {
  width: 680px;
}

Rentang Variabel Sass

Variabel Sass hanya tersedia di tingkat penyanggaan yang didefiniskannya。

Silakan lihat contoh di bawah ini：

Syarat SCSS:

$myColor: merah;
h1 {
  $myColor: green;
  warna: $myColor;
}
p {
  warna: $myColor;
}

<p> $myColor: hijau;

Warna teks di dalam tanda panah akan menjadi merah atau hijau? Merah saja! Definisi lain, $myColor: hijau; berada di <h1>

Jadi, output CSS akan menjadi:

Output CSS:

h1 {
  warna: hijau;
}
p {
  dalam aturan, dan hanya di sana yang dapat digunakan!
}

warna: merah;

Bagus, ini adalah tingkat kDefault dari variabel.

dengan Sass !global !global Atur ulang tingkat kDefault untuk variabel. Hal yang bijaksana adalah untuk menggunakan

!global menunjukkan bahwa variabel adalah global, yang berarti dapat diakses di semua tingkat.

Lihat contoh di bawah ini (yang sama seperti di atas, tetapi tambahkan !global):

Syarat SCSS:

$myColor: merah;
h1 {
  $myColor: hijau !global;
  warna: $myColor;
}
p {
  warna: $myColor;
}

Sekarang <p> Warna teks di dalam tanda panah akan menjadi hijau!

Jadi, output CSS akan menjadi:

Output CSS:

h1 {
  warna: hijau;
}
p {
  warna: hijau;
}

Petunjuk:Harus didefinisikan di luar aturan apapun global variabel. Hal yang bijaksana adalah untuk mendefinisikan semua variabel global di berkas sendiri, yang dinamai "_globals.scss", dan digunakan @include Kata kunci termasuk berkas ini.