LESS的总结

LESS使用实例总结

定义：

LESS将CSS赋予了动态语言的特性,如变量,继承,运算,函数等,LESS可以在客户端运行,也可以在服务端运行

引入：

LESS应用的样式文件后缀名为.less,引入样式表,然后再引入less.js,然后通过localhost打开页面,即可看到效果

定义变量：

@color:red;

Body{background-color:@color};

定义的变量应用没有前后顺序要求，为了阅读方便，最好能将变量定义在应用该变量的地方前面

定义函数：

函数列子：
.default(@color){

background-color:@color;

border:1px solid @color;

}

这样就定义了一个函数default，前面的.必须加上，使用这个函数就直接在要使用这个样式的元素后调用就可以

.con1{default(red)};

这样就给class为con1的元素使用了函数default定义的一组样式，background-color和border的颜色为红色

函数的参数可以设定一个默认值，调用的时候不传值，就使用默认值 ###

.default(@color：red){

background-color:@color;

border:1px solid @color;

}

还可以定义一个变量，然后在函数定义的时候直接传变量

@re:red;

@ye:yellow;

.con1{default(@ye)};

.con2{default(@re)};

函数体内定义的变量作用域也只是函数体内，

@yu:pink;

@col:yellow;

.default(@color){

@yu:red;

background-color:@color;

border:1px solid @yu;

}

.default2(@color){

@yu:yellow;

background-color:@color;

border:1px solid @yu;

}

.con1{.default(@col)};

.con2{.default2(@yu)};

&可以用于代表父选择器

p { font-size: 12px;

a { text-decoration: none;

  &:hover { border-width: 1px }

}

代表了：

p {

font-size: 12px;

}

p a {

text-decoration: none;

}

p a:hover {

border-width: 1px;

}