首页 > 代码库 > less 学习笔记
less 学习笔记
1 什么是less
LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性,less 编译工具koala.exe
2 less语法
less中有很多的语法规则，但个人觉得less中比较常用的也是最重要的就下面几个：
变量、混合规则（mixin）、模式匹配、嵌套，& 指代上一层的选择器
不常用的：arguments 避免编译 ！important
1. 先来看下变量的简单用法，less中有变量运算，(参与运算任何一个参数带有单位即可)
//less 重点//变量//mixin 混合//模式匹配//嵌套规则@test-width:100px;@test-size:12px;.wrap{ color: red; width:(@test-width*3); font-size: @test-size*12; height: @test-width+12;}
编译产出物，就是css啦
.wrap { color: red; width: 300px; font-size: 144px; height: 112px;}
2. 混合规则（mixin）,相当于定义一个类，在别的类中直接包含进来，看下具体情况吧
@test-width:100px;@test-size:12px;.wrap{ color: red; width:(@test-width*3); font-size: @test-size*12; height: @test-width+12; /*下面是mixin进来的default-border的样式*/ .default-border;}.default-border{ border: solid 1px red; box-shadow: 0px 0px;}
对应的css编译结果为==>
.default-borde会出现在css中，如果是定义成.default-border(@varName){...}这个不会出现在产出物css中，定义的产出物只会出现在mixin中,看下面的代码-2.wrap { color: red; width: 300px; font-size: 144px; height: 112px; /*下面是mixin进来的default-border的样式*/ border: solid 1px red; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px;}.default-border { border: solid 1px red; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px;}
代码2-
1 .border01(@b1){ 2 border: solid @b1*10 red; 3 } 4 5 .width-1(@w1:100px;){ 6 font-size:@w1; 7 border-radius: @w1 - 14; 8 } 9 10 .test{11 .border01(3);12 .width-1();13 }
产出物代码2-
1 .test {2 border: solid 30 #ff0000;3 font-size: 100px;4 border-radius: 86px;5 }
3.模式匹配
预先定义一系列的类，这些都会有不同的参数，不同的参数其内部的样式是不同的，mixin的时候根据传入的参数不同而自动匹配到不同的类
例如：四个不同方向的箭头
1 //direction bottom: 2 .tg(bottom){ 3 border-width: @test-width - 70; 4 border-color: red transparent transparent transparent ; 5 border-style: solid dashed dashed dashed ; 6 } 7 //direction right: 8 .tg(right){ 9 border-width: @test-width - 70;10 border-color: transparent transparent transparent red ;11 border-style: dashed dashed dashed solid; 12 }13 //direction left: 14 .tg(left){15 border-width: @test-width - 70;16 border-color: transparent red transparent transparent ;17 border-style: dashed solid dashed dashed ; 18 }19 //不管匹配到哪一个，这个一定会匹配到的，@_必须这种写法，所有的参数必须保持一致20 .tg(@_){21 width: 0;22 height: 0;23 overflow: hidden;24 }25 26 .sj{27 .tg(bottom);28 }
对应产出物==> 所有.tg不出出现在css中,只有.sj会出现在css中
1 .sj {
//这就是想下的箭头2 border-width: 30px;3 border-color: red transparent transparent transparent ;4 border-style: solid dashed dashed dashed ;5 width: 0;6 height: 0;7 overflow: hidden;8 }
3.嵌套规则和 &
1 .list{ 2 margin: 0; 3 padding: 0; 4 list-style:none; 5 li{ 6 width: 100px; 7 height: 50px; 8 } 9 a{10 float: left;11 border:solid 1px red;12 //&代表他的上一层选择器符号13 &:hover{14 background: red;15 }16 }17 }
产出物==>
1 .list { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 } 6 .list li { 7 width: 100px; 8 height: 50px; 9 }10 .list a {11 float: left;12 border: solid 1px red;13 }14 .list a:hover {15 background: red;16 }
4. 其他不重要的
arguments
.t-arguments(@style:solid,@width:1px,@color:#ffddff){ border: @arguments;}.test-arguments{ .t-arguments(dashed,5px);}
output==>
.test-arguments { border: dashed 5px #ffddff;}避免编译
1 /*koala 会吧210px-20px编译，这不是我们想要的，calc是css3的属性，应交给浏览器编译*/2 .t-comile{3 width:calc(210px-20px);4 }5 /*避免编译*/6 .t-cancel-compile{7 width: ~‘calc(210px-20px)‘;8 }
output==>
1 /*koala 会吧210px-20px编译，这不是我们想要的，calc是css3的属性，应交给浏览器编译*/2 .t-comile {3 width: calc(190px);4 }5 /*避免编译*/6 .t-cancel-compile {7 width: calc(210px-20px);8 }
!important,会把所有的mixin进来的所有的属性都后缀加上！important
.t-important(@width:200px,@height:200px){ width: @width; height: @height;}.test-important{ .t-important() !important;}
output==>
.test-important { width: 200px !important; height: 200px !important;}
less 学习笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。