在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在HTML中给元素定义两个class，一个通用样式，一个特殊样式。普通CSS的实现接下来以警告框为例进行讲，解4种类型类型说明info信息！请注意这个信息。success成功！很好地完成了提交。warning警告！请不要提交。danger错误！请进行一些更改。所有警告框的基本样式（风格、字体大小、内边距、边框等...），因为我们通常会定义一个通用alert样式，类似于这样的.alert{ padding:15px; margin-bottom:20px; border:1pxsolidt
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在HTML中给元素定义两个class，一个通用样式，一个特殊样式。普通CSS的实现接下来以警告框为例进行讲，解4种类型类型说明info信息！请注意这个信息。success成功！很好地完成了提交。warning警告！请不要提交。danger错误！请进行一些更改。所有警告框的基本样式（风格、字体大小、内边距、边框等...），因为我们通常会定义一个通用alert样式，类似于这样的.alert{ padding:15px; margin-bottom:20px; border:1pxsolidt
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的class，比如.float-left。混合指令可以包含所有的CSS规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。 mixin是可以重用的一组CSS声明。mixin有助于减少重复代码，只需声明一次，就可在文件中引用。 可以看出，mixin类似变量，不同的是变量存储值，mixin存储一组css声明。mixin可以传入参数。定义与使用混合指令@mixin@mixinmixin-name([param1,[param2...]]){ /*css声明*/}例1：标准形式//定义页面一个区块基本的样式@m
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的class，比如.float-left。混合指令可以包含所有的CSS规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。 mixin是可以重用的一组CSS声明。mixin有助于减少重复代码，只需声明一次，就可在文件中引用。 可以看出，mixin类似变量，不同的是变量存储值，mixin存储一组css声明。mixin可以传入参数。定义与使用混合指令@mixin@mixinmixin-name([param1,[param2...]]){ /*css声明*/}例1：标准形式//定义页面一个区块基本的样式@m
输出格式说明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更符合程序员的编程模式
