阮一峰<SASS用法指南>(简单入门)
结一<sass语法>(较为详细)
1.安装Ruby
windows可用RubyInstaller一键安装
RubyInstaller 下载有点慢，be patient！
rubyinstaller安装.png
记得把第二个给选了
安装完成后记得重启cmd,使用ruby -v 查看是否安装成功。
2.安装sass
在cmd中输入gem install sass
3.关于sass与scss文件
这两种的区别在于.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。原文地址
个人认为sass虽然比较简洁，但是并不符合大多数语言的编码习惯，而scss和css比较像，可读性较高，因此选择scss
scss:
.a {
color: blue;
font-weight: bold;
text-decoration: underline;
.b {
color:black;
}
}
sass:
.div
color: blue
.b
color: black
font-weight: bold
text-decoration: none
.c
color: white
4.基本语法
创建一个scss文件， test.scss
变量：
$bule: #1875e7;
$size: 10px !default;
.blue-font{
color: $blue;
font-size: $size;
}
.blue-font{
font-size:15px;
}
字符串：
$side: left;
.rounded{
border-#{$side}-radius: 5px;
}
计算：
$twopx: 2px;;
.left-4px{
margin-left: $twopx * 2;
}
嵌套(border后有：)：
.nest{
h1{
color:red;
border:{
width: 1px;
color: red;
style: solid;
}
}
}
嵌套中&表示父元素：
a {
&:hover { color: #ffb3ff; }
}
注释：
//这种注释编译后不会保留
/* 这是重要注释，编译后会保留 */
继承：
.extend1 {
border: 1px solid #ddd;
}
.extend2 {
@extend .extend1;
font-size:120%;
}
Mixin:
@mixin mixin-left($value: 10px) {
float: left;
margin-right: $value;
}
.include-div {
@include mixin-left(20px);
}
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
插入文件：
@import "path/filename.scss";
@import "foo.css";
5.高级语法
判断：
$value: 3;
.judge-p {
@if $value == 3 {
background-color: #000;
} @else {
background-color: #fff;
}
}
循环：
for：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while:
$wi: 6;
@while $wi > 0 {
.item-#{$wi} { width: 2em * $wi; }
$wi: $wi - 2;
}
each:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
自定义函数：
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
6. 编译
打开cmd, 在test.scss目录下sass test.scss test.css回车，即生成test.css
