首页 > 代码库 > less 学习笔记

less 学习笔记

2024-11-05 20:23:02   203人阅读

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 }
View Code

产出物代码2-

技术分享
1 .test {2   border: solid 30 #ff0000;3   font-size: 100px;4   border-radius: 86px;5 }
View Code

 

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 学习笔记


联系
我们