sass基础语法

1.使用变量

变量包含变量声明与引用,sass中使用$来标识变量,在声明变量的时候,变量值也可以引用其他变量.如:$color:$red;

在sass中变量名可以与css中的属性名和选择器名称相同,可以包括中划线和下划线,比如:$line-color和$line_color,这两种欧用法相互兼容,但根据css的正确书写方式建议使用中划线(-).

1-1.变量声明引用

$fontSize:18px;body{font-size: $fontSize;}

1-2.默认变量：

正常情况下后面声明的变量会覆盖前面的，如果这不是你想要的结果，可以给后面的加上!default；含义是：如果这个变量被声明赋值了，那就用它声明的只，否则就用这个默认变量。

1-3.多值变量

$paddings:1px 4px 6px 10px;/*多值变量*/

div{padding-left: nth($paddings,1);/*下标从1开始*/}

$maps:(color:red,borderColor:blue);/*多值变量*/

footer{background:map-get($maps,color);border-color: map-get($maps,borderColor);}

1-4.全局变量

body{$color:#ccc !global;/*将局部变量升级为全局变量*/}

footer{color: $color;}

1-5.变量特殊用法

$className:main;/*变量特殊用法*/

/*调用方式*/.#{$className}{    width: 100px;    height: 100px;}

生成css代码为:

/*调用方式*//* line 21, ../sass/index1.scss */.main {  width: 100px;  height: 100px;}

2.css的导入

2-1.局部文件导入

专门为导入而编写的sass文件,并不需要生成对应的独立文件,依靠约定,sass局部文件名以下划线开头.

2-2.原生css导入

1.被导入文件名字以.css结尾

2.被导入文件的名字是一个url地址

3.被导入文件的名字是css的url()值

2-3.sass导入

文件是以.scss结尾或者省略文件名后缀名,都会默认是sass文件的导入.