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文件的导入.