1.1 Sass--CSS 编译器
SASS 用法指南
- http://www.ruanyifeng.com/blog/2012/06/sass.html
- http://www.sass-lang.com/
SASS 是一种 CSS 的开发工具, 提供了许多便利的写法, 大大节省了设计者的时间, 使得 CSS 的开发, 变得简单和可维护.
1.1.1 安装
SASS 是 Ruby 语言写的, 但是两者的语法没有关系. 不懂 Ruby, 照样使用. 只是必须先安装 Ruby, 然后再安装 SASS.
假定你已经安装好了 Ruby, 接着在命令行输入下面的命令:
gem install sass
然后, 就可以使用了.
1.1.2 使用
SASS 文件就是普通的文本文件, 里面可以直接使用 CSS 语法. 文件后缀名是. scss, 意思为 SassyCSS.
下面的命令, 可以在屏幕上显示. scss 文件转化的 css 代码.(假设文件名为 test.)
sass test.scss
如果要将显示结果保存成文件, 后面再跟一个. css 文件名.
sass test.scss test.css
SASS 提供四个编译风格的选项:
* nested: 嵌套缩进的 css 代码, 它是默认值.
* expanded: 没有缩进的, 扩展的 css 代码.
* compact: 简洁格式的 css 代码.
* compressed: 压缩后的 css 代码.
生产环境当中, 一般使用最后一个选项.
sass --style compressed test.sasstest.css
你也可以让 SASS 监听某个文件或目录, 一旦源文件有变动, 就自动生成编译后的版本.
- // watch a file
- sass --watch input.scss:output.css
- // watch a directory
- sass --watch app/sass:public/stylesheets
SASS 的官方网站, 提供了一个在线转换器. 你可以在那里, 试运行下面的各种例子.
1.1.3 基本用法
1.1.3.1 变量
SASS 允许使用变量, 所有变量以 $ 开头.
- $blue : #1875e7;
- div {
- color : $blue;
- }
如果变量需要镶嵌在字符串之中, 就必须需要写在 #{} 之中.
- $side : left;
- .rounded {
- border-#{$side}-radius: 5px;
- }
1.1.3.2 计算功能
SASS 允许在代码中使用算式:
- body {
- margin: (14px/2);
- top: 50px + 100px;
- right: $var * 10%;
- }
1.1.3.3 嵌套
SASS 允许选择器嵌套. 比如, 下面的 CSS 代码:
- div h1 {
- color : red;
- }
可以写成:
- div {
- hi {
- color: red;
- }
- }
属性也可以嵌套, 比如 border-color 属性, 可以写成:
- p {
- border: {
- color: red;
- }
- }
注意, border 后面必须加上冒号.
在嵌套的代码块内, 可以使用 $ 引用父元素. 比如 a:hover 伪类, 可以写成:
- a {
- &:hover { color: #ffb3ff; }
- }
1.1.3.4 注释
SASS 共有两种注释风格.
标准的 CSS 注释 /* comment */ , 会保留到编译后的文件.
单行注释 // comment, 只保留在 SASS 源文件中, 编译后被省略.
在 /* 后面加一个感叹号, 表示这是 "重要注释". 即使是压缩模式编译, 也会保留这行注释, 通常可以用于声明版权信息.
/*!
重要注释!
*/
1.1.4 代码的重用
1.1.4.1 继承
SASS 允许一个选择器, 继承另一个选择器. 比如, 现有 class1:
- .class1 {
- border: 1px solid #ddd;
- }
class2 要继承 class1, 就要使用 @extend 命令:
- .class2 {
- @extend .class1;
- font-size:120%;
- }
- 1.1.4.2 Mixin
Mixin 有点像 C 语言的宏 (macro), 是可以重用的代码块.
使用 @mixin 命令, 定义一个代码块.
- @mixin left {
- float: left;
- margin-left: 10px;
- }
使用 @include 命令, 调用这个 mixin.
- div {
- @include left;
- }
mixin 的强大之处, 在于可以指定参数和缺省值.
- @mixin left($value: 10px) {
- float: left;
- margin-right: $value;
- }
使用的时候, 根据需要加入参数:
- div {
- @include left(20px);
- }
下面是一个 mixin 的实例, 用来生成浏览器前缀.
- @mixin rounded($vert, $horz, $radius: 10px) {
- border-#{$vert}-#{$horz}-radius: $radius;
- -moz-border-radius-#{$vert}#{$horz}: $radius;
- -webkit-border-#{$vert}-#{$horz}-radius:$radius;
- }
使用的时候, 可以像下面这样调用:
- #navbar li { @include rounded(top, left); }
- #footer { @include rounded(top, left, 5px); }
1.1.4.3 颜色函数
SASS 提供了一些内置的颜色函数, 以便生成系列颜色.
- lighten(#cc3, 10%) // #d6d65c
- darken(#cc3, 10%) // #a3a329
- grayscale(#cc3) // #808080
- complement(#cc3) // #33c
1.1.4.4 插入文件
@import 命令, 用来插入外部文件.
@import "path/filename.scss";
如果插入的是. css 文件, 则等同于 css 的 import 命令.
@import "foo.css";
1.1.5 高级用法
1.1.5.1 条件语句
@if 可以用来判断:
- p {
- @if 1 + 1 == 2 { border: 1px solid; }
- @if 5 <3 { border: 2px dotted; }
- }
配套的还有 @else 命令:
- @if lightness($color)> 30% {
- background-color: #000;
- } @else {
- background-color: #fff;
- }
1.1.5.2 循环语句
SASS 支持 for 循环:
- @for $i from 1 to 10 {
- .border-#{$i} {
- border:#{$i}px solid blue;
- }
- }
也支持 while 循环:
- $i: 6;
- @while $i> 0 {
- .item-#{$i} { width: 2em * $i; }
- $i: $i - 2;
- }
each 命令, 作用与 for 类似:
@each $member in a, b, c, d {
- .#{$member} {
- background-image:url("/image/#{$member}.jpg");
- }
- }
1.1.5.3 自定义函数
SASS 允许用户编写自己的函数.
- @function double($n) {
- @return $n * 2;
- }
- #sidebar {
- width: double(5px);
- }
来源: http://www.jianshu.com/p/b4d6fef78ddf