sass学习笔记

参考文档

• 官网
• sass阮一峰

起步

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

gem install sassgem 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);}复制代码