手把手带你了解sass

Posted 2021-03-26 crushxz

sass的使用

减少重复的工作

1.变量的声明:

是以$开头给变量命名;

$height-color: #F30

2.变量的使用范围:

变量可以在多个地方存在，不一定限制在代码块中。但是如果定义在了代码块中，则只能在代码块中使用。

先在外面或者上面给属性命名，在使用的地方应用这些变量。

3.变量的命名:

命名：以下划线或者横杠都看自己的意愿，中划线更普遍。（大部分下划线和横杠是互通的，但是类名和ID名不一定。

4.sass的嵌套使用:

sass的嵌套：支持多层嵌套，避免重复书写相同的类名或者ID名。

注意:

父选择器标识符:&

1.连接伪元素:

&会直接被父级元素替换

article a {
  color: blue;
  :hover { color: red }
}
?
=>artical a {color:blue}
artical a :hover{color:red}
artical a{
    color:blue;
    &:hover{color:red}
}

 

如果使用伪元素需要用&来连接，不然就直接识别成后代元素，会和父元素有一个空格导致样式与预期不符。

2.群组选择器的嵌套

将重复的元素提出来:

.container{
    h1,h2,h3{margin-bottom:10px}
}
=>
.container h1, .catainer h2, .container h3{margin-bottom:10px}

 

3.组合选择器>,+,~

1.>:选中元素的直接子元素(只有一个元素)

2.+:选中同层相邻元素(所有+后面相同的元素)

3.~:选中所有在~前相同层级的~后的元素

5.嵌套属性

nav{
    border:{
        style:solid;
        width:1px;
        color:#ccc
    }
}
=>
nav{
    border-style:solid;
    border-width:1px;
    border-color:#ccc;
}

 

6.导入sass文件

1.@import

css中也有该规则,但是只有执行到@import时才会去下载导入的css文件;加载过慢

sass无需发起额外的下载请求;@import时就解析成了css;

color.scss => @import "color"

注意:可以省略后缀名

2.使用部分sass文件

如果以下划线开头命名则不会单独编译输出css

3.默认变量

!default

4.注意

如果以css结尾

导入的是一个URL地址

导入的是url()

=>生成的文件是直接被浏览器解析了的，可能会造成额外下载

6.注释

静默注释：//

不会暴露在浏览器中

普通注释：/* */

7.混合器

1.使用场景：

1.有大段样式代码需要重复使用=>将重复代码抽离出来成一个逻辑单元

2.能用通用的名字将这个混合器的功能描述出来；（语义化）

`rounded-corners

2.标识符：

@mixin @include

3.使用方法：

//相当于将这个样式封装起来了
@mixin rounded-centers{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
//使用这个样式
notice{
    background-color:green;
    border:2px solid #ccc;
    @include round-center
}

 

4.规则

1.如果混合器通过@include包含在父规则中时，会生成嵌套规则

2.可以使用&

5.给混合器传参

类似于function

@mixin link-colors($normal, $hover, $visited){
    color:$normar;
    &:hover{color:$hover}
    &:visited{color:$visited}
}
a{
    @include(red,blue,green)
}
a{
    @include link-colors($normal:red,$hover:blue,$visited:green)
}

 

6.默认参数值

声明：$name:default-value

8.选择器继承

1.定义：选择器可以继承为另一个选择器的所有样式

2.语法：@extend

.error{
    border:1px solid red;
    background-color:#fdd;
}
.seriousError{
    @extend .error;
    border-width:3px;    
}

 

后写的属性样式可以覆盖先写的；

3.继承何时选择

当一个元素拥有的类是属于另一个类时

继承比起混合器生成的代码更少，有利提高站点速度

当不同的规则被应用到同一个元素上时，先看选择器的权重，如果权重相同则后面的覆盖前面的

避免多后代时应用继承选择器.foo .bar{@extend .error}