Bootstrap

SCSS在Vue中的用法

一、安装相关依赖

1、安装sass - loader和node - sass(或dart - sass)

  • 如果使用Vue CLI创建的项目,可以通过以下命令安装:
  • 对于node - sass(基于LibSass,编译速度较快,但可能存在兼容性问题):
npm install sass - loader node - sass --save - dev
  • 对于dart - sass(官方Sass实现,兼容性更好):
npm install sass - loader dart - sass --save - dev

二、在组件中使用SCSS

1、单文件组件(.vue)中的样式使用

  • 在Vue的单文件组件中,可以直接在< style>标签中使用SCSS语法。需要给< style>标签添加 lang = “scss” 属性来表明使用的是SCSS。(可以使用嵌套式写法)
<template>
  <div class="my-component">
    <p>这是一个使用SCSS样式的组件</p>
  </div>
</template>
<style lang="scss">
.my-component { 
	  background-color: #f5f5f5; 
	  p{ color: blue; 
	      &:hover { 
	        color: red; 
	        } 
	      } 
	    } 
</style>

2、全局样式使用SCSS

可以创建一个main.scss(名称可自定义)文件来定义全局样式。然后在main.js(或入口文件)中导入这个文件。

  • 例如,在main.scss中:
$primary-color: rgb(20, 236, 56);
body {
  font-family: Arial, sans-serif;
  color: $primary-color;
}
  • main.js中:
import { createApp } from 'vue'
import App from './App.vue'
import './main.scss';

const app = createApp(App)

app.mount('#app')

3、在组件中使用变量和混入(Mixins)等SCSS特性

  • 变量使用
  • 可以在组件的<style lang = "scss">中定义变量,也可以从外部导入变量文件。
  • 例如,创建一个_variables.scss文件:
 $text-color: #444;
  • 在组件中导入并使用
<template>
  <div class="my-other-component">
    <p>这个组件使用了外部定义的SCSS变量</p>
  </div> 
</template>

<style lang="scss">
@import './variables';
.my-other-component{ 
  p { 
    color: $text-color; 
    } 
  } 
</style >  
  • 混入使用
  • 定义一个混入文件,例如_mixins.scss
@mixin buttonStyle1 {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
  }
  
 @mixin buttonStyle2 {
    background-color: green;
    color: white;
    padding: 12px 22px;
    border-radius: 3px;
  }
  
  • 在组件中使用混入:
  • 通过点击事件,切换_mixins.scss中不同的样式
<template>
  <button :class="buttonClass" @click="toggleButtonStyle">切换按钮样式</button>
</template>
<script>
export default {
  data() {
    return {
      isStyle1: true
    };
  },
  computed: {
    buttonClass() {
      return this.isStyle1? 'button-style-1' : 'button-style-2';
    }
  },
  methods: {
    toggleButtonStyle() {
      this.isStyle1 =!this.isStyle1;
    }
  }
};
</script>
<style lang="scss">
@import './main.scss';

.button-style-1 { @include buttonStyle1; } 
.button-style-2 { @include buttonStyle2; } 

</style>

通过以上方法,就可以在Vue项目中充分利用SCSS的强大功能来编写样式。

;