持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

一、什么是SCSS

SCSS是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

二、SCSS与CSS的区别

SCSS代表Sassy CSS。与Sass不同，SCSS并非基于缩进。
.sass扩展名用作Sass的原始语法，而SCSS通过.scss扩展名提供更新的语法。
与Sass不同，SCSS与CSS一样具有花括号和分号。
与SCSS相反，Sass很难阅读，因为它与CSS截然不同。这就是为什么SCSS成为更推荐的Sass语法的原因，因为它更易于阅读，并且与Native CSS非常相似，同时又享受了Sass的强大功能。

SCSS更加优秀！

三、Vue中安装SCSS

建议在cmd窗口安装并使用管理员方式打开

♻️安装SCSS

使用阿里云服务器下载依赖，在国内下载会比npm外网下载依赖快一些

cnpm i -D node-sass sass-loader

//vue2.5.2需要降级安装 
cnpm i -D node-sass@4.14.1 sass-loader@7.3.1

♻️运行项目进行测试

输入以下命令运行项目

npm run dev

在这里插入图片描述

运行成功~

四、项目中使用SCSS

在vue文件中指定样式语言为scss

在这里插入图片描述

vue代码

<template>
  <div class="box-container1">
      <el-button type="primary" @click="m1">普通</el-button>
      <span class="span1">Yes</span>
  </div>
</template>

到此完美使用SCSS~

⛺SCSS常用命令

SCSS官方文档

常用命令

混合样式：@mixin 名字(参数1，参数2...){...}
取用混合样式：@include 名字（@mixin的名字）
继承样式：@extend 需要继承的类、ID名、自定义的混合样式等的名字
导入scss样式：@import "scss文件名"
条件控制指令：@if 条件{...} 循环控制指令：
@for $var from <开始值> through <结束值> -----------包括结束值
@for $var from <开始值> to <结束值> ------------不包括结束值
循环List项目的控制指令：@each $var in$ List{}
条件判断循环：@while 条件{...}
用户自定义的函数：@function 名称(参数1，参数2...){...} 警告和错误的提示：
@warn "..."------------------------在终端输出警告
@error "..."----------------在.css文件和终端输出错误

⛲ 小结

以上就是【Bug 终结者】对SCSS简单的理解，SCSS是很强大的CSS扩展语言，很好用，在项目中使用SCSS可提高代码的可读性，方便，建议使用~

如果这篇【文章】有帮助到你，希望可以给【Bug 终结者】点个赞👍，创作不易，如果有对【后端技术】、【前端领域】感兴趣的小可爱，也欢迎关注❤️❤️❤️ 【Bug 终结者】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💝💝💝！

Vue2.x 安装 SCSS并使用