sass mysql_总结Sass 变量

导读

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

变量用于存储一些信息，它可以重复使用。

Sass 变量可以存储以下信息：

字符串

数字

颜色值

布尔值

列表

null 值

Sass 变量使用 $ 符号：

$variablename: value;

以下实例设置了四个变量：myFont, myColor, myFontSize, 和 myWidth。

变量声明后我们就可以在代码中使用它：

Sass 代码：

$myFont: Helvetica, sans-serif;

$myColor: red;

$myFontSize: 18px;

$myWidth: 680px;

body {

font-family: $myFont;

font-size: $myFontSize;

color: $myColor;

}

#container {

width: $myWidth;

}

将以上代码转换为 CSS 代码，如下所示：

Css 代码：

body {

font-family: Helvetica, sans-serif;

font-size: 18px;

color: red;

}

#container {

width: 680px;

}

Sass 作用域

Sass 变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。

Sass 代码：

$myColor: red;

h1 {

$myColor: green; // 只在 h1 里头有用，局部作用域

color: $myColor;

}

p {

color: $myColor;

}

将以上代码转换为 CSS 代码，如下所示：

Css 代码：

h1 {

color: green;

}

p {

color: red;

}

!global

当然 Sass 中我们可以使用 !global 关键词来设置变量是全局的：

Sass 代码

$myColor: red;

h1 {

$myColor: green !global; // 全局作用域

color: $myColor;

}

p {

color: $myColor;

}

现在 p 标签的样式就会变成 green。

将以上代码转换为 CSS 代码，如下所示：

Css 代码

h1 {

color: green;

}

p {

color: green;

}