ساس متغیر

Variables are a way to store information that you can use later.

Through Sass, you caninformationstored in variables, for example:

• 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 ਫਾਈਲ ਟਰਾਂਸਪਾਇਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਉਹ ਵਰਗਾਂ (myFont, myColor ਆਦਿ) ਵਰਤ ਕੇ ਆਮ CSS ਨੂੰ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ ਅਤੇ ਵਰਗਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ 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 关键字包含该文件。