ساس متغیر

مقادیر روشی برای ذخیره اطلاعات است که می‌توانید در آینده از آن‌ها استفاده کنید.

با استفاده از Sass، می‌توانیداطلاعاتدر مقادیر ذخیره می‌شوند، به عنوان مثال:

• رشته
• عدد
• رنگ
• بولین
• لیست
• null

Sass از نشانه $ همراه با نام برای اعلام مقادیر استفاده می‌کند:

نحوه استفاده از مقادیر Sass:

$نام_متغیر: مقدار;

در مثال زیر 4 مقادیر اعلام شده است:

• myFont
• myColor
• myFontSize
• myWidth

پس از اعلام مقادیر، می‌توانید این مقادیر را در هر جایی از کد استفاده کنید:

SCSS 语法：

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  خانواده فونت: $myFont;
  اندازه فونت: $myFontSize;
  color: $myColor;
}
#container {
  عرض: $myWidth;
}

بنابراین، وقتی فایل Sass به عنوان CSS ترجمه می‌شود، از مقادیر (myFont، myColor و غیره) استفاده می‌کند و CSS معمولی و مقادیر متغیر قرار داده شده در CSS را تولید می‌کند، مانند:

CSS 输出：

body {
  خانواده فونت: Helvetica, sans-serif;
  اندازه فونت: 18px;
  color: red;
}
#container {
  عرض: 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 کیواژ کا شامل فائل