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语法：

一、注释

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

二、变量

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

 

三、混合

.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; }

 

四、匹配模式

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

 

五、运算

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

 

四、嵌套

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

 

五、导入

// 导入common.less,导入a.css文件
 @import "common"; @import (less) "a.css";