SASS安装 SASS编译 SASS基础语法

SASS 是个啥？

如果说css是钉子，那么less就是生产钉子机器，而sass则是全自动钉子生产线……如果你非要了解标准的定义，那么出门右转官方文档

SASS安装

请点击Window 系统下 Ruby安装 Sass安装 Compass安装

编码风格

• nested 嵌套缩进css风格，默认格式
• expanded 扩展的css风格，最常见的格式
• compact 简介css风格，没有注释
• compressed 压缩css风格，上线时使用

SASS命令

在git命令行中输入如下代码能自动编译index.scss文件，并生成index.css

$ sass index.scss index.css

按风格编译文档，比如压缩compressed 风格命令：

sass --style compressed index.sass index.css

每一次修改都有执行这些命令会影响开发效率，那么我们可以怎么办：

监听单个文件法，实现自动编译

sass --watch index.scss:index.css

监听整个文件夹法，实现自动编译

sass --watch app/sass:public/stylesheets

!注意!注意!注意：sass watch 默认配置是不支持中文目录，所以整个命令很有可能会报错CompatibilityError on line [“87”] encodings: GBK and UTF-8，建议用英文目录开发项目

---

废话太多，来点SASS语法

基础用法

引入文件

@import "normalize";

变量

$error: #f00;　
$left: left;
.test {
　　color : $error;
　　border-#{$left}-color : $error;
}

计算

//加减乘除都可以，但要注意单位
.box{
    width: (24px/2);
    height: (50px - 2px);
    padding: 1px 0px;
    border-radius:40/80*100%;
}

嵌套

//选择器嵌套
.content{
    color: green;
    .title{
        color: red;
    }
}
//属性嵌套,注意font后面有冒号
.box{
    width: 100px;
    font:{
        size: 24px;
        weight: bold;
    }
}
//引用父元素&
li{
    margin-left: 100px;
    &.on{
        margin-left: 0px;
    }
    &:hover{
        color:red;
    }
}

注释

你只要知道这个”！“就行了

/*! 
　　非常重要的注释，会保留到压缩文件内！
*/

继承

.error{
  color: red;
}
.serious-error{
  @extend .class-a;//继承.class-a获得color:red样式
  border:1px solid red;
}

混合mixin

//声明定义fatal，相当于js的一个函数
@mixin fatal($color, $size){
  color: $color;
  font-size: $size;
}
//用@include调用fatal,相当于js的函数调用
.serious-error{
  @include fatal(red,24px);
  border:1px solid red;
}

作为初级工程师，用好上面几个方法开发项目基本上就足够了，如果是开发复杂项目，再去官网研究吧。进入sass中文文档

注意：

最好在文件开头部分插入@charset "UTF-8";，可以避免不必要的麻烦，因为sass默认编码方式不能识别中文。
为了更好的，高效的生产css，我建议sass结合compass来使用，如果您想了解compass，请点击Compass用法指南