最近因为工作原因阅读了ElementPlus和Vexip UI开源框架的源代码,发现这两个框架的style样式都是用的scss,今天进行了scss系统性的研究学习。
安装
// 使用vue3+vite的环境
npm install sass -S
使用
一个小栗子,全局scss中的变量的使用
export default defineConfig({
css: {
// css预处理器
preprocessorOptions: {
scss: {
additionalData: '@import "./src/assets/css/global.scss";',
}
},
},
})
// 配置一个全局主色调
$color-main: rgb(70, 227, 238)
<template>
<div class="box">
<div>使用全局的scss变量,设置子组件div的背景颜色为全局的color-main</div>
</div>
</template>
<script setup>
</script>
<style scoped lang="scss">
.box{
display: flex;
flex-direction: column;
background-color: $color-main;
padding: 25px;
text-align: center;
}
</style>
一个小栗子, 引入局部的一个scss文件,并在单vue文件中使用它的样式
$highlight-color: darkblue;
.box{
display: flex;
flex-direction: column;
background-color: $color-main;
padding: 25px;
.selected{
text-align: center;
color: $highlight-color;
}
}
<template>
<div class="box">
<div class="selected">
scss中的变量使用$开头,scss中可以嵌套css规则。使用scss的的单文件中的scss变量配置div字体颜色,并使用scss的嵌套规则
</div>
</div>
</template>
<script setup>
</script>
<style scoped lang="scss">
@import './scss/single.scss'
</style>
一个小栗子,scss的一些符号语法:+、>、~
.box{
display: flex;
flex-direction: column;
background-color: $color-main;
padding: 25px;
margin: 10px 0px 10px 0px;
.omig{
color: darkblue;
text-align: center;
&:hover{
color: darkcyan;
}
}
.gimxsuper > .gimx{
color:cornflowerblue;
text-align: center;
}
.left + div{
color: darkslateblue;
text-align: center;
}
.cop~.cop{
color: dimgrey;
text-align: center;
}
}
<template>
<div class="box">
<div class="omig">使用scss的父选择标识符&配置hover伪类中的样式</div>
</div>
<div class="box">
<div class="gimxsuper">
<div class="gimx">使用scss的>符号,选择一个元素的直接子元素</div>
</div>
</div>
<div class="box">
<div class="left">使用scss+符号,配置同层选择器的相邻紧跟其后的元素的样式</div>
<div class="right">紧跟其后的样式展示</div>
</div>
<div class="box">
<div class="cop">使用scss~符号,选择所有跟在某个class后面的所有元素,配置后边所有元素样式</div>
<div>one num</div>
<div class="cop">two num</div>
<div class="cop">three num</div>
</div>
</template>
<script setup>
</script>
<style scoped lang="scss">
@import './scss/regular.scss'
</style>
一个小栗子, 给多个class类同时设置一组样式
.box{
display: flex;
flex-direction: column;
background-color: $color-main;
padding: 25px;
.sima, .simb, .simc{
color: hotpink;
text-align: center;
}
}
<template>
<div class="box">
<div>使用scss语法,给sima、simb、simc同时配置一组样式</div>
<div class="sima">sim one</div>
<div class="simb">sim two</div>
<div class="simc">sim three</div>
</div>
</template>
<style scoped lang="scss">
@import './scss/morebox.scss'
</style>