初识SassSASS简介Sass是一个css预处理器，它使用一种特殊的编程语言来设计网页，然后编译成普通的CSS文件。Sass是CSS3的扩展，它添加了嵌套规则、变量、混合、选择器继承等。Sass生成格式良好的CSS，使样式表更易于组织和维护。.sass和.scss的区别：.sass最初是为与haml一起工作而设计的，并且都具有与haml相同的缩进样式。从第三代开始保留缩进样式，完全向下兼容普通css代码。推荐使用.scsscompass是一个开源的css创作框架（技术类库）。在sass的基础上，封装了一系列有用的模块和模板，补充了sass的功能。推荐链接：sass中文网|sass介绍|rubyinstaller.org/dow...在安装过程中，请勾选AddRubyexecutablestoyourPATH以添加到系统环境变量。安装完成后需要测试是否安装成功，运行CMD输入ruby-v。安装成功会打印ruby版本号，替换gem源（使用淘宝的gem源https://ruby.taobao.org/）1.删除原来的gem源gemsources--removehttps：//rubygems.org/2。添加国内淘宝源gemsources-ahttps://ruby.taobao.org/3。打印是否替换成功gemsources-l4。替换成功后，打印如下：***CURRENTSOURCES***https://ruby.taobao。org/InstallSassandCompass//安装如下（mac安装遇到权限问题需要加sudogeminstallsass）geminstallsassgeminstallcompassSass常用更新、版本查看、sass命令帮助等命令：//updatesassgemupdatesass//查看sass版本sass-v//查看sasshelpsass-hcompilesasssass编译sass的方式有很多种，比如命令行编译方式，sublime插件SASS-Build，编译软件koala，前端自动化软件codekit，Grunt创建前端自动化工作流grunt-sass，Gulp创建前端自动化工作流gulp-ruby-sass等。//单个文件转换命令sassinput.scssoutput.css//单个文件监控命令sass--watchinput.scss:output.css//如果sass文件目录很多，也可以告诉sass监控整个目录:sass--watchapp/sass:public/stylesheets//编译格式sass--watchinput.scss:output.css--stylecompact//编译并添加调试mapsass--watchinput.scss:output.css--sourcemap//选择编译格式，添加调试mapsass--watchinput.scss:output.css--styleexpanded--sourcemap//打开调试信息sass--watchinput.scss:output.css--debug-info数据类型NumberStringListMapColorBooleanNull//Number类型$n1:1.2;$n2:12;$n3:12px;//String类型$s1:content;$s2:'content';//Bool类型$true:true;$false:错误的;//空类型$null:null;//颜色类型$c1:blue;$c2:#000;$c3:rbga(0,0,0,0.3);.#{$s1}{@if$null==null{font-size:$n3}}variablesass变量必须以$开头，后面是变量名，并且变量值和变量名需要用冒号（:）隔开（就像CSS属性设置一样），如果值后面跟着!default，表示默认值。默认变量sass的默认变量只需要在值后加上!default即可。sass的默认变量一般用来设置默认值，然后根据要求覆盖。覆盖的方式也很简单。你只需要在默认变量之前重新声明变量即可。多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，map类型有点像js中的对象。列表。列表数据可以用空格、逗号或括号分隔多个值，可以使用nth($var,$index)来获取值映射。地图数据以键值对的形式出现，其中值可以是一个列表。格式为：$map:(key1:value1,key2:value2,key3:value3);。该值可以通过map-get($map,$key)获取。在{}内定义的全局变量无法在{}外访问。如果需要全局访问，需要在变量值后面加上!global为全局变量。特殊变量一般我们定义的变量都是属性值，可以直接使用，但是如果变量是作为属性使用或者在某些特殊情况下，则必须以#{$variables}的形式使用。未编译样式Scssbody{$c_blue:blue;header{//局部变量$c_red:red;//全局变量$c_yellow:yellow!global;颜色：$c_red；//默认变量$fz:14px;$fz:12px!default;字体大小：$fz；//多值变量$padding:2px4px6px8px;//类似数组的填充：$padding;左填充：nth($padding,1);//下标从1开始$maps:(color:red,fz:13px);//像json背景：map-get($maps,color);//特殊变量$display:disp;.#{$display}{width:10px;高度：10px；}}页脚{颜色：$c_blue；颜色：$c_yellow；//颜色：$c_red;//未定义的变量：“$color”。}}编译样式Cssbodyheader{color:red;字体大小：14px；填充：2px4px6px8px；左填充：2px；背景：红色；}bodyheader.disp{width:10px;高度：10px；}正文页脚{颜色：蓝色；颜色：黄色；}/*#sourceMappingURL=test.css.map*/Importsass导入（@import）规则不同于CSS。编译时@import的scss文件会被合并进去，只生成一个css文件。如果在sass文件中导入css文件如@import'reset.css'，效果和普通的css导入样式文件一样，导入的css文件不会合并到编译文件中，而是存在于@import的形式。下面是原生的css导入：导入文件的名称以.css结尾@import'***.css'导入文件的名称是一个URL地址@import'http://***'名称导入文件的url{}值为css@importurl(*.css)sass导入所有sass导入文件都可以忽略后缀.scss。一般来说，基本的文件命名方式都是以_开头，比如_mixin.scss。这种文件可以不用下划线导入，可以写成@import"mixin"。Nestedselector嵌套选择器嵌套是指在一个选择器中嵌套另一个选择器，实现继承，从而增强sass文件的结构和可读性。&父选择器的标识&表示父元素选择器，常用于&:hover组选择器的嵌套.container{h1,h2,h3{margin-bottom:.8em}}子组合选择器和同级组合选择器>+和~子组选择器>选择元素的直接子元素。（只有紧接在article下的子元素中命中section选择器的元素才会被选中）article>section{border:1pxsolid#ccc}同层相邻组合选择器+选择紧跟在header元素header之后的元素p{font-size:1.1em}同层所有组合选择器~，选择article之后同层的所有article元素，不管article~article之间隔了多少其他元素article~article{border-top:1pxdashed#ccc}attributeNested属性嵌套是指有些属性的起始词相同，比如border-width、border-color，都是以border开头。边界后必须添加冒号。@at-root跳出嵌套@at-root用于跳出选择器嵌套。默认情况下，所有的嵌套都会继承所有的上层选择器，但是通过这个，可以跳出所有的上层选择器。@at-root(without:...)and@at-root(with:...)默认情况下，@at-root只会跳出选择器嵌套，但不会跳出@media或@support，如果你想的话要跳出这两个Type，需要使用@at-root(without:media),@at-root(without:support)。这个语法中有四个关键字：all（意思是全部）、rule（意思是常规css）、media（意思是媒体）、support（意思是支持，因为@support还没有被广泛使用，所以这里就不展示了）.我们默认的@at-root实际上是@at-root(without:rule)。@at-root&combo未编译样式Scssbody{header{border:{color:red;半径：5px；}a{文本对齐：居中；&:hover{文本对齐：左；}@at-root.content{宽度：100px；}}}}@mediascreenand(max-width:520px){@at-root(without:mediarule){.content{height:200px;}}}@at-root.text-info{颜色：红色；@at-rootnav&{颜色：蓝色；}}编译样式Cssbodyheader{border-color:red;边界半径：5px；}正文标题a{text-align:center;}bodyheadera:hover{text-align:left;}.content{宽度：100px；}.content{高度：200px；}.text-info{颜色：红色；}nav.text-info{颜色：蓝色；}inheritedselectionSelector继承允许一个选择器继承另一个选择器的所有样式并共同声明它们。要使用选择器继承，使用关键字@extend后接需要继承的选择器。多重继承在一个选择器中有多个继承链。b继承.a,.c继承.b...限定不支持包含选择器(.a.b),相邻兄弟选择器(.a+.b)a如果有:hover,悬停状态也继承自placeholderselector%如果不调用，不会有多余的css文件，避免了在一些基础文件中预定义了很多基础样式，然后在实践中不管是否使用@extend都会解析所有样式继承相应的样式。占位符选择器使用%标志定义并由@extend调用。未编译样式Scss.header{background:blue;}.footer{font-size:12px;}.sidebar{width:12px}.content{height:13px}//多重继承.content-header{@extend.header;@extend.footer;@extend.sidebar,.content;color:red;}//链继承.a{width:12px}.b{@extend.a;高度:13px;}.c{@extend.b;border:2px;}//占位符%%d{width:12px}.e{@extend%d;height:13px}编译样式Css.header,.content-header{background:blue;}.页脚,.content-header{字体大小:12px;}.sidebar,.content-header{width:12px;}.content,.content-header{height:13px;}.content-header{颜色：红色；}.a,.b,.c{宽度：12px；}.b,.c{高度：13px；}.c{边框：2px；}.e{宽度：12px；}.e{高度：13px；使用@mixin声明混音，可以传参。参数名以$符号开头，多个参数用逗号分隔。您还可以为参数设置默认值。声明的@mixin由@include调用。混合指令（Mixin）用于定义可重用的样式，避免使用非语义类，例如.float-left。混合指令可以包含所有的CSS规则，大部分的Sass规则，甚至可以通过参数函数引入变量来输出多样化的样式。无参数mixin//sass风格//--------------------------------@mixincontent{margin-left：汽车;margin-right:auto;}.demo{@includecontent;}//css样式//------------------------------.demo{左边距：自动；margin-right:auto;}有参数mixin@mixincont($fz:14px){font-size:$fz;}body{@includecont(12px)}多个参数mixin调用时直接取值即可传入。如果@include传入的参数个数小于@mixin定义的参数个数，则按顺序表示，不足时使用默认值。如果没有默认值，就会报错。另外，也可以选择性的传入参数，使用参数名和参数值同时传入。@mixincont($color:red,$fz:14px){颜色：$color;font-size:$fz;}body{@includecont($fz:12px)}多组值参数mixin如果一个参数可以有多组值，比如box-shadow,transition等，那么参数需要在变量后面加三个点来表示，比如$shadow...@mixinbox-shadow($shadow...){-moz-box-shadow:$shadow;-webkit-box-shadow:$shadow;box-shadow:$shadow;}.shadow{@includebox-shadow(0px2px3px#ccc,4px5px6px#f2f)}@content可以用来解决css3的@media等引起的问题，它允许@mixin接受一整块样式，从@content开始。@mixinstyle-for-iphone{@mediaonlyscreenand(min-device-width:320px)and(max-device-width:568px){@content;}}@includestyle-for-iphone{字体大小：12px;}
