程序设计实验室
·
StarBlog博客Vue前端开发笔记：(3)SASS与SCSS - 程序设计实验室
原文中文，约4500字，阅读约需11分钟。
📝
内容提要
本项目使用 SCSS 编写页面样式，SCSS 是 Sass 的一种语法，兼容 CSS，易于学习。它支持模块化和强大功能，如变量、嵌套和混合。推荐使用 Dart Sass 安装，配置后可在 Vue 项目中直接使用 SCSS。
🎯
关键要点
-
本项目使用 SCSS 编写页面样式，SCSS 是 Sass 的一种语法，兼容 CSS。
-
SCSS 语法易于学习，适合初学者，几乎为零的学习曲线。
-
SCSS 支持模块化、可维护性、兼容性和强大功能，如逻辑判断和循环。
-
SCSS 的主要功能包括变量、嵌套、混合、继承和运算。
-
安装 SCSS 推荐使用 Dart Sass，安装命令为 yarn add sass --dev。
-
配置 Webpack 以支持 SCSS，需要在 webpack.base.conf.js 中添加相应规则。
-
在 Vue 项目中，可以在 .vue 文件的 style 标签中使用 SCSS，设置 lang 为 scss。
-
如果不使用 Webpack，可以直接调用 SASS 编译 SCSS 文件。
❓
延伸问答
SCSS与Sass有什么区别？
SCSS是Sass的一种语法格式，完全兼容CSS，并扩展了CSS的功能。
如何在Vue项目中使用SCSS？
在.vue文件的style标签中设置lang为scss即可使用SCSS。
SCSS的主要功能有哪些？
SCSS支持变量、嵌套、混合、继承和运算等功能。
如何安装SCSS？
推荐使用Dart Sass，安装命令为'yarn add sass --dev'。
SCSS的优势是什么？
SCSS具有模块化、可维护性、兼容性和强大功能等优势。
如何配置Webpack以支持SCSS？
在webpack.base.conf.js中添加规则：{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }。
🏷️
