SCSS在Vue中的用法
- 一、安装相关依赖
-
- [1、安装sass - loader和node - sass（或dart - sass）](#1、安装sass - loader和node - sass（或dart - sass）)
- 二、在组件中使用SCSS
- 三、常用全局变量
-
- [1. 设置变量](#1. 设置变量)
- [2. 使用变量](#2. 使用变量)
- 四、使用全局变量
-
- [1. 变量](#1. 变量)
- [2. 嵌套](#2. 嵌套)
- [3. 引入](#3. 引入)
- [4. 混合](#4. 混合)
- [5. 继承](#5. 继承)
- [6. if / else / each / for](#6. if / else / each / for)
-
- [1、@if 和 @else](#1、@if 和 @else)
- [2、 @each](#2、 @each)
- 3、@for循环
- [7. 其他（作为变量使用）](#7. 其他（作为变量使用）)
一、安装相关依赖
1、安装sass - loader和node - sass（或dart - sass）
- 如果使用Vue CLI创建的项目，可以通过以下命令安装：
- 对于node - sass（基于LibSass，编译速度较快，但可能存在兼容性问题）：
c
npm install sass - loader node - sass --save - dev- 对于dart - sass（官方Sass实现，兼容性更好）：
c
npm install sass - loader dart - sass --save - dev二、在组件中使用SCSS
1、单文件组件（.vue）中的样式使用
- 在Vue的单文件组件中，可以直接在< style>标签中使用SCSS语法。需要给< style>标签添加 lang = "scss" 属性来表明使用的是SCSS。（可以使用嵌套式写法）
c
<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中：
c
$primary-color: rgb(20, 236, 56);
body {
font-family: Arial, sans-serif;
color: $primary-color;
}- 在
main.js中：
c
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文件：
c
$text-color: #444;- 在组件中导入并使用
c
<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：
c
@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中不同的样式
c
<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，括号里面为默认值，可有可无），继承（%）等语法。
c
// 变量
$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. 使用变量
c
.div{
// 变量
background: $color;
// 混合
@include borderRadius(20px); /*()不传值用默认值8px*/
// 继承
@extend %cricle;
}四、使用全局变量
1. 变量
- 变量以 $ 开头，用来存储一些在css中需要复用的参数；
- 变量存在作用域，内部声明的变量无法在外面使用，外部如需引用内部的变量，可在变量值的后面添加!global声明;
- 变量名中，中划线等同下划线，值会被第二次定义的变量覆盖。
scss代码
c
$color = #333;
$bac_color = #222;
$bac-color = #111;
.main {
color: $color;
background: $bac_color; /*$bac_color被$bac-color覆盖*/
}
/*编译后：*/
.main{
color : #333;
background: #111;
}2. 嵌套
c
nav {
ul {list-style: none;}
li { display: inline-block; }
}
/*编译后：*/
nav ul{list-style: none;}
nav li{display: inline-block;}3. 引入
- scss通过 @import 可以把多个文件结合到一起；
- 以 _开头命名的文件不会直接生成为CSS文件，只在使用@import指令的位置被导入；
- 可全局引入或局部引入；
- scss中引入片段时，可以缺省文件扩展名；
- css原生的@import会通过额外的HTTP请求获取引入的样式片段，而scss的@import则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的HTTP请求。
c
/*_one.scss*/
nav {
ul {list-style: none;}
li { display: inline-block; }
}
c
/*two.scss*/
@import '_one' /*全局导入，缺省后缀*/
.main{
@import '_one'/*局部导入*/
color : #333;
background: #111;
}4. 混合
- 通过 @mixin 定义一个类或方法，在其它位置通过 @include 引用这个类或方法
- @mixin 如果没有调用，不会被渲染
- 多个参数时，传参指定参数的名字，可以不用考虑传入的顺序
c
@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. 继承
- 使用%定义一个被继承的样式，它本身不起作用，只用于被其他人继承
- 样式如果没有被继承，不会输出到最终生成的CSS文件
- 注意，不能继承 @extend .box .main 这种连续组合的类，应该写为@extend .box, .main
c
%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
c
@if 条件为真 {
//code
} @else {
//code
}2、 @each
遍历变量所存在的所有数据。
c
@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 不包括终点值这个数。
c
@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} 形式使用。
如下，变量作为属性名的情况使用插值的形式使用
c
@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的强大功能来编写样式。