sass学习笔记

参考文档

• 官网 SASS中文网
• sass阮一峰sass阮一峰

起步

• sass是可以通过ruby来安装.ruby下载
• 安装ruby后安装sass和compass。依赖ruby的rubyGems系统，就是ruby的包管理系统

gem install sass
gem install compass

• 编译sass文军为ccs代码

sass test.scss test.css

• sass提供四种编译风格
  1. nested。嵌套缩进的css代码，它是默认值。
  2. expanded ：没有缩进的、扩展的css代码。
  3. compact：简洁格式的css代码。
  4. compressed：压缩后的css代码。（生产环境一般用这个）

sass --style compressed test.sass test.css

• 使用在线转换

变量

• 变量很简单，使用$开头即可

$blue:#187ec7;//变量声明
div{
    color:$blue;//变量引用
}

嵌套css规则

.div {
    width:500px;
    .div_Children{
        height:50px;
    }
}

转换为css为

.div{
    width:500px;
}
.div .div_children{
    height:50px;
}

---

另外一种是属性也可以嵌套

div{
    border:{
        color:red;
        width:1px;
    }
}

转换后ccs为

div{
    border-color:red;
    border-width:1px;
}

---

在嵌套代码块中，使用 & 引用父元素。这个用来实现伪类非常好

a{
    &:hover{
        color:red;
    }
}

继承。

-- sass可以实现继承

.boderClass{
    border:1px solid #ddd;
}

class2继承boderClass使用 @extend命令

class2{
    @extend .boderClass;//继承
    color:red;
}

代码重用。

使用Mixxin

@minxin left{//声明
    float:left;
    margin-left:20px;
}

使用@include命令调用mixxin

div{
    @include left;
}

@minxin还支持参数

@minxin border($color:red){//默认值
    border:1px solid $color
}

引用

.dvi{
    @include .boder(#fff);
}

引入文件

@import命令，用来插入外部文件。使用该命令会合并为一个文件

@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令。表示还是单个文件下载

@import "foo.css";

其他

-- for循环.for使用的比较多，像bootstrap的24 分栏就需要用到

@for $i from 0 through 24 {
    .col-md-#{$i} {
        width: 100%/24*$i; 
    }
}

该函数就会生成

.col-md-1{
    width: 8.33333333%;
}
.col-md-2{
    width: 16.66666667%;
}
...col-md-24

-- 函数

@function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px);
}