详解Sass 变量

Sass(Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。

详解Sass 变量

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

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

  1. 字符串
  2. 数字
  3. 颜色值
  4. 布尔值
  5. 列表
  6. 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;
}

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

1ad5ad6eddc451da964a8888a6fd5266d0163210
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部