SASS学习笔记（一）

一、为什么使用SASS

CSS不是编程语言，没有变量、条件语句等等，只是单纯的描述，因此为CSS加入编程元素（即“CSS预处理器”）。其基本思想：用一种专门的编程语言进行网页设计，然后再编译成CSS文件。SASS作为其中一种“CSS预处理器”，有许多优点（便利的写法，节省时间，就像JS中的jQuery；简单、可维护），可以用来写CSS（总之就是一门写CSS的编程语言）

 

 

二、安装

类似于bootstrap是基于jQuery的，SASS是用Ruby语言写的（但是两者语法没有关联，没有Ruby的基础没关系），所以安装SASS之前必须先安装Ruby。

ps. 以下均在Windows7操作系统下

1）http://rubyinstaller.org/downloads/  下载ruby（我选择的是Ruby2.2.3(x64)）

2）正常安装，选择框均全选（添加Ruby的bin文件夹到PATH用户变量和系统变量以使用 gem 命令工作。）

3）安装Ruby完毕后，win+r--cmd--enter 打开命令框，输入gem install sass，安装sass

4）不成功多试几次，安装成功即可使用sass了。

 

 

三、基本用法

1）变量，所有变量以$开头，如果变量镶嵌在字符串中，用#{}包含

$red:#f00;

$lside:left;

div{

　　color:$red;

　　border-#{$lside}-radius:10px;

}

2）计算功能，sass允许使用加减乘除算式

div{

　　width:100px+20px;

}

3）嵌套，sass可以将css中的包含选择器写成嵌套形式

3.1） 标签嵌套

css:

div  h2{

　　color:red;

}

写成sass：

div{

　　h2{

　　　　color:red;

　　}

}

3.2）属性嵌套（如border-color拆开成嵌套格式：如下）注意border后有冒号（想象成将-改成了：）

div{

　　border：{

　　　　color:red;

　　}

}

3.3）用&引用父元素（如a:hover改成）

a{

　　&:hover{

　　　　color:red;

　　}

}

4）注释

/*    */ 　　　　会保留到编译后的文件

// 　　　　　　   单行注释，只保留在sass文件中，编译后被省略

/*!     */           重要注释，即使压缩也会也会被保留，常用于声明版权信息

 

 

四、代码重用

1）继承，sass允许一个选择器继承另一个选择器，@extend 命令

.class1{

 　　color : red;

}

.class2{

　　@extend : .class1;

}

2）Mixin，使用@mixin 命令定义代码块，用@include 调用这个代码块

2.1）@mixin left{

　　float:left;

}

div{

　　@include  left;

}

2.2）用mixin指定参数和缺省值

@mixin left($value:20px){

　　float:left;

　　margin-left:$value;

}

div{

　　@include  left(10px);

}

 

 

五、颜色函数，指定颜色并用颜色函数（主要是加深或者减淡）生成系列颜色

lighten(#f00,20%)

darken(#f00,20%)

grayscale(#f00,20%)

complete(#f00)

 

 

六、高级语法

1）插入文件，用@import 命令

@import +路径

2）条件语句，@if和@else (可以将@想象成if后面的括号)

2.1）

div{

　　@if width<3 {

　　　　width:20px;

　　}@else{

　　　　width:10px;

　　}

}

2.2）循环语句，@for   @while  @each  用法同上

2.3）自定义函数，@function

@function double($n){

　　@return $n * 3;

}

div{

　　width:double(3px);

}

 

 

参考资料：http://www.ruanyifeng.com/blog/2012/06/sass.html  阮一峰SASS用法指南

转载于:https://www.cnblogs.com/hihao/p/6514802.html