sass的一些小点点

1、什么是sass？

SASS是一种CSS的开发工具，是一种优秀的前端样式预处理器。
提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

2、安装和使用

因为sass是基于ruby的，所以我们首先要对ruby进行安装：

ruby安装配置

下载Ruby（emmm最好不要下载最新版本，不稳定？）

Window 系统下，我们可以使用 RubyInstaller 来安装 Ruby 环境；
首先，我们进入ruby官网进行对应版本的下载并进行安装：

双击 rubyinstaller-2.5.0.exe 文件，启动 Ruby 安装向导。
点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，直到 Ruby 安装程序完成 Ruby 安装为止。

检测Ruby安装是否成功

安装完成后 在命令行进行检测看是否安装成功
输入ruby -v，显示版本则表示安装成功

ruby安装成功后，我们就可以进行sass的安装了

sass安装

在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby
输入gem install sass 显示如下就说明安装成功了

下面我们来看一下sass的版本
输入sass -v ，显示如下，可见sass已成功安装

3、简单压缩一个css文件

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

首先打开hbuilder创建一个名为sass的项目，在此项目下创建mysass.scss文件，在这个文件里随便写些样式，例如：

body{
    margin:0;
    padding:0;
}
ul{
    margin:0;
    padding:0; 
}
li{
    list-style:none;
}

接下来我们开始压缩它：
打开当前目录的命令行，输入sass -style compressed mysass.scss mysass.css,如图所示：

我们继续返回hbuilder会发现已经压缩成功了：出现了mysass.css文件和mysass.css.map文件

打开mysass.css文件 我们会看到压缩过的代码：

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

 // watch a file
　　sass --watch input.scss:output.css
// watch a directory
　　sass --watch app/sass:public/stylesheets

(这里的input和output均为你自己命名的输入输出文件名，)

4、sass的基本用法

(1) 变量

sass允许使用变量，所有变量以$开头。
定义一个名为“timi”的变量，让它的值为灰色：

/*jianting.scss*/
$timi:#eeeeee;
div{
    color:$timi;
}

保存后，我们可以启动sass的监听，在文件目录下打开命令行，输入sass --watch jianting.scss:jianting.css实时监听（改变scss文件代码并保存后，css文件同步更新）

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
定义左边圆角为5px：

$side : left;
　　div {
　　　　border-#{$side}-radius: 5px;
　　}

（2）计算功能

sass允许在代码中使用算式：

       $var:40;
　　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

（3） 嵌套

sass允许选择器嵌套。比如，下面的css代码：

div h1 {
　　　　color : red;
　　}

可以写成：

　　div {
　　　　h1{
　　　　　　color:red;
　　　　}
　　}

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

　　p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

注意，border后面必须加上冒号。

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

　　a {
　　　　&:hover { color: #ffb3ff; }
　　}

（4）注释

sass共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

　　/*! 
　　　　重要注释！
　　*/

5、代码的重用

（1）继承(用@extend)

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

　　.class1 {
　　　　border: 1px solid #eee;
　　}

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

　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

（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的实例，我们需要body的宽高都重用变量MyWidth和MyHeight的：
“`
$MyWidth:100px;$MyHeight:100px;
@mixin timi($w,$h){
width:$w; height:$h;
}
body{
@include timi($MyWitdh,$MyHeight);

sass文件：
![](http://upload-images.jianshu.io/upload_images/8153279-770542d18c7ca30f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####（3） 插入文件
@import命令，用来插入外部文件。
`
　　@import "path/filename.scss";
`
如果插入的是.css文件，则等同于css的import命令。
`
　　@import "bianliang.css";
`
##6、高级用法
####（1）条件语句
@if可以用来判断：

　　p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

![](http://upload-images.jianshu.io/upload_images/8153279-d2e5db727aae6aa3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

配套的还有@else命令：

div{
@if 1 + 1 == 2 {
border: 1px solid;}
@else {
border: 5px solid;
}
}

![](http://upload-images.jianshu.io/upload_images/8153279-d6bebc7f685540d9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####（2） 循环语句
sass支持for循环：

　　@for $i from 1 to 10 { 　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

![](http://upload-images.jianshu.io/upload_images/8153279-f92e887606f77c03.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

也支持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");
　　　　}
　　}

（3）自定义函数

sass允许用户编写自己的函数：

$ttt : 5;
@function Timi($t){
@return $t + 2;
}
body{
margin: Timi($ttt)px;
}


emmm，基本上sass的一些小点点差不多练习到了，基本的使用可能也许maybe差不多。。。emmmm下来还是多练习吧~over