sass的使用方法

一、安装插件

1、在应用市场搜索 Easy Sass

2、在settings.json配置Sass环境

"easysass.formats": [

{

"format": "expanded", //compressed 表示压缩

"extension": ".css"

}

],

"easysass.targetDir": "./sass文件夹所在的目录名称/css/"

3、在js-20200915中新建文件夹sass

4、在sass中新建文件lib.scss

二、Sass语法

1、使用变量

1-1. 变量声明;

$w-100:100px;

$highlight-color: #F90;

1-2.变量的使用

.selected {

width:$w-100;

border: 1px solid $highlight-color;

}

1-3.变量名推荐使用中划线，也可以使用下划线

2、嵌套CSS 规则

2-1.普通的嵌套

#content {

article {

h1 { color: #333; }

p { margin-bottom: 1.4em; }

}

aside { background-color: #EEE; }

}

//编译后的结果

#content article h1 {color: #333;}

#content article p {margin-bottom: 1.4em;}

#content aside { background-color: #EEE; }

2-2.&符号表示选择器本身

article {

a{

color:blue;

&:hover{

color:red;

}

}

}

//编译后

article a{

color:blue;

}

article a:hover{

color:red;

}

2-3. 群组选择器的嵌套

.container {

h1,

h2,

h3 {

margin-bottom: .8em

}

}

//编译

.container h1,

.container h2,

.container h3 {

margin-bottom: .8em;

}

2-4、嵌套属性

nav{

border:1px solid black{

left: 0px;

right: 0px;

}

}

//编译后

nav {

border: 1px solid black;

border-left: 0px;

border-right: 0px;

}

3、使用SASS部分文件

@import './colors.scss';

4、注释

// 单行

/*多行*/

5、混入

@mixin bordered {

border: 1px solid black;

}

#app {

...

@include bordered;

...

}