LESS使用实例总结

来源：互联网发布：java 双引号转义编辑：程序博客网时间：2024/06/05 05:38

LESS使用实例总结

定义：

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

引入：

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

定义全局设置：

在less.js引入前加入一段js语句定义less全局编译设置

less = {

env: "development", // or "production"

async: false, // load imports async

fileAsync: false, // load imports async when in a page under

// a file protocol

poll: 1000, // when in watch mode, time in ms between polls

functions: {}, // user functions, keyed by name

dumpLineNumbers: "comments", // or "mediaQuery" or "all"

relativeUrls: false,// whether to adjust url's to be relative

// if false, url's are already relative to the

// entry less file

rootpath: ":/a.com/"// a path to add on to the start of every url

//resource

};

</script>

定义变量：

@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)};

还可以使用@arguments来引用所有传入的变量

.border(@a,@b,@color:blue){

border:@arguments;

}

.con2{.border(1px,solid)}

输出为：.con2{1px solid blue}

还可以使用参数的控制位来控制相同的类输出不同的样式

.border(cool,@color){

border:2px solid @color;

}

.border(hot,@color){

border:1px solid @color

}

.border(@_,@ye){

color:@ye;

}

调用：

.con2{.border(hot,red)}

.con1{.border(cool,blue)}

输出为：.con2(border:1px solid red;color:red)

.con1{border:2px solid blue;color:blue}

或者使用参数个数来控制输出那个类：

.border(@a){….}

.border(@a,@b){...}

如果传入一个参数则调用第一个定义，传入2个则调用第二个定义

层级嵌套定义：

比如class为con1的div下的ul下的li项中的a链接hover的color为red,不加下划线

div.con1{

ul{

li{

a{text-decoration: none;

&:hover{color:red};

}

条件语句判断：

可以在类函数定义时候使用条件判断

.border(@a) when (@a>10),(@a<3){

border:@a solid blue;

}

.con1{.border(5px)}

这里的条件是大于10或者小于3，所以调用不成立

.border(@a) when (@a>10) and (@a<15){

border:@a solid blue;

}

.con1{.border(12px)}

这里的条件是大于10并且小于15 ，调用成立，条件语句中那个px可以加也可以不加，判断都通过

还可以使用内置函数unit来增加或者取出单位

.border(@a) {

border:unit(@a,px) solid red;

}

.con2{.border(5)}

输出 .con2{border:5px solid red;},如果写成unit(5px) 则去掉单位输出5

&可以用于代表父选择器

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;

}

LESS内置函数：

除了上面介绍的unit外

ceil(@number); // 向上取整

floor(@number); // 向下取整

percentage(@number); // 将浮点数转换为百分比，例如 0.5 -> 50%

round(number, [places: 0]); // 四舍五入取整

saturate(@color, 10%); // 饱和度增加 10%

desaturate(@color, 10%); // 饱和度降低 10%

lighten(@color, 10%); // 亮度增加 10%

darken(@color, 10%); // 亮度降低 10%

fadein(@color, 10%); // 透明度增加 10%

fadeout(@color, 10%); // 透明度降低 10%

其他的详见less中国官网：

http://www.lesscss.net/

0 0