13.3. Sass variable

Release time ： 2025-10-25 13:32:21 UTC      

Page Views: 27 views

Variables are used to store some information and can be reused.

Sass variables can store the following information:

  • String

  • Figures

  • Color value

  • Boolean value

  • List

  • Null value

Sass variable use $ symbol:

$variablename: value;

The following example sets four variables: myFont , myColor , myFontSize , and myWidth .

After the variable is declared, we can use it in the code:

13.3.1. Sass code: 

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

Convert the above code to CSS code, as follows:

13.3.2. Css Code: 

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

Sass scope

The scope of a Sass variable can only have an effect at the current level, as follows the h1 style of the green , p tag is for red .

Sass code:

$myColor: red;
h1 {
  $myColor: green;   // Only useful in h1, local scope
  color: $myColor;
}
p {
  color: $myColor;
}

Convert the above code to CSS code, as follows:

Css Code:

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

13.3.3. !global

That’s for sure Sass , we can use the !global keyword to set the variable is global:

Sass code

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

Now the p style of the label becomes green .

Convert the above code to CSS code, as follows:

Css code

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

Note: all global variables are generally defined in the same file, such as: \_globals.scss and then we use the @include to include the file.

Article link ： 13.3. Sass variable
Web框架  946

《地理信息系统原理、技术与方法》  97

最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。

WEB基础  289