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