今日完成：

LESS详细

首先扩展文件名的格式是 xxx.less

在此推荐大家在练习环节可以用

<script src="less.js"...> 这种方式编译less

但在实际项目中 还是用命令行的 lessc xxx.less>xxx.css 方式然后引入编译后的css文件 这样减少在运行时上面出现的问题

//安装less

npm install -g less

变量

@变量名:值

@width：100px;

.box{

    width:@width;

}

混合

定义classa 然后可以将classa引入到classb中

.classa(a){

    width:@width;

}

.classb{

    .classa(a);

}

嵌套规则

父级{

    子集

}

函数和运算

可以将值计算

@the-border: 1px;

@base-color: #111;

@red:        #842210;

#header {

  color: @base-color * 3;

  border-left: @the-border;

  border-right: @the-border * 2;

}

#footer { 

  color: @base-color + #003300;

  border-color: desaturate(@red, 10%);

}

SASS详细

首件扩展文件名的格式是 xxx.scss 或者是 xxx.sass

使用方法: sass xxx.scss xxx.css

编译风格：

nested:嵌套缩进的css代码，默认

expanded:没有缩紧的,扩展的css代码

campact:简介格式的css代码

compressed:压缩后的css代码(生产环境)

使用的时候　sass --style compressed xxx.sass xxx.css

监听目录

sass --watch xxx.scss:xxx.css //监听文件

sass --watch scsspath:csspath //监听文件夹

变量

$变量名:值

$width：100px;

.box{

    width:$width;

}

如果变量包含字符串则写在 #{}之中

$c:color;

.box{

    border-#{$c}:red;

}

嵌套计算

less和sass嵌套相同，计算同理

继承

同less混合相同 定义classa 然后再classb可饮用classa值

//使用方法 定义classa 

.classb{

    @extend .classa

}

Mixin

即重用代码块

//使用方法先用@mixin命令定义一个代码块

@mixin left(参数1，参数2){

    float:left;

    margin-left:10px;

}

//使用@include调用刚刚定义的代码块

.box{

    @inclidu left(参数1，参数2);

}

颜色函数 lighten(颜色，百分比)

插入文件

@import命令插入外部文件 .scss和css都可

条件语句

//@if 可以用来判断 @else 则是配套

.box{

    @if 1+1>1 {width:100px;}@else {

        width:200px;

    }

}

循环语句

//@for @while @each

@for $i from 1 to 10{

    border-#{$i}{

        border:#{$i}px solid red;

    }

}

//@while

$i:6;

@while $i>0{

    .item-#{$i}{

        width:2em*$i;

    }

    $i:$i-2;

}

//@each

    @each $member in a, b, c, d {

　　　　.#{$member} {

　　　　　　background-image: url("/image/#{$member}.jpg");

　　　　}

　　}

自定义函数

@function name($n){

    @return $n*2;

}

.box{

    width:name(value);

}

总结

总体来说sass和less都有各自的好处，这要根据每个开发者的习惯和爱好来使用，都可提高开发效率，当然还有stylus等工具，因为目前未使用过所以不做评判，个人比较倾向sass，至于比较，两者都有其优缺点，如果你开发环境中并没有ruby 并且你不想安装ruby 你就可以使用less，如果你觉得sass的语法你更倾向并且你安装了ruby 你就可以使用sass。总之工具不重要，码出一手好代码才是真理。

明天计划：开始js学习