SASS学习笔记

SASS 学习笔记

Sass语法

Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本。也就是说，所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件。另外，SCSS理解大多数CSShacks以及浏览器专属语法，例如IE古老的filter 语法。这种语种语法的样式表文件需要以.scss扩展名。
第二种比较老的语法成为缩排语法（或者就称为 “Sass”），提供了一种更简洁的CSS书写方式。它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，而且也不使用分号，而是用换行符来分隔属性。很多人认为这种格式比SCSS更容易阅读，书写也更快速。缩排语法具有Sass的所有特色功能,虽然有些语法上稍有差异；这些差异在{file:INDENTED_SYNTAX.md所排语法参考手册}中都有描述。使用此种语法的样式表文件需要以.sass作为扩展名。

sass的转换

1
2
3
4
5
# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss

# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

Sass 有三种使用方式： 命令行工具、独立的 Ruby 模块，以及包含 Ruby on Rails 和 Merb 作为支持 Rack 的框架的插件。 所有这些方式的第一步都是安装 Sass gem：

1
gem install sass

如果你使用的是 Windows， 就需要先安装 Ruby。

如果要在命令行中运行 Sass ,只要输入

1
sass input.scss output.css

你还可以命令 Sass 监视文件的改动并更新 CSS ：

1
sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件，你还可以命令 Sass 监视整个目录：

1
sass --watch app/sass:public/stylesheets

sass编译

命令行编译

单文件转换命令

1
sass style.scss style.css

单文件监听命令

1
sass --watch style.scss:style.css

文件夹监听命令

1
sass --watch sassFileDirectory:cssFileDirectory

css文件转成sass/scss文件（在线转换工具css2sass）

1
2
sass-convert style.css style.sass   
sass-convert style.css style.scss

编译格式

我们一般常用的有–style，–sourcemap，–debug-info等。

1
2
3
4
sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info

–style表示解析后的css是什么格式，有四种取值分别为：nested，expanded，compact，compressed。
–sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
–debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。

sass混合宏

混合宏的关键词

在sass中通过@mixin关键词声明一个混合宏，那么在实际调用中，其匹配了一个关键词@include来调用声明好的混合宏。

1
2
3
4
5
6
7
@mixin border-radius{   //对混合宏进行声明
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
button{
	@include border-radius: 3px;  //对声明出的混合宏进行使用关键字@include调用
}

此时编译出的css为

1
2
3
4
5
6
7
8
button{
	-webkit-border-radius: 3px;
	border: 3px;
}

## 混合宏的传参
sass有一个强大的混合宏功能：传参。混合宏传参有以下几种情形：
### 1.传一个不带值的参数

@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}

1
在调用是，给这个混合宏进行参数传递，即可。如，当我想传递给radius传参3px时。代码如下：

.box{
@include border-radius(3px);
}
此时编译出的结果为：

1
2
3
4
.box{
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

2.传一个带值的参数

在sass中可以给参数带一个默认的值，在调用时，就可以直接使用此默认值进行编译，这种情况适用于比较多地方使用默认值的时候，此时可设置一个默认值。

1
2
3
4
@mixin border-radius($radius: 3px){
	-webkit-border-radius: $radius;
	border-radius: $radius;
}

3.传递多个参数

sass中不仅可以传递一个参数，还可传递多个参数

1
2
3
4
5
6
7
@mixin size($width,$height){
	width: $width;
	height: $height;
}
.box-center{
	@include size(500px,300px);
}

sass扩展

sass继承

sass可以继承类中的样式代码块，在sass中是通过关键字@extend来继承已经存在的类样式块的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.btn{
	border: 1px solid #ccc;
	padding: 6px 10px;
	font-size: 14px;
}
.btn-primary{
	background: #f36;
	color: #fff;
	@extend: .btn;
}
.btn-second{
	background: orange;
	color: #fff;
	@extend .btn;
}

编译出的结果是精简的写法，不想之前通过@include进行编译的一样，通过@include编译出来的是没有简化写法的。

1
2
3
4
5
6
7
8
9
10
11
12
13
.btn,.btn-primary,.btn-second{
	border: 1px solid #ccc;
	padding: 6px 10px;
	font-size: 14px;
}
.btn-primary{
	background: #f36;
	color: #fff;
}
.btn-second{
	background: orange;
	color: #fff;
}

sass占位符（%placeholder）

占位符（%placeholder）声明的代码，如果不被@extend调用的话，不会产生任何代码。

1
2
3
4
5
6
%mt5{
	margin-top: 5px;
}
%pt5{
	padding-top: 5px;
}

以上代码若不被@extend调用，则不会产生任何代码块，但是当调用的时候，该代码块才会生效。

1
2
3
4
.btn{
	@extend %mt5;
	@extend %pt5;
}

此时解析出的结果为：

1
2
3
4
.btn{
	margin-top: 5px;
	padding-top: 5px;
}

使用混合宏，继承，占位符的方式和使用对象比较

!(PIC)[http://img.mukewang.com/55263aa30001913307940364.jpg]

sass插值#{}

1
2
3
4
5
6
7
8
9
10
@mixin firefox-message($selector){
	body.firefox #{$selector}:before{
		content : "Hi, firefox users!";
	}
}
@include firefox-message(".header");
//编译结果为
body.forefox .header:before{
	content: "Hi,firefox users!";
}

sass运算

加法

1
2
3
.box{
	width: 20px + 8in;
}

减法

1
2
3
4
5
$full-width: 960px;
$sidebar-width: 200px;
.content{
	width: $full-width - $sidebar-width;
}

乘法

乘法只能乘以一个数字，不能乘以一个数字加上单位，否则会报错

1
2
3
.box{
	width: 10px *2px;  //报错“20px*px isn't a valid CSS value.”
}

除法

除法在应用时，需要加上括号

1
2
3
4
5
6
7
.box{
	width: (100px / 2);
}
//编译后等价于
.box{
	width: 50px;
}

当使用变量或者其他运算常亮进行计算时，可以不加括号。

字符运算

在sass中可以使用符号+来实现字符串的链接。

1
2
3
4
5
6
7
8
9
$content: "hello" + " " + "sass!";
.box: before{
	ontent: "#{$content}";
}
//编译后等价于
.box: before{
	content: "hello sass!";
}
除了在变量中做字符连接运算以外，还可以直接通过加号把字符连在一起

div{
cursor: e + -resize;
}
//编译后等价于
div{
cursor: e-resize;
}
`
注意，如果有引号的字符串被添加了一个没有引号的字符串，结果会是一个有引号的字符串。
同样的，如果一个没有引号的字符串被添加了一个有引号的字符串，结果将是一个没有引号的字符串。

本文标题:SASS学习笔记

文章作者:ChangerHe

发布时间:2016-10-15, 15:37:18

原始链接:http://blog.changerhe.cn/2016/10/15/SASS学习笔记/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. Sass语法
    1. 1.1. sass的转换
  2. 2. sass编译
    1. 2.1. 命令行编译
    2. 2.2. 编译格式
  3. 3. sass混合宏
    1. 3.1. 混合宏的关键词
      1. 3.1.1. 2.传一个带值的参数
      2. 3.1.2. 3.传递多个参数
  4. 4. sass扩展
    1. 4.0.1. sass继承
    2. 4.0.2. sass占位符（%placeholder）
  5. 4.1. 使用混合宏，继承，占位符的方式和使用对象比较
    1. 4.1.1. sass插值#{}
  • 5. sass运算
    1. 5.1. 加法
    2. 5.2. 减法
    3. 5.3. 乘法
    4. 5.4. 除法
    5. 5.5. 字符运算
    • |