sass学习笔记（1.0）
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
可以看到，对应5的样式已经设置上去了。
原文地址：https://blog.csdn.net/mez_Blog/article/details/142787943
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！