详解Sass变量

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

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

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;
}

网站名称：详解Sass变量
链接分享：http://www.shufengxianlan.com/qtweb/news4/440104.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联