www.8029.com-首页

教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

传智教育|传智播客

一样的教育,不一样的品质

全国校区

 

Sass语言如何声明和引用变量?

更新时间:2021年05月12日14时06分 来源:传智教育 浏览次数:

传智教育-一样的教育,不一样的品质

Sass是一种成熟且稳定的CSS扩展语言,它有两种语法格式。一种是最早的Sass语法格式,被称为缩进格式(Indented Sass),通常简称“Sass”,是一种简化格式。这种格式以“.sass”作为扩展名。

另一种语法格式是SCSS(SassyCSS),这种格式仅在CSS3语法的基础上进行拓展,所有CSS3语法在SCSS中都是通用的,同时加入Sass的特色功能。这种格式以“.scss”作为扩展名。本节基于SCSS格式讲解Sass的变量声明和变量引用。

1. 变量声明

Sass使用“$”符号来标识变量,如$highlight-color和$sidebar-width。需要注意的是,老版本的Sass使用“!”来标识变量。使用$符号的好处是更具美感,并且在CSS中并无他用,不会导致与现存或未来的CSS语法冲突。

Sass变量的声明和CSS属性的声明比较相似,基本语法如下。

$highlight-color: #F90;
上述代码表示变量$highlight-color的值是#F90。任何可以用作CSS属性值的赋值都可以用作Sass的变量值,甚至是以空格或逗号分割多个属性值,示例代码如下。
$highlight-color: #F90;
上述代码表示变量$highlight-color的值是#F90。任何可以用作CSS属性值的赋值都可以用作Sass的变量值,甚至是以空格或逗号分割多个属性值,示例代码如下。
$basic-border: 1px solid black;
$plain-font: "Myriad Pro","Myriad","Helvetica","Neue","Helvetica";

与CSS属性不同的是,变量可以在CSS规则块定义之外存在。如果变量定义在CSS规则块内,那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中,例如@media或者@font-face块中,情况也是如此。

2. 变量引用

在变量定义完成之后,这时变量还没有生效,除非引用这个变量。下面为大家讲解变量的使用方法。示例代码如下。

$highlight-color: #F90;
.selected {
 border: 1px solid $highlight-color;
}

上述代码中,凡是CSS属性的标准值(如1px或者bold)可存在的地方,变量就可以使用。CSS生成时,变量会被它们的值所替代。之后,如果需要一个不同的值,只需要改变这个变量的值,那么所有引用此变量的地方生成的值都会随之改变。



猜你喜欢:

什么是Sass?Sass的优势有哪些?

为什么要使用变量?使用变量的意义是什么?

使用static关键字如何定义成员变量?

传智教育前端与移动开发培训

www.8029.com|www.8029.com

XML 地图 | Sitemap 地图