码迷,mamicode.com
首页 > 其他好文 > 详细

Less学习笔记

时间:2016-05-22 15:12:21      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:

感谢慕课网的LESS即学即用课程。http://www.imooc.com/video/4825。视频课程地址。

1.koala考拉less编译器,nodejs库编译,浏览器端编译。

2.less中可以使用//注释,

  /**/会被编译到CSS中

  //注释在编译时会被删除

3.变量

申明变量要用@开头

@test_width:300px;

.box{

  width:@test_width;

}

4.混合Mixin

//直接将别的属性拷贝过来

.box2{

  .border_02(2px);

  .border_03();

  .box;

}

//混合-带参数

.border_02(@border_width){

  border:solid yellow @border_width;

}

//混合-默认参数

.border_03(@border_width:10px){

  border:solid yellow @border_width;

}

.border_radius(@radius:5px){

  -webkit-border-radius:@radius;

  -moz-border-radius:@radius;

  border-radius:@radius;

}//这样可以统一设置,比较方便

5.匹配模式

 

Less学习笔记

标签:

原文地址:http://www.cnblogs.com/Greekjone/p/5516655.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!