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>

三、常用全局变量

1. 设置变量

在全局变量文件里面写入变量（$），混合（@mixin，括号里面为默认值，可有可无），继承（%）等语法。

// 变量
$color: #ff0;
$bac_color: blue;
$bac_color: rgb(204, 132, 38);.main {color: $color;background: $bac_color; /*$bac_color被$bac-color覆盖*/}//混合
@mixin buttonStyle1($num:8px) {background-color:$color;  /*引用变量*/color: white;padding: 10px 20px;border-radius: $num;  /*引用小括号num的变量*/}@mixin buttonStyle2 {background-color: green;color: white;padding: 12px 22px;border-radius: 3px;}// 继承
%cricle {width: 50px;height: 50px;background: red;border-radius: 50%;}

2. 使用变量

.div{// 变量background: $color;// 混合@include borderRadius(20px); /*()不传值用默认值8px*/// 继承@extend %cricle;
}

四、使用全局变量

1. 变量

1. 变量以 $ 开头，用来存储一些在css中需要复用的参数；
2. 变量存在作用域，内部声明的变量无法在外面使用，外部如需引用内部的变量，可在变量值的后面添加!global声明;
3. 变量名中，中划线等同下划线，值会被第二次定义的变量覆盖。
   scss代码

$color = #333;
$bac_color = #222;
$bac-color = #111;.main {color: $color;background: $bac_color; /*$bac_color被$bac-color覆盖*/
}
/*编译后：*/
.main{color : #333;background: #111;
}

2. 嵌套

nav {ul {list-style: none;}li { display: inline-block; }
}
/*编译后：*/
nav ul{list-style: none;}
nav li{display: inline-block;}

3. 引入

1. scss通过 @import 可以把多个文件结合到一起；
2. 以 _开头命名的文件不会直接生成为CSS文件，只在使用@import指令的位置被导入；
3. 可全局引入或局部引入；
4. scss中引入片段时，可以缺省文件扩展名；
5. css原生的@import会通过额外的HTTP请求获取引入的样式片段，而scss的@import则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的HTTP请求。

/*_one.scss*/
nav {ul {list-style: none;}li { display: inline-block; }
}

/*two.scss*/
@import '_one' /*全局导入，缺省后缀*/.main{@import '_one'/*局部导入*/color : #333;background: #111;
}

4. 混合

1. 通过 @mixin 定义一个类或方法，在其它位置通过 @include 引用这个类或方法
2. @mixin 如果没有调用，不会被渲染
3. 多个参数时，传参指定参数的名字，可以不用考虑传入的顺序

@mixin border-radius($radius：5px) {  /*设置默认值为5px*/border-radius: $radius;-ms-border-radius: $radius;-moz-border-radius: $radius;-webkit-border-radius: $radius;
}
.box {@include border-radius(); /*未传参数，默认值为5px*/
}
.box1 {@include border-radius(10px); /*传入参数，值为10px*/
}
/*编译后：*/
.box {border-radius: 5px;-ms-border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;
}
.box1 {border-radius: 10px;-ms-border-radius:10px;-moz-border-radius: 10px;-webkit-border-radius:10px;
}

5. 继承

1. 使用%定义一个被继承的样式，它本身不起作用，只用于被其他人继承
2. 样式如果没有被继承，不会输出到最终生成的CSS文件
3. 注意，不能继承 @extend .box .main 这种连续组合的类，应该写为@extend .box, .main

%err-color {color:red;
}.errBox{@extend %err-color;padding: 10px;
}
.errBox2{@extend %err-color;padding: 5px;
}
/*编译后：*/
.errBox, .errBox2{color:red;
}
.errBox{padding: 10px;
}
.errBox2{padding: 5px;
}

6. if / else / each / for

1、@if 和 @else

@if 条件为真 {//code
} @else {//code
}

2、 @each

遍历变量所存在的所有数据。

@each $color in red, green, yellow, blue {.p_#{$color} { /*插值，第七点会讲到*/background-color: #{$color};}
}
/*编译后：*/
.p_red { background-color: red; }
.p_green { background-color: green; }
.p_yellow { background-color: yellow; }
.p_blue { background-color: blue; }

3、@for循环

(1) 关键字 through 表示包括终点值这个数，
(2) 关键字 to 不包括终点值这个数。

@for $i from 1 through 3 { /*through  包括3这个终点值*/.item-#{$i} { width: 2px * $i;}
}
/*编译后：*/
.item-1 {width: 2px;
}
.item-2 {width: 4xp;
}
.item-3 {width: 6px;
}

7. 其他（作为变量使用）

1、插值
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性名称或在某些特殊情况下则必须要以 #{$XXX} 形式使用。
如下，变量作为属性名的情况使用插值的形式使用

@each $color in red, green, yellow, blue {.p_#{$color} { /*插值，第七点会讲到*/background-color: #{$color};}
}$box_w: 100px;
.box {width: calc(100% - #{$box_w});
}
$static_imgUrl:"/static";
div{background: #fff url($static_imgUrl+"/images/login/background.jpg") no-repeat center center;
}

2、注释
(1) 使用//注释的内容编译后不存在
(2) 使用/* */注释的内容编译后会存在css文件中

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