最新消息:欢迎加入小松的QQ群一起讨论一起学习,服务器快到期了,新买了台服务器,最近要做服务器迁移

less 学习总结

前端技术 316浏览 0评论

最近在看less的时候,来总结一下学习的内容,目前很简单能看懂别人写的less,这就够了,学会下面的内容基本够用

less 学习总结

①less 可以用Koala来编译

Koala官方网站:http://koala-app.com/

②less中的注释

/*注释内容*/ 会编译
// 不会编译

变量是已@开头定义如:

@test_width:20px;
.div_width{
    width:@test_width
}

③混合

.div_hunhe{width:20px}
.div_hunhe1{
    height:20px;
    .div_hunhe
}

③混合带参数

.div_hunhecs(@w){
    width:@w;
}
.div_hunhecs1{
    height:20px;
    .div_hunhecs(20px);
}

④混合带参数,参数带默认值

.div_hunhecsd(@w:20px){
    width:@w;
}
.div_hunhecsd1{
    height:20px;
    .div_hunhecs();
}

⑤不匹配模式

.padding_test(top,@w:10px,@h:10px){
    width:@w;
    height:@h;
    padding-top:0px;
}
.padding_test(bottom,@w:10px,@h:10px){
    width:@w;
    height:@h;
    padding-bottom:0px;
}
.padding_test(left,@w:10px,@h:10px){
    width:@w;
    height:@h;
    padding-left:0px;
}
.padding_test(right,@w:10px,@h:10px){
    width:@w;
    height:@h;
    padding-right:0px;
}
.pipei{
   .padding_test(left); //选择left的样式
}

如果需要带个固定的样式不需要在每个匹配样式里写
可以写成

.padding_test(@_,@w:10px,@h:10px){
    color:red;
}

不管匹配哪个都会带上color:red的样式

⑥运算

@test:10px;
.yunsuan{
width:@test+10;
}
//运算得到宽度等于20px,+ – * /都可以

⑦嵌套规则

.qiantao{
    width:20px;
    li{
        color:red;
    }
    a{
        color:#ccc;
    }
}

解析成css样式

.qiantao{}
.qiantao li{}
.qiantao a{}

⑧less不解析

.jiexi{
    width:~'300px';
}

css中的滤镜等样式不需要less解析,可以使用~''注释为不解析

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» less 学习总结
本文链接地址:https://www.phpsong.com/2180.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!