1、基本命令sass是通过gem安装的。下面是删除ruby镜像地址gem源的一些基本命令--removehttps://rubygems.org/add淘宝镜像gem源-ahttp://ruby.taobao.org查看镜像gem源码-v单文件转换命令sassstyle.scssstyle.css单文件监控命令（监控会自动编译）sass--watchstyle.scss:style.css文件夹监控命令sass--watchsassFileDirectory:cssFileDirectorycssfileintosass/scssfile(在线转换工具css2sass)sass-convertstyle.cssstyle.sasssass-convertstyle.cssstyle.scss运行命令行帮助文档，可以得到所有配置选项sass-h--style表示解析后的css的格式。有四个值：nested,expanded,compact,compressedsass--watchstyle.scss:style.css--stylecompact----------------下面是compass----------compass创建编译目录，会生成一个config.rb文件，里面包含一些配置compasscreatesassAPPcompasscompilecompasscompilecompasscompile--forcecompassmonitorcompasswatchcompasswatch--force2.sass基本语法1.variable//变量默认值默认为20px，赋值后为18px$fontsize:18px;$fontsize:20px!default;p{font-size:$fontsize;//18px}//多值变量：可以直接使用，也可以作为数组取值$paddings:7px10px9px8px;$many:(color:red,font-size:24px,border:solid1pxblue);//像一个array.btn{padding:$pad叮叮当当；//直接使用padding-left:nth($paddings,2);//作为一个数组，从中获取值background-color:map_get($many,color);//作为一个数组，从中获取值border:map_get($many,border);//作为一个数组，从中获取值}//Compiled.btn{padding:7px10px9px8px;左填充：10px；背景色：红色；border:solid1pxblue;}//局部变量和全局变量body{//局部变量，不能用在footer$color:red;颜色：$颜色；//全局变量$font-size:16px!global;}footer{//color:$color;//局部变量font-size:$font-size;//可以使用全局变量}//选择器中使用的变量$className:main;.#{$className}{margin:10px;padding:5px;}//变量中的下划线和负号同义$text-info:blue;$text_info:red;section{color:$text-info;}2.嵌套和继承body{background-红色;//选择器嵌套header{background-color:green;}//属性嵌套页脚{background:{color:red;尺寸：100%50%；}}a{//引用父选择器&:hover{color:blue;}&.contain{背景颜色：黄色；}}}//继承与多重继承.alert{background-color:#FED;}.small{font-size:12px;}.alert-info{@extend.ale室温;@extend.small；//用下面的方法替换//@extend.alert,.small;}//链继承.one{border:solid1pxred;}.two{@extend.one;颜色：蓝色;}.three{@extend.two;border-radius:5px;}//占位符选择器不会生成得到%alert{color:green;}.alert-danger{@extend%alert;}incss3.numericaltypeandmixin//digitaltype$n1:1.2;$n2:12;$n3:14px;.body{font-size:$n3;}//字符串类型$s1:container;$s2:'container';$s3:"container";.#{$s1}{font-size:$n3;}//布尔类型$bt:true;$bf:false;//空类型$null:null;body{@if($null==null){color:红色的;}}//颜色类型$c1:blue;$c2:#fff;$c3:rgba(255,255,0,0.5);body{color:$c3;}//加减乘除$width1:12px;$width2:13px;body{宽度:$width1+$width2;.header{宽度：$width1-$width2;}}a:before{content:'A'+bc;}a:before{content:A+'bc';}p{padding:3px+4pxauto;}$version:3;p:before{//方法使用变量content:'hello,sass#{$version}'}p{font-size:20px/10px;字体大小：（20px/10px）；宽度：$width2/2；height:round($width2)/2;}//引用片段@mixincont{color:red;font-size:18px;}//Function,:blue可以去掉@mixincont1($color:blue){color:$color;}//多参数函数@mixincont2($color,$font-size){color:$color;字体大小：$字体大小；}正文{@include续；@includecont1（绿色）；@includecont2(green,20px);}p{@includecont2($font-size:good,$color:green);}//多值函数，变量个数变量@mixinbox-shadow($box-阴影...){-webkit-box-shadow:$box-shadow;-moz-box-shadow:$box-shadow;盒子阴影：$盒子阴影；}body{@includebox-shadow(2px2px0pxblue,-2px-2px0pxgreen);}//内容传递@mixinstyle-for-iphone{@mediaonlyscreenand(max-width:768px)and(min-width:240px){边距:10px;@内容;}}@includestyle-for-iphone{font-size:24px;background-color:#fff;}//编译后@mediaonlyscreenand(max-width:768px)and(min-width:240px){margin:10px;字体大小：24px；background-color:#fff;}4.函数，调试（一般不用）//自定义函数@functiondouble($width){@return$width*2;}.container{width:double(5px);}$颜色：rgb（255,0,255）；主体{颜色：$颜色；背景色：rgba(255,255,0,0.5);边框颜色：rgba($color,0.5);宽度：500px；高度：500px；p{//颜色加深函数color:darken($color,5);背景颜色：变亮（$color，5）；//奇妙的功能，谁会这样用？z-index:str-length('你好世界');//11a-index:str-index('abcdefg','d');//4}}//用于测试判断，控制台输出//@debug'Thisisadebugtest';//@warn'Warn';//@error'Error';@functionThree($width){@if($width>3){@error'$width错误';}@return$width*3;}body{width:#{Three(2)}px;;//6px}@functiongetIndex($layer:default){$zIndexMap:(default:1,modal:100,dropdown:500,grid:300);$z-索引：1；@ifmap-has_key($zIndexMap,$layer){$z-index:map_get($zIndexMap,$layer);}@return$z-index;}p{z-index:getIndex(modal);z-index:getIndex(abc);}//编译p{z-index:100;z-index:1;}5、条件语句，loop//if三目操作$screenWidth:600px;body{color:if($screenWidth>768px,blue,red);}//if条件语句body{@if$屏幕宽度>768px{颜色：红色；}@elseif$screenWidth<500px{颜色：蓝色；}@else{颜色：绿色；}}//for循环通过包含5，而不包含5@for$ifrom1through5{span#{$i}{width:20%*$i;}}//while循环$j:5;@while$j>0{.div#{$j}{width:20%*$j;}$j:$j-2;}//each常规遍历$k:1;@each$cinredbluegreenyellow{.section#{$k}{background-color:$c;}$k:$k+1;}//每个列表遍历@each$key,$colorin(default,blue),(info,green),(danger,red){.text-#{$key}{背景颜色：$颜色；}}//每个地图遍历@each$key,$colorin(default:blue,info:green,danger:red){.label-#{$key}{background-color:$color;}}@functionscreenDivide($Num){$num:$Num;$地图：（默认值：0）；@for$ifrom1to$num{$mapValue:(#{$i}:percentage(1/$num)*$i);$地图：地图合并（$地图，$地图值）；}$map:map_remove($map,defaultvalue);@return$map;}@each$key,$valueinscreenDivide(5){.slider#{$key}{width:$value;}}
