sass简介SASS是一个CSS开发工具，提供了很多方便的编写方法，大大节省了设计者的时间，使CSS开发变得简单易维护。全球最成熟、稳定、强大的专业级CSS扩展语言！与CSS兼容：Sass与所有版本的CSS完全兼容。我们严格控制这一点，因此您可以无缝地使用任何可用的CSS库。功能丰富：Sass比任何其他CSS扩展语言都具有更多的功能和特性。Sass核心团队不知疲倦地工作以保持领先地位。语法sass和scss两种方法：Sass有两种语法格式。第一种是SCSS（SassyCSS）——本文示例中使用的格式——这种格式只是在CSS3语法上进行了扩展，所有的CSS3语法在SCSS中都是通用的，同时增加了Sass的特性。此外，SCSS还支持大多数CSShack和浏览器前缀编写（供应商特定语法），以及早期的IE过滤器编写。此格式具有.scss扩展名。另一种也是最早的Sass语法格式，称为缩进格式（IndentedSass），常简称为“Sass”，是一种简化格式。它使用“缩进”而不是“大括号”来指示属于选择器的属性，使用“换行符”而不是“分号”来分隔属性，许多人发现它比SCSS更容易阅读和编写更快。缩进格式也可以使用Sass的所有功能，只是在某些地方采用了与SCSS不同的表达方式。有关详细信息，请参阅缩进语法参考。此格式具有.sass扩展名。使用完全兼容的CSS3在CSS基础上增加变量、嵌套、mixins等功能使用函数对颜色值和属性值进行操作提供控制指令等高级功能自定义输出格式嵌套规则简单嵌套如下如下：body{font-size:12px;页脚{颜色：红色；}}会编译成如下css：body{font-size:12px;}bodyfooter{color:red;}其中每一层都可以使用NormalCSS样式选择器，包括基本类型选择器、组合选择器、伪类选择器,和伪元素选择器。&self选择器body{&.app{font-size:12px;}}编译成自我选择器：body.app{font-size:12px;}：属性嵌套。funky{字体：{系列：幻想；尺寸：30em；权重：粗体；}}编译为.funky{font-family:fantasy;字体大小：30em；字体粗细：粗体；}%占位符可以定义占位符选择器，因为sass3.2.0%。这种选择器的好处是：如果不调用，不会有多余的css文件，避免了在一些基础文件中预先定义了很多基础样式，然后不管在实际中是否使用@extend来继承applications对应的样式，所有样式都会被解析出来。占位符选择器使用%标志定义并由@extend调用。%ir{颜色：透明；文字阴影：无；背景颜色：透明；border:0;}%clearfix{clear:both;}#header{h1{@extend%ir;宽度：300px；}}.ir{@extend%ir;}编译结果：#headerh1,.ir{color:transparent;文字阴影：无；背景颜色：透明；border:0;}#headerh1{width:300px;}如上代码定义了两个占位符选择器%ir和%clearfix，其中没有调用%clearfix，所以解析出来的css样式没有clearfix部分。占位符选择器的出现使得css文件更加简洁可控，没有冗余。所以你可以用它来定义一些基本的样式文件，然后根据需要调用生成相应的css。ps：暂时不能在@media中@extend@media之外的代码片段，但以后可以。Comment多行注释/**/单行注释//导入@importsass的导入（@import）规则与CSS不同。编译时会将@import的scss文件合并进去，只生成一个css文件。但是如果在sass文件中导入@import'reset.css'这样的css文件，效果和普通的CSS导入样式文件是一样的。导入的css文件不会合并到编译后的文件中，而是以@import的形式存在。所有sass导入文件都可以省略后缀.scss。一般来说，基本的文件命名方式都是以_开头，比如_mixin.scss。这种文件可以不用下划线导入，可以写成@import"mixin"。//导入sass文件a.scss://a.scss//----------------------------body{背景:#eee;}//需要导入样式的sass文件b.scss:@import"reset.css";@import"a";p{background:#0982c1;}翻译的b.css样式:@import"reset.css";body{background:#eee;}p{background:#0982c1;}根据上面的代码可以看出，b.scss编译后，reset.css继续保持import方法，而a.scss是集成的。脚本SassScript在CSS属性之上，Sass提供了一些称为SassScript的新功能。SassScript可以应用于任何属性，允许属性使用变量、算术运算和其他附加功能。通过插值，SassScript甚至可以生成选择器或属性名称，这对编写mixin非常有帮助。Variables变量以美元符号开头，赋值方式同CSS属性：$width:5em;//直接使用即调用变量：#main{width:$width;}变量支持块级作用域，definedinnestedrules在嵌套规则中定义的变量只能在嵌套规则内使用（局部变量），在嵌套规则外定义的变量可以在任何地方使用（全局变量）。要将局部变量转换为全局变量，可以添加!global声明：#main{$width:5em!global;width:$width;}#sidebar{width:$width;}//编译成#main{width:5em;}#sidebar{width:5em;}默认变量sass的默认变量只需要在后面加上!default价值。sass的默认变量一般用来设置默认值，然后根据需要覆盖。覆盖的方式也很简单。你只需要在默认变量之前重新声明变量即可。$baseLineHeight:2;$baseLineHeight:1.5!default;一般我们定义的变量都是属性值，可以直接使用，但是如果将变量作为属性使用或者在某些特殊情况下，则必须以#{$variables}的形式使用。$borderDirection：顶部！默认；$baseFontSize:12px!default;$baseLineHeight:1.5!default;//应用于类和属性。border-#{$borderDirection}{border-#{$borderDirection}:1pxsolid#ccc;}//应用于复杂属性值body{font:#{$baseFontSize}/#{$baseLineHeight};}数据类型（DataTypes）SassScript支持6种主要数据类型：数字、1、2、13、10px字符串,带引号的字符串和不带引号的字符串,"foo",'bar',bazcolor,blue,#04a3f9,rgba(255,0,0,0.5)boolean,true,falsenullvalue,nullarray(list),使用空格或逗号作为分隔符，1.5em1em02em,Helvetica,Arial,sans-serifmaps,相当于JavaScript对象，(key1:value1,key2:value2)操作所有数据类型都支持相等操作==或!=，另外，每个数据type也有自己支持的操作。其中，可以使用数值运算。SassScript支持数字的加减乘除、四舍五入等运算（+、-、*、/、%），必要时可以在不同单位之间转换数值。关系运算符<、>、<=、>=也可用于数值运算，相等运算符==、!=可用于所有数据类型。/通常用于分隔CSS中的数字。作为CSS语言的扩展，SassScript当然支持这个功能，也赋予了/除法运算的功能。也就是说，如果/在SassScript中分隔两个数字，它会在编译后的CSS文件中做同样的事情。以下三种情况/将被视为除法运算符符号：如果值或值的一部分是变量或函数的返回值如果值被括在括号中如果值是算术表达式的一部分颜色运算（ColorOperations）：分段计算颜色值的运算，即分别计算红、绿、蓝的值，计算01+04=05+02+05=07+03+06=09:p{颜色:#010203+#040506;//#050709}字符串运算（StringOperations）：如果一个带引号的字符串（位于+的左边）连接到一个不带引号的字符串，运算结果会被引用。相反，不带引号的字符串（位于+的左侧）将带引号的字符串连接起来，运算结果不带引号。p:before{内容:"Foo"+Bar;字体系列：sans-+“serif”；}//编译为p:before{content:"FooBar";font-family:sans-serif;}运算表达式当公式与其他值一起使用时，使用空格作为连接符：margin:3px+4pxauto;//边距：7pxauto;在带引号的文本字符串中使用#{}插值语句来添加动态值：content:"Iate#{5+10}pies!";//内容：“我吃了15个馅饼！”;布尔运算：SassScript支持布尔运算andor和not运算。@-RulesandDirectives(@-RulesandDirectives)@import的使用Sass扩展了@import的功能，允许它导入SCSS或Sass文件。导入的文件将被合并并编译成同一个CSS文件。另外，导入文件中包含的变量或mixins可以在导入文件中使用。通常，@import会查找Sass文件并导入它，但在下面的例子中，@import只是充当普通的CSS语句，不会导入任何Sass文件。文件扩展名为.css；文件名以http://开头；文件名是url();@import包含媒体查询。@extend使用@extend告诉Sass将一个选择器下的所有样式继承给另一个选择器。可以多次继承和传递。目前还不能将选择器序列（SelectorSequences），如.foo.bar或.foo+.bar扩展到其他元素。但是，可以将其他元素扩展到选择器序列。为了复杂的情况，比如选择器列中的一个元素需要扩展到另一个选择器列，在这种情况下，两个选择器列需要合并，Sass引入了“占位符选择器”（placeholderselectors），看起来很像一个普通的id或class选择器，除了#或.被%取代。可以像class或id选择器一样使用，单独使用时它们不会编译到CSS文件中。@each@if@if@for@elseif@extend@include等控制指令完全让css的编写变得非常灵活，可以像正常编程一样处理样式。注意一般模式是一个index.scss入口文件不断引入@import其他模块，建议方式：//index.scss@charset'utf-8';@import'./core/veriables.scss';@import'./core/reset.scss';@import'./core/mixin.scss';@import'./core/extend.scss';@import'./core/base.scss';@import'./core/m-head.scss';@import'./core/m-body.scss';@import'./core/m-fot.scss';//reset.scss浏览器初始化样式//veriables.scsssass变量//mixin.scssmixin指令//extend.scss占位符//base.scss基本样式//m-head.scss页面头部//m-body.scss页面中间//m-foot注解处.scss页面底部：所有的scss都会导入到index.scss中，然后一起编译；注意一些全局模块中定义的范围、变量、指令和占位符可以被其他页面样式模块引用；如果页面样式的head重新定义了mixin，变量会被覆盖；本文只是一个学习笔记，比较乱的是所有的全局方法
