less、sass、stylus

less、sass、stylus

它们是三种类似的样式动态语言，属于css预处理语言，它们有类似css的语法，为css赋予了动态语言的特性、如变量、继承、运算、函数等。这么做是为了css的编写和维护。

它们使用的文件分别是：.less、.scss、*.styl,这些文件是不能再网页上直接使用的，最终要编译成css文件来使用，编译的方法有软件编译，或者用nodejs程序。

less、sass编译软件：
http://koala-app.com/index-zh.html

less中文网址：http://lesscss.cn/

less语法：

1、注释

    // 不会被编译的注释
    /* 会被编译的注释 */

2、变量

@w:200px;
.box{
    width:@w;
    height:@w;
    background-color:red;
}

 

3、混合

.border{
    border:1px solid #ddd;
}
.box(@w:100px,@h:50px,@bw:1px){
    width:@w;
    height:@h;
    border:@bw solid #ddd;
}
.box{
    .border;
    background-color:red;
}

 

4、匹配模式

.p(r){
    postion:relative;
}
.p(a){
    postion:absolute;
}
.p(f){
    postion:fixed;
}
.box{
    .p(f);
}

 

5、运算

@w:300px;
.box{
    width:@w+20;
}

 

4、嵌套

.list{    
    li{
        ...
    }
    a{
        ...
        &:hover{
            ...
        }
    }
    span{
        ...
    }
}

 

5、导入

// 导入common.less,导入a.css文件

@import "common";
@import (less) "a.css";

 

来源：oschina

链接：https://my.oschina.net/u/4392049/blog/3899302