当前位置：首页 > news >正文

sass学习笔记（1.0）

news 2025/3/10 5:30:20

1.使用变量

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

语法为：$ 变量名

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

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

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

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

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

4.群组选择器的嵌套

 <ul><li class="liOne">1</li><li class="liTwo">2</li><li>3</li><li class="liThree">4</li><li>5</li></ul><style scoped lang="scss">
div{$Pink_color: pink;$BgColor: $Pink-color;background-color: $BgColor;height: 200px;width: 200px;h1{color:$color;}&:hover{h1{color:blue;}}
}
ul{.liOne,.liTwo,.liThree{color: aqua;}
}</style>

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

4.子组合选择器和同层组合选择器：>,+，~

<div class="outBox"><div class="divOne">1</div><div class="divTwo">2</div><div><div class="divOne">3</div></div><div class="divThree"><div class="divOne">4</div></div><div>5</div></div>.outBox  .divOne{color: red;
}

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

如果使用子组合选择器>

.outBox > .divOne{color: red;
}

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

同层相邻组合选择器+

<template><div><h1>我是首页</h1></div><div class="outBox"><div class="divOne">1</div><div class="divTwo">2</div><div><div class="divOne">3</div></div><div class="divTwo"><div class="divOne">4</div></div><div>5</div></div>
</template><script setup lang="ts">
import {ref,reactive} from 'vue'</script><style scoped lang="scss">
div{$Pink_color: pink;$BgColor: $Pink-color;background-color: $BgColor;// height: 200px;// width: 200px;h1{color:$color;}&:hover{h1{color:blue;}}
}
// ul{
//     .liOne,.liTwo,.liThree{
//         color: aqua;
//     }
// }
.outBox{.divOne + .divTwo{color: purple;font-size: 26px;font-weight: 800;}}
</style>

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

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

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

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;}}

7.导入sass文件

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

8.默认变量值

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

#BGcolor:red  !default;

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

9.嵌套导入

<template><div><h1>我是首页</h1></div><div class="outBox"><div class="divOne">1</div><div class="divTwo">2</div><div><div class="divOne">3</div></div><div class="divTwo"><div >4</div></div><div class="bgc">5</div></div>
</template><script setup lang="ts">
import {ref,reactive} from 'vue'</script><style scoped lang="scss">
div{$Pink_color: pink;$BgColor: $Pink-color;background-color: $BgColor;// height: 200px;// width: 200px;h1{color:$color;}&:hover{h1{color:blue;}}
}
// ul{
//     .liOne,.liTwo,.liThree{
//         color: aqua;
//     }
// }
.outBox{@import '../../styles/local-style';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;}}
</style>

定义的_local_style.scss