输出格式说明Sass编译输出的CSS格式可以自定义。有4种输出格式：:nested–嵌套格式:expanded–展开格式:compact–紧凑格式:compressed–压缩格式默认格式是:nested。可以使用:style选项或使用style命令行参数设置输出格式。命令标准格式：sass--watch(scss文件):(要生成的目标css文件)--style(输出格式)例如：sass--watchindex.scss:index.css--stylecompressed不同格式输出接下来我们把如下的css经过不同格式的编译，看不同输出格式的区别：html{ font-size:12px;
VScode设置中文打开vscode，按快捷键“Ctrl+Shift+P”输入configurelanguage，回车选择安装其他语言（默认是英文的）选择简体中安装（荧光笔标注的地方）按提示重启右下角会有安装成功提示，会有重启(restart)提示按提示重启。下载LiveSass编译器源码地址：https://github.com/ritwickdey/vscode-live-sass-compiler/现在3.0.0版本已不再维护，建议下载更高版本源码地址：https://github.com/glenn2223/vscode-live-sass-compiler/编译配置也可以点这里切换到
输出格式说明Sass编译输出的CSS格式可以自定义。有4种输出格式：:nested–嵌套格式:expanded–展开格式:compact–紧凑格式:compressed–压缩格式默认格式是:nested。可以使用:style选项或使用style命令行参数设置输出格式。命令标准格式：sass--watch(scss文件):(要生成的目标css文件)--style(输出格式)例如：sass--watchindex.scss:index.css--stylecompressed不同格式输出接下来我们把如下的css经过不同格式的编译，看不同输出格式的区别：html{ font-size:12px;
VScode设置中文打开vscode，按快捷键“Ctrl+Shift+P”输入configurelanguage，回车选择安装其他语言（默认是英文的）选择简体中安装（荧光笔标注的地方）按提示重启右下角会有安装成功提示，会有重启(restart)提示按提示重启。下载LiveSass编译器源码地址：https://github.com/ritwickdey/vscode-live-sass-compiler/现在3.0.0版本已不再维护，建议下载更高版本源码地址：https://github.com/glenn2223/vscode-live-sass-compiler/编译配置也可以点这里切换到
sass变量同javascript变量，可以用来存储一些信息，并且可以重复使用。先来对比一下css中的变量同css变量对比CSS变量是由CSS作者定义的，它包含的值可以在整个文档或指定的范围内重复使用。用CSS变量来实现简单的代码：:root{ --font-size:18px;}.container{ font-size:var(--font-size);}Sass变量$font-size:14px;.container{font-size:$font-size;}编译后：.container{font-size:14px;}可以看出，两种达到的效果一样，但sass更符合程序员的编程模式
sass变量同javascript变量，可以用来存储一些信息，并且可以重复使用。先来对比一下css中的变量同css变量对比CSS变量是由CSS作者定义的，它包含的值可以在整个文档或指定的范围内重复使用。用CSS变量来实现简单的代码：:root{ --font-size:18px;}.container{ font-size:var(--font-size);}Sass变量$font-size:14px;.container{font-size:$font-size;}编译后：.container{font-size:14px;}可以看出，两种达到的效果一样，但sass更符合程序员的编程模式
语法嵌套规则选择器嵌套例如有这么一段css，正常CSS的写法.container{width:1200px;margin:0auto;}.container.header{height:90px;line-height:90px;}.container.header.log{width:100px;height:60px;}.container.center{height:600px;background-color:#F00;}.container.footer{font-size:16px;text-align:center;}改成写SASS的方法.container{ width:12
语法嵌套规则选择器嵌套例如有这么一段css，正常CSS的写法.container{width:1200px;margin:0auto;}.container.header{height:90px;line-height:90px;}.container.header.log{width:100px;height:60px;}.container.center{height:600px;background-color:#F00;}.container.footer{font-size:16px;text-align:center;}改成写SASS的方法.container{ width:12
@import Sass拓展了@import的功能，允许其导入SCSS或Sass文件。被导入的文件将合并编译到同一个CSS文件中，另外，被导入的文件中所包含的变量或者混合指令(mixin)都可以在导入的文件中使用。例如：public.scss$font-base-color:#333;index.scss@import"public";$color:#666;.container{ border-color:$color; color:$font-base-color;}编译后：.container{border-color:#666;color:#333;}注意：跟我们普通css里面@
@import Sass拓展了@import的功能，允许其导入SCSS或Sass文件。被导入的文件将合并编译到同一个CSS文件中，另外，被导入的文件中所包含的变量或者混合指令(mixin)都可以在导入的文件中使用。例如：public.scss$font-base-color:#333;index.scss@import"public";$color:#666;.container{ border-color:$color; color:$font-base-color;}编译后：.container{border-color:#666;color:#333;}注意：跟我们普通css里面@
