Less前端框架--编写模块化的样式文件

Posted 2021-04-05 Lily的前端笔记

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，混入，函数等特性，使CSS更易维护和扩展。

less使用考拉Koala软件来转换为css格式

说明一下：

把装有less文件的less文件夹拖拽进Koala软件，然后按Comple转换，会出现success弹窗，证明转换成功
以下是相关less的知识点，还有其他关于less知识点我没有在这里列出来，也没有深入去学了，因为对于本人来说以下的知识点学完已经够本人使用来编写样式了，有兴趣深入学习less的你们，就需要你们自己去学了，希望以下知识点对你们有所帮忙：

注释（/**/ （可以选中多行注释）和//（一行行注释））

变量</a>（@开头）

@test_width:300px;

.box{

  Width:@test_width;

}

例子

需要注意的地方

想声明变量的话一定要用@开头例如：@变量名：值

混合（定义）

.box{

  width:@test_width;

height:@test_width;

background-color:yellow;

 

.border;

}

//混合

.border{

  Border:5pxsolid prink;

}

例子

注意：若你混合值那有参数，使用时需要带参数值；但如果混合值有参数而且赋予了值。使用时可以不带参数

.border_03(@border_width:10px){

    border:solid green @border_width;

}

.test_hunhe_03{

  .border_03();

}

如何形成三角形?

.saojiao{

   width:0;

   height:0;

   overflow:hidden;

   border-width:10px;

   border-color:transparent transparent red transparent;

   border-style:dashed dashed solid dashed;

}

@_</a>的表明是必须把其带上，不管执行哪个关于它的代码

.triangle(@_,@w:5px,@c:#ccc){

   width:0;

   height:0;

   overflow:hidden;

}

运算</a>（加、减、乘）

加法：

@test_01:300px;

 

.box_02{

  Width:@test_01+20;

}

 

减法：

@test_01:300px;

.box_02{

   Width:@test_01-20;

}

 

@test_01:300px;

.box_02{

  Width:@test_01-20*5;

}

颜色</a>也可以运算（用得比较少）

@test_01:300px;

.box_02{

   width(@test_01-20)*5;

   color:#ccc-10;

}

函数运算
例子

嵌套

Less中嵌套

两种用法：1）&对尾类使用  -hover或focus

                 2)对连接的使用  -&-item

例子

如：css中的表示

.list{}

.list li{}

.list a{}

.list span{}

在list里面嵌套（在less中的表示）

.list{

   width:600px;

   margin:30pxauto;

   padding:none;

 

   li{

   height:30px;

line-height:30px;

   background-color:pink;

   margin-bottom:5px;

   padding:0 10px;

   }

 

}

在less中<a>hover</a>的写法

a{

   float:left;

   &:hover{

    color:red;

}

span{

   float:right;

}

}

 

相当于

.list a{}

.list a:hover{}

//&代表他的上一层选择器

@arguments变量（用得不是很多）

@arguments包含了所有传递进来的参数

如果你不想单独处理每一个参数的话就可以像这样写：

 

.border_arg(@w:30px,@c:red,@xx:solid){

   border:@arguments;

}

@argunments代表所有的@w/@c/@xx

.border_arg(@w:30px,@c:red,@xx:solid){

   border:@arguments;

}

 

.test_arguments{

  .border_arg(40px);

}

注意：这个改变了@w的参数

避免编译

1）有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法

2）要输出这样的值我们可以在字符串前加上一个~

例如：width:~’ calc(100%-35)’

.test_03{

  Width:~’calc(300px-30px)’

}

说明：这样就不会编译（比较好，可以用在路径等方面）

! important</a>(优先级最高的)（一般不要用上）

!important关键字

-会为所有混合所带来的样式，添加上！important

.test_important{

  .border_radius() !important;

}