Vue3 Scss的使用(一)

        最近因为工作原因阅读了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>