sass学习笔记

安装

安装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);
}