sass knowledge

sass.md

Sass和Compass必备技能之Sass篇

[TOC] 标签（空格分隔）： CSS预处理 Sass

---

div

## 1. 目标 1. 使用Sass和Compass写出更优秀的CSS。 2. 结局CSS编写过程中的痛点问题，如精灵图合并图等。 3. 有效组织样式，图片，字体等项目元素

2. Sass后缀名

.sass:

h1
    color: #000
    background: #fff

.scss(3.0版本开始引进)

h1 {color: #000; background: #fff}

注意：一个项目中可以混合使用两种语法，但不能在同一个文件中使用两种语法

3. Sass和Compass的安装和试用

1. curl命令（利用URL语法在命令行方式下工作的开源文件传输工具）： -s: 不显示下载进度和错误信息 -S: 下载失败，显示错误信息 -f: http error(404,403)，统一返回22错误码 -L: 当访问的URL地址返回302重定向head时，curl跟进到重定向后的地址，进行下载

2. 使用gem安装 $ gem install sass $ gem install compass

3. 使用sass编译 $ sass a.scss a.css

4. 使用Compass初始化项目文件 $ compass create myProject 会在当前目录下创建一个名为myProject的文件夹

5. 使用sass转换文件格式 $ sass-convert main.scss main.sass 反之亦然

4. Sass语法

1. 定义变量使用$符号；

2. 引入其他sass文件：@import "variables"，此时引入variables文件的sass文件称为宿主文件；

3. CSS中原生的@import指令两大弊端： 1）放在代码最前边； 2）对性能不理。

4. 使用css原生@import的既定规则： 1）当@import后边跟的文件名是以.css结尾的时候； 2）当@import后边跟的是http://开头的字符串的时候； 3）当@import后边跟的是一个url()函数的时候； 4）当@import后边带有media queries的时候。

5. 使用@import基于sass的既定规则： 1）没有文件后缀名的时候，sass会添加.scss或者.sass的后缀； 2）同一目录下，局部文件和非局部文件不能重名。

局部文件：_file.scss 非局部文件：file.scss 引入方式均为：@import "file"

6. 合并多个@import语句 @import "variables", "compass/reset";

7. sass的注释 //...的注释编译时会自动忽略 /*...*/的注释会显示到css文件中

8. Sass项目结构

CONTENTS   ... SETTINGS   variables.............变量集中存储文件

  mixin............mixin集中存储文件 Tools   ... COMPONENTS   reset.............Compass内置浏览器样式重置文件 BUSINESS   ... BASE   screen.scss.............针对当前站点主页的样式修饰文件

9. 样式嵌套

.A {
    .B {
    // ...
    }
}

10. 父类选择器：&

a {
    &:hover {
        // ... 
    }
}

11. 属性嵌套（使用冒号）

font: {
    size: 16px;
    weight: bold;
}

12. 支持hsl()取色方式，并自动编译为16进制的颜色值

13. 支持自定义函数：@function

14. 支持自定义mixin：@mixin，一般置于文件顶部，@import之后，或单独放于一个文件中:

@mixin name(params) {
    // content
}

15. 带参数的mixin：

@mixin col ($width) {
    width: $width;
}
// 带默认参数的mixin
@mixin col ($width:50%) {
    width: $width;
}

16. 继承 1）extend不可以继承选择器序列 2）使用%，用来构建只用来继承的选择器

// 支持多重继承
.A {
    @extend .B;
}

%father {
    // ...
}
.son {
    @extend %father;
}

17. Sass中的@media跟CSS区别： sass中的media query可以内嵌在css规则中，在生成CSS的时候，media query才会被提到样式的最高层级。

好处：避免了重复书写选择器或者打乱样式表的流程。

18. 使用@at-root解决嵌套的副作用： 增加了样式修饰的权重，制造了样式位置的依赖。 为嵌套的深层样式指定样式，且置于@at-root代码块中：

.main{
    @at-root {
        .main-a{
            // ...
        }
    }
}

编译结果将是

.main {
    // ...
}
.main-a {
    // ...
}

19. Sass中的条件判断

@mixin col-sm ($width: 50%) {

    @if type-of($width) != number {
        @error "$width必须是一个数值类型，你输入的width是：#{$width}.";
    }

    @if not unitless($width) {
        @if unit($width) != "%" {
            @error "$width应该是一个百分值，你输入的width是：#{$width}.";
        }
    } @else {
        @warn "$width应该是一个百分值，你输入的width是：#{$width}.";
        $width: percentage($width / 100);
    }

    @media (min-width: 768px) {
        width: $width;
        float: left;
    }
}

20. Sass中的其他语句（不常用）： @each、@for、@while

21. config.rb配置output_style： :expanded：常规css格式 :nested：缩进嵌套格式 :compact：针对单个元素的选择器的格式 :compressed：压缩后的生产版本