PembolehUbah Sass

PembolehUbah Sass

Pemboleh ubah adalah cara menyimpan informasi yang dapat digunakan kembali nanti。

Dengan Sass, Anda dapat menempatkaninformasidisimpan dalam pemboleh ubah, seperti berikut：

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

Sass menggunakan simbol $ diikuti dengan nama untuk menyatakan pemboleh ubah：

Sintaks pemboleh ubah Sass：

$variablename: value;

Contoh di bawah ini menyatakan 4 pemboleh ubah：

• myFont
• myColor
• myFontSize
• myWidth

Setelah menyatakan pemboleh ubah, Anda dapat menggunakan pemboleh ubah ini di mana saja：

Sintaks 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 pemboleh ubah (myFont, myColor dsb) dan mengeluarkan CSS biasa serta nilai pemboleh ubah yang ditempatkan di CSS, seperti berikut：

Output CSS:

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

Range pemboleh ubah Sass

Pemboleh ubah Sass hanya tersedia di tingkatan pengecatan yang didefiniskannya。

Lihat contoh di bawah ini：

Sintaks SCSS:

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

<p> Warna teks di dalam tag adalah merah atau hijau? Adalah merah!

Definisi lain, $myColor: hijau; berada di <h1> dalam dalam peraturan, dan hanya di sana sahaja yang boleh digunakan!

Jadi, output CSS akan menjadi:

Output CSS:

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

Baiklah, ini adalah tingkahlaku kawasan pembolehUbah default.

Gunakan Sass !global

Boleh digunakan !global Tukar pengawalan kawasan pembolehUbah default.

!global menunjukkan bahawa pembolehUbah adalah global, ini bermakna ia boleh diakses di semua tahap.

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

Sintaks SCSS:

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

Sekarang <p> Warna teks di dalam tag akan adalah hijau!

Jadi, output CSS akan menjadi:

Output CSS:

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

Pesan:Harus didefinikan di luar setiap peraturan untuk pembolehUbah global. Pilihan cerdas adalah untuk mendefinikan semua pembolehUbah global di fail sendiri, yang dinamakan "_globals.scss", dan menggunakan @include Kata kunci mengandungi fail ini.