Sass

npm 安装sass cnpm i sass -g 查看sass版本信息 sass -version 使用sass sass 是css的预处理器，是css扩展语言，可以帮助我们减少css重复的代码，sass扩展了css3，增加了规则 变量 混入 选择器 继承 内置函数等等特性。文件后缀为.scss; sass变量可以存储以下信息： 字符串 数字 颜色值 布尔值 列表 null值 sass变量使用$符号： $variablename:value; $primary:blue; 这是全局变量 !global 设置局部变量为全局的 h1 { $myColor : green !global ; } 注意：所有的全局变量我们一般定义在同一个文件中，可以使用@include来包含该文件 Sass的嵌套规则选择器类似于HTML的嵌套规则 Sass嵌套属性 很多css属性都有同样的属性，可以使用嵌套属性来编写它们： demo: 编译后： Sass @import Sass可以帮助我们减少css重复代码，节省开发时间。 我们可以安装不同的属性来创建一些代码文件，如:变量定义的文件 颜色定义的文件 字体相关的文件等。 Sass导入文件 类似css，sass支持@import指令 @import指令可以让我们导入其他文件等内容。 css @import指令在妹子调用时，都会创建一个额外deHTTP请求

当使用这个命令 yarn install卡住时，可以输入下面的命令代替 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 来源： oschina 链接： https://my.oschina.net/u/4236225/blog/4302397

vue项目启动出现cannot GET /服务错误 查看控制台 是一些sass相关库没安装成功 进行下面操作进行安装，再次启动，完美解决！ 一、首先说明sass和scss的区别。 1、异同：1）简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号 　　　　　2）文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 　　　　　3）语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 //sass .father width:100px; .son width:50px; //scss .father{ width:100px; .son{ width:50px; } } 2、 scss功能很强大的样子，能做运算、写函数啥的，但是我只是作为语法糖用而已，只看了些基础功能 我个人常用的功能有： 嵌套 变量 $color : #111111; 混入 @mixin 继承 @extend 3、一个关于@mixin、@extend、%placeholder的适用场景总结 mixin 可以传变量 extend 不可以传变量

1. 名称: Auto Import ID: steoates.autoimport 说明: Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX 版本: 1.5.3 发布者: steoates VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport 2.名称: Beautify css/sass/scss/less ID: michelemelluso.code-beautifier 说明: Beautify css, sass and less code (extension for Visual Studio Code) 版本: 2.3.3 发布者: michelemelluso VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier 3.名称: Bluloco Dark Theme ID: uloco