📢📢📢📣📣📣
哈喽！大家好，我是【Bug 终结者】 ，【CSDN新星创作者】🏆，阿里云技术博主🏆，51CTO人气博主🏆，INfoQ写作专家🏆
一位上进心十足，拥有极强学习力的【Java领域博主】😜😜😜
🏅【Bug 终结者】博客的领域是【面向后端技术】的学习，未来会持续更新更多的【后端技术】以及【学习心得】。 偶尔会分享些前端基础知识，会更新实战项目，面向企业级开发应用！
🏅 如果有对【后端技术】、【前端领域】感兴趣的【小可爱】，欢迎关注【Bug 终结者】💞💞💞❤️❤️❤️ 感谢各位大可爱小可爱！ ❤️❤️❤️
文章目录
一、什么是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 [email protected] [email protected]
♻️运行项目进行测试
输入以下命令运行项目
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文件和终端输出错误
♨️往期精彩热文回顾
✈️ **Netty进阶 – WebSocket长连接开发 **
✈️ **Netty进阶 – 非阻塞网络编程 实现群聊+私聊+心跳检测系统 **
✈️ **Postman测试工具调试接口详细教程【向后端发送Json数据并接收返回的Json结果】 **
✈️ **Java面向对象 — 吃货联盟订餐系统（完整版） **
✈️ **一分钟教你快速 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI **
⛲ 小结
以上就是【Bug 终结者】对SCSS简单的理解，SCSS是很强大的CSS扩展语言，很好用，在项目中使用SCSS可提高代码的可读性，方便，建议使用~
如果这篇【文章】有帮助到你，希望可以给【Bug 终结者】点个赞👍，创作不易，如果有对【后端技术】、【前端领域】感兴趣的小可爱，也欢迎关注❤️❤️❤️ 【Bug 终结者】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💝💝💝！
版权归原作者 Bug 终结者 所有， 如有侵权，请联系我们删除。