Fork me on GitHub

sass学习日记

发表于 | 分类于
字数统计: 1,169 字 | 阅读时长 ≈ 5 分钟

sass学习

学习css预编译器sass。

CSS预处理器有好几种，less，sass，stylus等等。它们的优点是：语言级逻辑处理，有动态特性，可以改善项目结构。它们的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。所以今天选择其中的一种sass来学习，其实其他的本质上没有太大区别。

sass安装

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。可以先去官网下载ruby（http://rubyinstaller.org/downloads）。
在安装的时候，勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。

安装完Ruby之后，在刚才我们安装的ruby中，打开Start Command Prompt with Ruby，然后输入下列命令行进行安装sass操作：

1
gem install sass

查看是否安装成功：

1
sass -v

然后就可以使用了。

使用sass

网上教程有使用命令行的，我自己选择使用图形界面来进行操作，比较直观明了。下载Koala（http://koala-app.com/index-zh.html）。

koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

每次做项目的时候，新建style文件夹，其中放置各种scss文件。然后最后将style文件夹通过Koala编译成许多普通的css文件然后集成到一个css上（如index.css）。接着在页面引入这个index.css就可以了。（按照我的理解进行的表述 - -）

基本用法

变量

SASS允许使用变量，所有变量以$开头。

1
2
3
4
$blue : #1875e7;　
div {
　　color : $blue;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

1
2
3
4
$side : left;
.rounded {
	border-#{$side}-radius: 5px;
}//结果：border-left-ridius
计算功能

SASS允许在代码中使用算式。

1
2
3
4
5
body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}
嵌套

SASS允许选择器嵌套。这一点对我们编写样式是十分直观明了的。

1
2
3
div h1 {
　　color : red;
}

可以写成：

1
2
3
4
5
div {
　　h1 {
　　　color:red;
　　}
}

属性也可以嵌套，比如border-color属性，可以写成：

1
2
3
4
5
p {
　　border: {
　　　　color: red;
　　}
}

注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

1
2
3
a {
	&:hover { color: #ffb3ff; }
}
注释

SASS共有两种注释风格。

标准的CSS注释 / comment / ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
　　/!
　　　　重要注释！
　　*/

代码的重用

继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

1
2
3
.class1 {
　　　　border: 1px solid #ddd;
}

class2要继承class1，就要使用@extend命令： 　　

1
2
3
4
.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
}
Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。

1
2
3
4
@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
}

使用@include命令，调用这个mixin。

1
2
3
div {
　　　　@include left;
}

mixin的强大之处，在于可以指定参数和缺省值。

1
2
3
4
@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
}

使用的时候，根据需要加入参数：

1
2
3
div {
　　　　@include left(20px);
}

下面是一个mixin的实例，用来生成浏览器前缀。

1
2
3
4
5
@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

使用的时候，可以像下面这样调用：

1
2
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

1
2
3
4
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
插入文件

@import命令，用来插入外部文件。

1
@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令。

1
@import "foo.css";

高级用法

自定义函数

SASS允许用户编写自己的函数。

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

这也是很方便的一点。当时在做vue仿饿了么的时候就用到了stylus中相同的特性，通过传递不同参数，生成不同样式，进而使得代码量不冗余。