div{

sass学习笔记(1.0)

1.使用变量

sass可以像声明变量那样进行使用,这样同样的样式,就可以使用相同的变量来提高复用。

语法为:$ 变量名

sass学习笔记(1.0)

在界面中也可以正常的显示

sass学习笔记(1.0)

?当然了,变量之间也可以相互引用,比如下面

div{
    $_color: #d45387;
    $BgColor: $_color;
    background-color: $BgColor;
}

sass学习笔记(1.0)

在sass中,变量名使用中划线和下划线是一样的

sass学习笔记(1.0)

sass学习笔记(1.0)

?2.嵌套CSS规则

这也是sass最常用的用法之一,就是不用像以前那样逐级书写css样式了,如果存在层级关系,直接嵌套就可以。

div{
    $Pink_color: pink;
    $BgColor: $Pink-color;
    background-color: $BgColor;
    h1{
        color:$color;
    }
}

以上的嵌套写法等价于

div{
    $Pink_color: pink;
    $BgColor: $Pink-color;
    background-color: $BgColor;
   
}
div h1{
        color:$color;
    }

3.使用父选择器标识符&

多用于伪类选择器,比如:hover,这样需要将制定的元素再写一遍,我们就可以直接使用&替代即可

div{
    $Pink_color: pink;
    $BgColor: $Pink-color;
    background-color: $BgColor;
    height: 200px;
    width: 200px;
    h1{
        color:$color;
    }
    &:hover{
        h1{
            color:blue;
        }
    }
}

这里的&:hover就是div:hover

?sass学习笔记(1.0)

4.群组选择器的嵌套

 
  • 1
  • 2
  • 3
  • 4
  • 5

这样ul下,指定的三个类名下的设置为统一样式

sass学习笔记(1.0)

?4.子组合选择器和同层组合选择器:>,+,~


    1
    2
    
        3
    
    
        4
    
    5
 


.outBox  .divOne{
    color: red;
}

如果直接这样设置样式的话,.outBox下的所有.divOne都会变成红色

?sass学习笔记(1.0)

如果使用子组合选择器>

.outBox > .divOne{
    color: red;
}

只会在直系后代中设置对应的样式

sass学习笔记(1.0)

?同层相邻组合选择器+





?指divOne后面紧跟的兄弟节点divTwo才会进行样式设置,而同样类名的divTwo的4并没有进行样式设置。

sass学习笔记(1.0)

如果想要4也设置同样的样式,我们可以使用全体组合选择器~

.outBox{
    .divOne ~ .divTwo{
        color: purple;
        font-size: 26px;
        font-weight: 800;
    }
   
}

sass学习笔记(1.0)

5.注释

sass的注释和普通css的注释也是不一样的,类似于js的注释,我们直接在vscode中使用快捷键ctrl+/就可以自定生成sass的注释

// ul{
//     .liOne,.liTwo,.liThree{
//         color: aqua;
//     }
// }

而普通的css的注释和HTML的注释类似:?

/* 这是一个CSS注释 */

/*
这是一个
多行的
CSS注释

*/

6.嵌套属性?

在sass中,属性同样也可以嵌套,比如border系列的样式,我们就可以简写成border:然后书写嵌套属性即可。

.outBox{
    height: 100vh;
    .divOne ~ .divTwo{
        width: 50px;
        height: 50px;
        text-align: center;
        line-height:50px;
        background-color: bisque;
        border:{
            radius:50%;
            color: #ccc;
            width:2px
        }
        // color: purple;
        // font-size: 26px;
        // font-weight: 800;
    }
   
}

sass学习笔记(1.0)

7.导入sass文件

使用@import导入规则,它在生成css文件是就把相关文件导入进来,在导入sass时,不需要指定导入文件的全名,就是可以省略后缀。

8.默认变量值

在sass中,类似与函数的默认参数,而sass样式也可以通过使用!default来设置默认的样式。比如:

#BGcolor:red  !default;

意思就是如果你自己定义了一个局部变量BGcolor,就是你可以使用自己定义的样式,如果没有改局部变量,那么当你使用这个样式时,默认就是红色。【通俗的将,你自己有,就用你自己的,你若是没有,就用我的】

9.嵌套导入





?定义的_local_style.scss

sass学习笔记(1.0)

sass学习笔记(1.0)

可以看到,对应5的样式已经设置上去了。?

上一篇:gtneo2t真垃圾(真我gtneo2致命缺点)
下一篇:gtx670吃鸡多少fps(为什么我的gtx670跑分这么低,鲁大师显卡跑分普遍降低了么还有我的gtx670中效吃鸡屏幕微微)