前端进阶攻略之Sass
一.SASS是什么?
官方回答:世界上最成熟、最稳定、最强大的专业级CSS扩展语言!
sass是css预处理器;
优点:
用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就 只要 使用这种语言
进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文
件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使
用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更
佳,更易于代码的维护等诸多好处。
缺点:
css的文件体积和复杂度不可控、调试难度增加、成本等
补充:
它在CSS的语法基础上增加了变量(variable)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能,这些拓展令CSS更加强大与优雅。
使用Sass以及Sass的样式库(如compass)可以更好地组织管理样式文件、以及更高效的开发项目。
二.如何使用sass
VScode三个关于sass的插件
.vscode-Sass------sass/scss文件语法提示。(sublime text也有)
.vscode-Easy Sass------scss编译成css,min.css。(不错的一个sass编译工具)
.vscode-Sass Formatter---------scss自动格式 缩进
2.1vscode中安装sass
第一步,再vscode中安装easy sass 下图是已经安装成功的状态
第二步,修改vscode的配置
点击设置按钮
然后将这段复制到json文件里面
expanded:没有缩进的、扩展的css代码。
compact:简洁格式的 css 代码。
compressed:压缩后的 css 代码
"easysass.compileAfterSave": true,
"easysass.formats": [ //nested:嵌套缩进的 css 代码。
//expanded:没有缩进的、扩展的css代码。
//compact:简洁格式的 css 代码。
//compressed:压缩后的 css 代码
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "css/" //路径
第三步创建一个后缀为.sass
它会自动生成2个css,一个是压缩后的css(上线后使用),一个是代码格式化的css(测试使用)
三.sass的语法
less与css都是在{}当中写属性,而在sass当中可以不写{},直接写属性,如果写了{}就会报错。
// less写法
.content{
width: 200px;
height: 200px;
border: 1px solid;
}
// sass写法
.content
width: 200px;
height: 200px;
border: 1px solid;
.div1
width: 100px;
height: 100px;
border: 1px solid;
3.1.1 .变量-(声明变量的符号“$”,变量名称,赋予变量的值)
Sass 采用 $ 符号来声明变量。而less是用@符号来声明变量
$width : 500px;
.content
width : $width;
height: $width;
background-color: red;
3.1.2.默认变量-(!default )
在声明变量的过程中,可以给变量添加默认值(!default)标志。如果在其变量值没有单独设定,那么就用添加默认值的变量值。如果设定了,那么就用重新设定的变量值。如下
$width : 500px !default;
.content
width : $width;
height: $width;
background-color: red;
$width : 200px
.demo2
width: $width;
height: $width;
background-color: green;
编译后
.content {
width: 500px;
height: 500px;
background-color: red;
}
.demo2 {
width: 200px;
height: 200px;
background-color: green;
}
3.1.3.声明多个变量
变量可以一个一个的声明,也可以多个一起声明。多个一起声明,用起来是比较方便的,特别是声明相似功能的变量。
$size : 30px 15px !default;
.content
font-size: nth($size,1);
.demo2
font-size: nth($size,2);
3.1.4.全局变量和局部变量
a.全局变量就是定义在元素外面的变量
b.局部变量只会在局部范围内覆盖全局变量
$color: green !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.content
width: 200px;
height: 200px;
background-color: red;
$color: pink;//定义局部变量
.div1
width: 100px;
height: 100px;
background-color: $color;//调用局部变量
.demo2
width: 200px;
height: 200px;
background-color: $color;//调用全局变量
3.2.插值应用-( #{} )
变量不仅可以用在属性值,还可以用在选择器或者是属性上面。下面是变量使用在选择器上的小实例
$class : content;
.#{$class}
width : 20px;
3.3 计算功能
3.3.1sass变量可以进行加减乘除运算操作。
$width: 500px;
$height: 200px;
.content
width: $width - $height;
height: $height + $width;
background-color: red;
3.3.2.颜色也可以进行加减乘除运算
$width: 500px;
$height: 200px;
.content
width: $width - $height;
height: $height + $width;
background-color: #010203 + #040506;
3.3.3.字符拼接
$content: "Hello" + "" + "Sass!";
.content:before
content: " #{$content} ";
cursor: e + -resize;
3.4嵌套
3.4.1.除了选择器可以嵌套,属性也可以嵌套
.content
.div1
background-color: red;
//属性也可以嵌套,比如border-color属性,可以写成:
.content
border: 1px solid
color: red;
3.4.2
在嵌套的代码块内,可以使用&符号引用父元素。比如content:hover伪类,可以写成
.content
&:hover
background-color: red;
3.5. 注释
SASS共有两种注释风格。
标准的CSS注释 / * */ ,会保留到编译后的文件。
单行注释 // ,只保留在sass源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
3.6 继承
SASS允许一个选择器,继承另一个选择器。需要用到 @extend命令
.content
border: 1px solid red;
.demo2
@extend .content;
3.6.2. 混合宏@Mixin
当你的样式变得越来越复杂,需要重复使用大段的样式时, Sass 中的混合宏就会有重大意义。
.不带参数声明:
其中 @mixin 是用来声明混合宏的关键词,有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。
@mixin border-radius
-webkit-border-radius: 5px;
border-radius: 5px;
带参数的混合宏:
@mixin border-radius($radius:5px)
-webkit-border-radius: $radius;
border-radius: $radius;
3.6.3调用混合宏
通过 @mixin 关键词声明了一个混合宏,那么在实际调用中,其匹配了一个关键词“@include”来调用声明好的混合宏。
@mixin border-radius
-webkit-border-radius: 3px;
border-radius: 3px;
button
@include border-radius;
3.6.4混合宏的参数
传一个不带值的参数:
@mixin border-radius($radius)
-webkit-border-radius: $radius;
border-radius: $radius;
//在调用的时候可以给这个混合宏传一个参数值:
.box
@include border-radius(3px);
传一个带值的参数:
@mixin border-radius($radius:10px)
-webkit-border-radius: $radius;
border-radius: $radius;
//在调用的时候可以给这个混合宏传一个参数值:
.box
@include border-radius;
传多个参数:
多个参数。在实际调用和其调用其他混合宏是一样的:
@mixin center($width,$height)
width: $width;
height: $height;
//调用
.box-center
@include center(500px,300px);
3.7占位符%placeholder
通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果,也让你的代码变得更为干净。
%mt5
margin-top: 5px;
%pt5
padding-top: 5px;
.btn
@extend %mt5;
@extend %pt5;