首页 > 其他 > 详细

Less入门到上手——前端开发利器

时间:2016-09-16 19:42:10      阅读:160      评论:0      收藏:0      [点我收藏+]

摘录less官网的解释:

LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

以上是less官方解释,说下本菜的理解:less类似css的jquery,一个为css封装的库。

less最终还是被编译成css被读取。

1、less定义变量

/*声明变量*/
@var_width:120px;
/*使用变量*/
div{
   width:@var_width;
}

这样一段less代码被编译后的css是:div{width:120px;}

2、混合

@d_length:300px;    /*定义变量*/
.d_1{
    width:@d_length;
    height:@d_length;
    border:blue 1px solid;
    float:left;
    margin-left:20px;
}
.d_2{
    .d_1;                        /*混合  使用.d_1全部样式*/
    background-color:#808080;
    border-color:red;
}
.d_3{    
    .d_2;                        /*混合  使用.d_2全部样式*/
    border-color:yellow;
}

混合特性,less中可以重复使用样式。可以把每一个样式都看做一个封装好的函数,其他样式若需要便直接调用。

混合带参,less的混合和函数一样,也可以带参数,在遇到大量重复,但同一属性值又需不一样。这时就要用到混合参数。

/* 声明的带参混合 */
.div_style(@bg_color,@bor_color){
    width:300px;
    height:300px;
    border:@bor_color 3px solid;
    background-color:@bg_color;
    float:left;
    margin-left:20px;
}
.d_1{
    .div_style(#4491F6,#F63C18);
}
.d_2{
    .div_style(#F8F00A,#4491F6);
}

混合带参时,也可以直接给参数赋值,在使用时注意,定义带参混合若定义的参数有赋值使用时可以不传参,若定义的参数没赋值使用时就必须传参,若定义了参数值,使用时依然可以传参改变预先定义的参数值

/* 声明的带参混合 */
.div_style(@bg_color,@bor_color,@wid:300px,@hei:100px){
    width:@wid;
    height:@hei;
    border:@bor_color 3px solid;
    background-color:@bg_color;
    float:left;
    margin-left:20px;
}
/* 此时前两个参数必须传值,后两个则可传可不传。 */
.d_1{
    .div_style(#4491F6,#F63C18);
}
.d_2{
    .div_style(#F8F00A,#4491F6,600px,200px);
}

 

Less入门到上手——前端开发利器

原文:http://www.cnblogs.com/MirageFox/p/5591799.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!