1、easy sass的安装
概念：
- 一门css定制开发小程序的扩展语言，定制开发小程序本质上一个脚本编程语言。通过sass定制开发小程序所有的特点能够
定制开发小程序极大的提高编写css的效率。定制开发小程序即用部分的sass定制开发小程序代码代替之前写的繁琐的css代码。 - sass 底层是由一个面向对象的编程语言
ruby来编写的。
1、npm安装ruby再安装sass
2、vscode直接搜索easy sass插件
2、sass使用
后缀 .或.scss
3、在vscode中的settings设置sass文件转为css文件的相关配置信息
在vscode中的 settings.json添加sass文件转为css文件的相关配置代码
settings.json的位置在：
C:\Users\Administrator\AppData\Roaming\Code\User
//保存scss代码后自动转为css代码 "easysass.compileAfterSave": true, //指定转为什么格式的css代码 "easysass.formats": [ //nested：嵌套缩进的 css 代码。 //expanded：没有缩进的、扩展的css代码。 //compact：简洁格式的 css 代码。 //compressed：压缩后的 css 代码 { "format": "expanded", "extension": ".css" }, { "format": "compressed", "extension": ".min.css" } ],// css文件的存放目录，该路径是相对路径，相对于vscode的工作目录 "easysass.targetDir": "css/"- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
也可以使用live sass插件（亲测可用）
也需要配置settings.json（直接在插件下载页面点齿轮，然后setting，edit settings）粘贴如下代码
"liveSassCompile.settings.formats":[ // 扩展 { "format": "compact",//可定制的出口CSS样式（expanded，compact，compressed，nested） "extensionName": ".min.css",//编译后缀名 "savePath": '/css'//编译保存的路径 } ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ],- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
在状态栏下方点击watch sass开始编译，然后按照目录生成css文件
4、相应知识点对应的技术
权重问题----嵌套解决
样式重复使用问题，如颜色—变量解决
有规律的代码编写繁琐问题–sass循环
实现样式切换，比如主题–sass变量，条件
5、嵌套
span{ display: block; color:sienna; &:hover{ color: green; font-weight: bold; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
6、变量
解决重复样式定义的问题
顺序读取，如果全部代码都需要使用就定义在sass文件开头
如果部分使用 把变量就定义在某个选择符内
- 定义变量
$变量名：css属性值- 1
- 使用变量
css属性名：$变量名- 1
$redcolor:red; $one_px_border:1px solid gray; #box{ background-color: rgb(53, 204, 47); width: 150px; height: 150px; color:$redcolor; border:$one_px_border; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
7、混合
混合是css中的一个代码容器，能包含一段代码，定义一个混合后，可以重复使用。这样就节省了重复的css代码
语法：
1、先定义一个混合
@mixin 混合名{ 包含的代码}- 1
- 2
- 3
2、使用一个混合
在使用的地方
@include 混合名（）- 1
使用混合后，sass会自动将混合中的css代码添加到使用混合的位置
案例：
@mixin center{ text-align: center;}#box{ background-color: hotpink; width: 400px; height: 100px; @include center()}#another{ background-color: green; width: 400px; height: 100px; @include center()}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
8、循环
@for $变量名 from 开始数字 to 结束数字{ css代码}- 1
- 2
- 3
- 在选择器中使用迭代变量的方法和在css代码中使用迭代变量是不一样的，选择其中使用
#{$迭代器名}，css代码中使用$迭代器名 - 迭代变量的取值范围是一个左闭右开的区间,取左不取右
案例
html代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="./css/test01.css"></head><body> <div class="item-1"></div> <div class="item-2"></div> <div class="item-3"></div> <div class="item-4"></div> <div class="item-5"></div></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
sass代码
@mixin center{ position: absolute; margin:auto; top:0; right:0; left:0; bottom:0; border:1px solid gray;}/*在选择器中使用迭代变量的方法和在css代码中使用迭代变量是不一样的,迭代变量的取值范围是一个左闭右开的区间*/@for $index from 1 to 6 { .item-#{$index}{ width: 200px+$index*50px; height: 200px+$index*50px; @include center() }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
生成的css代码
@charset "UTF-8";/*在选择器中使用迭代变量的方法和在css代码中使用迭代变量是不一样的,迭代变量的取值范围是一个左闭右开的区间*/.item-1 { width: 250px; height: 250px; position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; border: 1px solid gray;}.item-2 { width: 300px; height: 300px; position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; border: 1px solid gray;}.item-3 { width: 350px; height: 350px; position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; border: 1px solid gray;}.item-4 { width: 400px; height: 400px; position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; border: 1px solid gray;}.item-5 { width: 450px; height: 450px; position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; border: 1px solid gray;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
效果：
9、分支
@if 判断条件{ 该分支的代码}@else{ 该分支的代码}- 1
- 2
- 3
- 4
- 5
案例
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="./css/test01.css"></head><body> <div id="first">第一条div</div> <div id="seconde">第二条div</div></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
sass
$theme:green;@if $theme == green { #first{ background-color: green; }}@else if $theme == red{ #seconde{ background-color: red; }}@else{ div{ background-color: indianred; } }div{ width: 200px; height: 200px;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
css
#first { background-color: green;}div { width: 200px; height: 200px;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
另一种sass的写法也可以是直接去改变变量值
$theme:red;$bg-color:green;@if $theme == green { $bg-color:green;}@else{ $bg-color:red;}div{ background-color: $bg-color ; width: 200px; height: 200px;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13