发表于

安装

安装Ruby

http://rubyinstaller.org/downloads

​ 添加环境变量

安装sass

  • 打开Start Command Prompt with Ruby

  • 在命令行输入

    gem install sass

    若失败则用淘宝RubyGems镜像安装

编译

​ 1.新建scss

​ 2.编译scss

​ sass --style compressed test.scss test.css

​ 编译风格：

  • nested ：嵌套缩进的css代码，它是默认值；
  • expanded ：没有缩进的、扩展的css代码；
  • compact ：简洁格式的css代码；

  • compressed ：压缩后的css代码；

    ​3.监听

  • 监听文件：sass --watch --style compressed test.scss:test.css

  • 监听文件夹：sass --watch --style compressed sass:css

语法

​ 1.变量 

1
2
3
4
5
6
7
8
9
10
$gray:#666;
$left: 20px;
$top:top;
div {
  background-color:$gray;//变量定义
  margin-left:$left+10px;//变量计算
  $width: 5em !global;//子选择器中定义的变量成为全局变量
  width: $width;
  border-#{$top}: 5px;//嵌套引用，用#{}包裹
}

​ 2.嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//选择器嵌套
//---------
ul {
  li {
    color:$gray;
  }
}
//属性嵌套
//-------
p {
  border: {
    color:red;
  }//border-color属性,border必须加冒号
}
//父元素引用
div {
  &:hover{
    color:red;
  }
}

​ 3.导入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//reset.scss
html,
body,
ul,
ol {
  margin:0;
  padding:0;
}
//test.scss
@import 'reset';
body {
  font-size: 100%;
  background-color:#b6b6b6;
}
//css
//----------
html,
body,
ul,
ol {
  margin: 0;
  padding: 0; 
}
body {
  font-size: 100%;
  background-color: #b6b6b6; 
}

​ 4.mixin

1
2
3
4
5
6
7
8
9
@mixin box-sizing($sizing){
  	-webkit-box-sizing: $sizing;
  		-moz-box-sizing: $sizing;
  			-box-sizing: $sizing;
}
.box-border {
  	border: 1px solid #ccc;
  	@include box-sizing(border-box)
}

​ 5.继承

1
2
3
4
5
6
7
.div1 {
  font-size:16px;
}
.div2 {
  @extend .div1;
  color:red;
}

​ 6.编程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//if
@if lightness($color) > 30% {
  	background-color:#b6b6b6;
}
@else {
  background-color:#fff;
}
//for
@for $i from 1 to 10 {
  	.div-#{$i} {
      	border:#{$i}px solid #fff;
  	}
}
//while
$i: 6;
@while $i > 0 {
  	.item-#{$i} { 
    	width: 2em *$i;
      $i = $i-2;
    }
}

​ 7.函数

1
2
3
4
5
6
@function double($n) {
  	@return $n * 2;
}
.div {
  width:double(5px);
}

​