手把手带你了解sass

Posted crushxz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手把手带你了解sass相关的知识,希望对你有一定的参考价值。

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}

以上是关于手把手带你了解sass的主要内容,如果未能解决你的问题,请参考以下文章

手把手带你熟悉一个前端项目

手把手带你熟悉一个前端项目

手把手带你熟悉一个前端项目

手把手带你了解消息中间件

Android性能优化:手把手带你全面了解 内存泄露 & 解决方案

算法竞赛五冠五亚得主,手把手带你了解算法竞赛