SassSass使用指南-Ruby易峰官方文档安装安装rubygeminstallsass编译选项//编译格式sass--watchinput.scss:output.css--stylecompact//添加调试mapsass--watchinput.scss:output.css--sourcemap//打开调试信息sass--watchinput.scss:output.css--debug-info变量$blue:#1875e7;div{color:$blue;}$side:left;.rounded{border-#{side}-radius:5px;}计算体{margin:(14px/2);顶部：50px+100px；右：$var*10%；}嵌套divh1{颜色：红色；}div{h1{颜色：红色；}}p{边框：{颜色：红色；}}a{&:hover{颜色：#ffb3ff;}}/*使用&来引用父元素*/comment/*comment*///comment/*!重要评论！*/inheritance.class1{border:1pxslid#ddd;}.class2{@extend.class1;font-size:120%;}Mixin可重用代码块。@mixin左{浮动：左；margin-left:10px;}div{@includeleft;}指定参数和默认值：@mixinleft($value:10px){float:left;右边距：$value；}div{@includeleft(20px);}例子：@mixinrounded($vert,$horz,$radius:10px){border-#{$vert}-#{$horz}-radius:$radius;-moz-border-#{$vert}-#{$horz}-半径：$半径；-webkit-border-#{$vert}-#{$horz}-radius:$radius;}#navbarli{@includerounded(top,left);}#footer{@includerounded(top,left,5px)}颜色函数lighten(#cc3,10%)//#d6d65cdarken(#cc3,10%)//#a3a329grayscale(#cc3)//#808080complement(#cc3)//#33c插入文件@import"path/filename.scss";@import"foo.css";条款句p{@if1+1==2{border:1pxsolid;}@if5<3{边框：2px虚线；}}@iflightness($color)>30%{background-color:#000;}@else{background-color:#fff;}循环句@for$ifrom1to10{.border-#{$i}{边框：#{$i}px纯蓝色；}}$i:6;@while$i>0{.item-#{$i}{宽度:2em*$i;}$i:$i-2;}@a,b,c,d中的每个$member{.#{$member}{background-image:url("/image/#{$member}.jpg");}}自定义义数#functiondouble($n){@return$n*2;}#sidebar{width:double(5px);}
