Sass ສະເພາະ

ພະລັງງານນີ້ເປັນວິທີການບັນຍາວັດຈຸດຂໍ້ມູນທີ່ທ່ານສາມາດນຳໃຊ້ຄືກັນຫຼັງຈາກນັ້ນ:

ພາຍໃນ Sass ທ່ານສາມາດinformationບັນຍາວັດຈຸດນີ້:

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

Sass ນຳໃຊ້ $ ທີ່ຕາມນາມມາຖະແຫຼງພະລັງງານ:

Sass ຄຳວັດຖຸພະລັງງານ:

$variablename: value;

ຄວາມຈຸດລາຍລະອຽດນີ້ຖະແຫຼງພະລັງງານ 4 ລັກສະນະ:

• myFont
• myColor
• myFontSize
• myWidth

ຫຼັງຈາກຖະແຫຼງພະລັງງານໄດ້ທັງໝົດພວກເຂົາທັງໝົດສາມາດນຳໃຊ້ຢູ່ທຸກລະດັບ:

SCSS 语法：

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

ຍ້ອນນັ້ນຫຼັງຈາກບົດຂໍ້ Sass ໄດ້ຖືກປ່ຽນການເປັນ CSS ທີ່ປະກອບດ້ວຍພະລັງງານ (myFont, myColor ແລະອີກ) ແລະພະລັງງານຄວາມພິຈາລະນາທີ່ປະກອງຢູ່ໃນ CSS ຄື:

CSS 输出：

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

Sass ພະລັງງານຫຼາຍ

Sass ພະລັງງານຫຼາຍພຽງແຕ່ລະລະດັບທີ່ພົບກັບພະລັງງານ

ບັນຍາວັດຈຸດລາຍລະອຽດນີ້

SCSS 语法：

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

标签内的文本颜色是红色还是绿色？是红的！

另一个定义，$myColor: green; 位于

规则内，并且只在那里可用！

所以，CSS 输出将是：

CSS 输出：

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

好的，这是变量作用域的默认行为。

使用 Sass !global

可以使用 !global 开关覆盖变量作用域的默认行为。

!global 指示变量是全局的，这意味着它可以在所有级别上被访问。

请看下面的例子（与上面相同，但添加了 !global）：

SCSS 语法：

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

现在

标签内的文本颜色将是绿色！

所以，CSS 输出将是：

CSS 输出：

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

提示：应该在任何规则之外定义全局变量。明智的做法是在其自己的文件中定义所有全局变量，名为 "_globals.scss"，并使用 @include ຄຳສັບປະກາດທີ່ບັນຈຸພາຍໃນບັນດາບົດສັດ