CSS预编译

为什么要学习css预编译

CSS入门简单，深入就比较难，虽然样式简单，但难以维护。需要考虑大量的样式，覆盖、权重和很多!important。

什么是 css预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

css预处理器语言

现今市面上主要有 Sass、Less、Stylus 这三类预处理器语言。

1、背景介绍

2、Sass和Less对比

Sass入门

Sass环境安装

编写scss代码，通过sass的工作引擎编译成css代码，最后的部署阶段，其实部署的是生成的css代码，从这个流程可以看出sass并不是万金流，使用命令行也好，使用服务端集成框架也好，使用图形用户界面工具也好，最关键的环节是输入css，从这里也可表现出sass就是帮助我们更快的写出具有高可维护性的css代码

/*sass语法*/
h3
  color: #eee
  font-size:12px

/*scss语法*/
h3{
  color: #eee;
  font-size:12px;
}

使用命令行转换格式： sass-convert main.scss main.sass

嵌套(Nesting)

/***选择器嵌套***/
 .recom-r{
      ul{
        li{
        color:red;
          &:nth-child(1) a,&:nth-child(2) a{
            border-right:none;
          }
           a{
            border: 1px 0  0 #ddd;
          }
        }
      }
    }
    //编译为
    .recom-r ul li{
     color:red;}
    .recom-r ul li a {
     border-bottom: 1px solid #ddd; }
   .recom-r ul li:nth-child(1) a, .products-recom .modcon .recom-r ul li:nth-child(2) a {
     border-right: none; }


     /***属性嵌套嵌套***/
     .abc{
      border:{
        style:solid;
        left:{
         width:4px;
         color:red;
        }
        right{
          width:1px;
          color:blue;
        }
      }
     }
     //编译为
     .abc{
       border-style: solid;
       border-left-width: 4px;
       border-left-color: red;
       border-right-width: 1px;
       border-right-color: blue; 
     }

导入 @import 

@import "reset" //这里是简写 _reset.scss,以下划线开头的scss文件默认不自动编译出来，是专门用来导入的文件

变量 $

/***默认变量***/
$default-color: #2898fd;
body{
  color:$default-color;
}
//解析如下
body{
  color:#2898fd;
}
/***多值变量***/
$a-color:red blue yellow;
a{
  &:hover{color:$a-color,1}
  &:active{color:$a-color,2}
}
//解析如下
a:hover{color:red}
a:active{color:blue}

注：compass中采用中划线的方式命名

注释

    /* */  标准的css注释方式 
    // 这种单行注释是不会解析到css文件中

混合(mixin)

@mixin transition($transition){
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}
a{
 @include transition(all 0.2s linear);
}
//编译为
a{
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

运算

body{
  width:100%;
}
article{
  width:600px / 1200px *100%;
}
//编译为
body{
  width:100%;
}
article{
  width:50%；
}

扩展/继承@extent 

.a{
  color:red;
  font-size:12px;
  padding:10px;
}
.b{
   @extent .abc;
   margin:10px;
}
.c{
   @extent .abc;
  margin:20px;
}
//编译为
.a, .b , .c{
  color:red;
  font-size:12px;
  padding:10px;
}
.b{
   margin:10px;
}
.c{
   margin:20px;
}

控制指令

/******@if******/
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//编译为
p {
    color: green; 
  }

/******@while******/
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
//编译为
.item-6 {
    width: 12em;
}
.item-4 {
    width: 8em;
}
.item-2 {
    width: 4em; 
}

选择器

子组合选择器 > :选择一个元素的直接子元素 同层相邻组合选择器 + :选择紧跟在后面的同级元素 同层全体组合选择器 ~ :选择所有跟在后的同层元素

颜色函数

$ sass -i
> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值
得出：#c82858
> rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值
得出：rgba(200, 40, 88, 0.65)
> red(#c82858) //从#c82858颜色值中得到红色值200
得出：200
> green(#c82858) //从#c82858颜色值中得到绿色值40
得出：40
> blue(#c82858) //从#c82858颜色值中得到蓝色值88
得出：88
> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65)两颜色按比例混合得到一个新颜色
rgba(200, 40, 80, 0.65105)
> lighten(red,10%)//将red颜色安装亮度值增加10%
得出：#ff3333
> darken(red,10%)//将red颜色安装亮度值变暗10%
得出：#cc0000
>complement(red)//获取red颜色的补充色
得出#00ffff
...

注：详细参见Sass官网

Compass框架

介绍

Compass是一个强大的Sass框架，能够利用它写出可维护性更高的样式表。 Compass由三个主要部分组成：混合器和实用工具的类库，能够集成到应用开发环境中的开发系统，以及一个用于构建框架和扩展的平台。
Compass自身包含了很多由Sass混合器和函数构成的模块，所有的这些模块在Compass的官网上都有详细的说明和示例。
这些库会帮助你解决跨浏览器兼容问题，以及提供给你很多已经被证明过的优秀模式，比如说重置、网格布局、列表样式、表格辅助器等。 注：Comapass官网

安装

使用命令行： gem install compass（这样就创建好了）

项目初始化

先创建一个文件夹 mkdir compasstext, 点击进入这个文件 cd compasstext, 创建compass项目的文件 compass create mallApp, 点击进入这个文件 cd mallApp, 这个时候我们想要清楚 可以输入 compass clean 如果想重新开始编译 可以输入 compass compile 开启监听 可以输入：compass watch

常见的命令操作 输入compass -h进行查看

编译

Compass模块

compass采用模块的结构，不同的模块提供不同的功能，总共内置了五个模块：

.rounded {
   @include border-radius(5px);
}
//编译后
.rounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

比如行内区块，写法如下：

#inline-block {
     @include inline-block;
}
//编译后
#inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
}

比如透明，写法如下：

#opacity {
    @include opacity(0.5); 
}
//编译后
 #opacity {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
    opacity: 0.5;
}

