Sass入门教程

Sass介绍

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。符合编程人员的思维

安装

• Sass是基于ruby的，假如已安装ruby，输入

　　gem install sass

就ok了

• sublime下安装请移步sublime安装Sass

基本使用

• 使用的时候后缀保存为.scss即可

屏幕上显示：  sass a.scss将显示的文件保存为.css后缀:： sass test.scss test.css

• sublime下将.scss.转化为.css
• 或者用koala软件转化

语法

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

$color:#ccc;body{    background-color:$color;} 

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

$position:left;div {    border-#{$position}-color: #ccc;}

计算功能

SASS是允许使用计算的

　　div {　　　　padding-left: (14px/2);　　　　// 还有各种四则运算，+、-、*、/　　}

嵌套规则

• SASS是允许选择器嵌套的，例如：

div a{      color:#ccc;}

可以写成

div{    a{         color:#ccc;   }}

• 属性也可以嵌套，border-color

div{    border:{            color:#ccc;   }}

也可以使用&引用父元素

a{    &:hover{}}

注释

/* comment */ css注释，编译后保留// 单行注释，编译后不保留

/*!    声明注释，加！编译后保存*/

继承与Mixin

• SASS允许继承

.classa{    color:#ccc;}.classb{    @extend .classa;}

• Mixin:是可以重用的代码块

@mixin demo {　            color: #ccc;            padding-left:5px;　　　　　}

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

　　div {　　　　@include demo;　　}

Mixin可以指定参数和缺省值。

　　@mixin demo($value: 10px) {　　　　padding-left:$value;　　}

根据需要加入参数：

　　div {　　　　@include left(20px);　　}

其它

这些由于本人用的比较少，不作解释

颜色函数

提供内置颜色函数，生成系列颜色

　grayscale() 　　　complement()　..... 

条件语句

@if

@if 条件 {　　　　　} @else {　　　　　　}

循环语句由于本人几乎不用，所以略过

自定义函数

利用function

　@function add($n) {　　　　@return $n + 2px;　　}　　#sidebar {　　　　width: add(5px);　　}