SASS使用说明

前言

Sass,Syntactically Awesome StyleSheets。
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。

安装

1、下载安装ruby
2、安装好ruby后,再ruby命令行中输入gem install sass

语法

变量

sass中可以定义变量,方便统一修改和维护。

1
2
3
4
5
6
7
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
font-family: $fontStack;
color: $primaryColor;
}

嵌套

sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none`;
}
}`。

导入

sass中如导入其他sass文件,最后编译为一个css文件,优于纯css的@import

1
2
3
4
5
6
7
8
9
// reset.scss

html,
body,
ul,
ol {
margin: 0;
padding: 0;
}

1
2
3
4
5
6
@import 'reset';

body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
}

mixin

sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

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

扩展/继承

sass可通过@extend来实现代码组合声明,使代码更加优越简洁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}

.success {
@extend .message;
border-color: green;
}

.error {
@extend .message;
border-color: red;
}

.warning {
@extend .message;
border-color: yellow;
}

运算

sass可进行简单的加减乘除运算等

1
2
3
4
5
6
7
8
9
10
11
.container { width: 100%; }

article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}

颜色

sass中集成了大量的颜色函数,让变换颜色更加简单。

1
2
3
4
5
6
7
8
$linkColor: #08c;
a {
text-decoration:none;
color:$linkColor;
&:hover{
color:darken($linkColor,10%);
}
}

&表示当前元素

伪类和伪元素在CSS中是常用的一种方式,比如最常见的是链接的伪类或者说伪元素:after和:before的使用。大家常看到的就是清除浮动的clearfix:

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix {
*zoom: 1;
}

那么在Sass中,使用&会变得更简单,更方便:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$lte-ie: true !default;

.clearfix {
@if $lte-ie {
*zoom: 1;
}

&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
overflow: hidden;
}
}

&不止用于和伪类的结合,还可以用于多类选择器、后代选择器、相邻兄弟选择器、媒体查询中的嵌套等。

2016.07.30补

Sass编码错误

ruby环境sass编译中文出现Syntax error: Invalid GBK character。

解决办法如下:打开ruby中sass的安装目录,在其中找到engine.rb。在engine.rb中所有的require XXX之后,添加

1
Encoding.default_external = Encoding.find('utf-8')

PS:小编的engine.rb的路径为D:\Program Files\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb

scss自动编译为css

如果希望某一个scss文件或者相应的文件夹下面文件修改后,自动进行编译,那么可以使用侦听命令。
1、侦听文件

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

2、侦听文件夹

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

3、封装为脚本
为了避免每次运行都敲命令,我们把上述命令分装为脚本scss.bat。

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

海哥哥封装了不一样的scss-wap.bat,其中的参数至今没有看懂,可以实现同样的效果。

1
2
3
4
@echo off
sass -C -t compressed --watch scss:css
rem sass -C -t compact --watch scss:css
pause

该命令的含义为:

书签

sass安装
http://www.w3cplus.com/sassguide/install.html

SASS用法指南
http://www.ruanyifeng.com/blog/2012/06/sass.html

sass入门
http://www.w3cplus.com/sassguide/

SASS 初学者入门
http://www.oschina.net/translate/the-absolute-beginners-guide-to-sass

Sass参考手册
http://sass.bootcss.com/docs/sass-reference/

SassMeister在线调试
http://www.sassmeister.com/

Sass中连体符(&)的运用

ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法
http://www.tuicool.com/articles/f2YVRv
http://www.cnblogs.com/zhidong123/p/3902270.html

SASS的安装和转换为CSS的方法
http://www.cnblogs.com/52css/archive/sass-how-to-install-and-use.html

前端之Sass/Scss实战笔记
http://www.tuicool.com/articles/iERVJbB
http://segmentfault.com/a/1190000003742313

0%