CSS高效开发实战 （笔记）

书名： CSS高效开发实战 CSS3 LESS SASS Bootstrap Foundation
作者： 谢郁 编著

第十四章 LESS 和 SASS

1 CSS 存在重复，需要一种对 CSS进行 预处理 的中间语言。

14.1 CSS缺陷

1 无法定义变量  
2 重复代码 ： CSS 的继承机制 是根据HTML 的层级关系来决定的，子元素继承 父元素的部分属性。
3 计算问题。
4 作用域 跟命名空间。

14.2 Less

１　为ＣＳＳ赋予了　变量　继承　运算　函数　等功能，既可以在客户端运行，也可以借助node.js 或者Rhino 服务器。
2  less编译 为 CSS文件后 才能被浏览器识别。
        以下几款常用编译工具：
            1  Koala 2 Winless 3 SimpleLess 
3 可以客户端（浏览器）进行调试。
    1 引入.less文件 2 引入less.js

14.3 Less操作：

1 变量： 使用@ 关键词定义

@color:#ccccccc
#header{
    color:@color;
}

2 使用 Mixin混入：

.rounded-corners(@radius:5px){
    border-radius:@radius;
}

#header{
    .rounded-corners;
}
#footer{
    .rounded-corners(10px);
}

其语法关键词是一个. 符号。
3 内嵌原则：
可以用内嵌来编写层叠样式。

#main{
    div li {
        list-style:none;
    }
    .container{
        margin:auto;
    }
}

4 可以进行运算

14.4 使用SASS

1 安装
第一步：安装 Ruby
第二步： gem install sass 安装 sass
2 使用变量： 1 )以一个$ 开头 的就是,2)同时支持 内嵌到字符串中,使用#{}进行包裹；

$blue:#1875e7;
div{
    color:$blue;
}
$side:left;
.rounded{
    border-#{$side}-radius:5px;
}

3 计算 ：统less一样。
4 可以使用@import 引入外部文件

@import "path/filename.scss";

5 使用@extend 继承

.class1{
    border:1px solid #ddd;
}
.class2 {
    @extend .class1;
    font-size:120%;
}

6 使用 @mixin 混入
可以使用@mixin 定义一个代码块，支持参数 ，使用@include 调用这个Mixin。

@Mixin float_left{
    float：left;
}
div{
    @include float_left;
}

7 使用 @function 定义函数

@function double($n){
    @return $n *2;
}
#sidebar{
    width:double(5px);
}

8 控制语句：
@if ，@for ，@ else ， @while ， @each

14.5 使用sass 扩展库compass

Compass 帮助我预定义好了一些常用的Mixin和function 。
有以下几个模块组成。

1. CSS3 （Mixin）
   带有属性前缀的兼容代码，
   例如：元素透明度，圆角设置等
2. Reset（Mixin）
   清楚浏览器的默认样式。
3. Utilities （Mixin）
   对开发中经常用到的样式进行封装。主要包括以下几个类：
   links ，Lists，Text，Color，General，Sprites，Tables

4. Helpers （主要是函数）

5. layout ：提供栅格系统 和一些简单的布局样式。