//指定页面的footer部分总是出现在浏览器最底端：
#footer {
    @include sticky-footer(54px);
}
//指定子元素占满父元素的空间：
#stretch-full {
    @include stretch; 
}
//编译为
#stretch-full {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

比如指定链接颜色的mixin为：

 link-colors($normal, $hover, $active, $visited, $focus);

使用时写成：

a {
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}

.clearfix {
    @include clearfix;
}
//编译为
.clearfix {
  overflow: hidden;
  *zoom: 1;
}

比如表格,写法如下:

table {
    @include table-scaffolding;
}
//编译后
table th {
    text-align: center;
    font-weight: bold;
}
table td,
table th {
     padding: 2px;
}
table td.numeric,
table th.numeric {
    text-align: right;
}

比如制作雪碧图（Sprite） 个人认为这个是compass中的重中之中，实在太强大。 你需要将合并的图片放在一个文件夹下面，compass会自动合并成一张图片，并且设定好坐标 写法如下：

@import "icons/*.png"; @include all-icons-sprites; //all-後面接著的「icons」代表文件夹的名称
//编译后
.icons-sprite, .icons-facebook, .icons-twitter, .icons-yahoo { 
    background: url('icons-s0859518ac7.png') no-repeat;
} 
.icons-facebook { background-position: 0 0; }
.icons-twitter { background-position: 0 -32px; } 
.icons-yahoo { background-position: 0 -64px; }

注：功能太多，详细查看Comapass官网

Sass调试

1、Koala调试方式

1.Koala上点击相应的文件，然后就会出现右边的编译选项，即可选择是否开启source map，debug info
2.打开Chrome浏览器，F12打开调试面板，点击调试面板右上角的齿轮图标打开设置，在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS
3.开启--sourcemap编译，f12打开调试面板，就可以看到原先右边的css文件变成了我们现在的scss文件
4.点击scss文件，会跳到source里面的scss源文件，现在可以在里面进行修改，修改完成后可以右键选择save或save as命令，然后替换我们本地的scss源文件，刷新chrome就可以看到变化（注意，解析样式需要一定时间）。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。

2、命令行调试方式