less使用小结

最新推荐文章于 2023-12-22 14:20:18 发布

sinat_41707161

最新推荐文章于 2023-12-22 14:20:18 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

分类专栏： less 文章标签： less

本文链接：https://blog.youkuaiyun.com/sinat_41707161/article/details/79913277

less 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了Less预处理器的基本概念，包括变量声明与使用、混合选择器、嵌套规则、父元素选择器、运算功能、函数应用、作用域规则、条件表达式、循环结构以及属性合并等内容。

一、关于变量

less中的变量要使用@xxx声明。

变量的使用方式

1.作为普通的变量

比如
@color:red;
使用的话就在css中
div{
   background-color:@color;
}

2.作为选择器或属性名，要用@{变量名}这种形式

比如有一个div
<div class="width"></div>
定义一个变量
@mydiv:width;
@{mydiv}{
   @{mydiv}:200px;
}
编译后css为
.width{
   width:200px;
}

3.作为URL

另外，less变量的特性：1.延迟加载 2.当有多个相同的变量名时，使用最后一个。

二、混合，所谓混合，就是一种将一个规则集引入另一个规则集的方式

1.普通混合

定义一个混合集

.font_h{
   color:red;
}
h1{
   font-size;30px;
   .font_h();
}
编译后
h1{
   font-size:30px;  
}

2.不带输出的混合，就是当你在一个css样式中引入一个混合集，却又不想改混合集输出到css样式中去渲染，可以在该混合集后加一个()

.font_h{
   color:red;
}
h1{
   font-size:30px;
   .font_h();
}
编译后
h1{
  font-size:30px;
}

3.带选择器的混合

.hover-mixin{
  &:hover{
     border:1px solid #ff0000;
  }
}
bottom{
   .hover-mixin();
}
编译后
bottom:hover{
   border:1px solid #ff0000;
}

4.带具有默认值参数的混合

.maxin(@color:blue){
   border:1px solid @color;
}
div{
  .maxin();
}
使用的时候应该传一个色值进去，如果没有参数，就使用默认值blue

5.带多个参数的混合，同上面，不过多个参数之间用分号相隔

6.匹配模式，在传值的时候定义一个字符，使用的时候使用哪个字符就调用哪条规则。

.color(r,@color:red){
  color:@color;
}
.color(b,@color:blue){
  color:@color;
}
.color(g,@color:green){
  color:@color;
}
h1{
  .color(r)
}
编译后
h1{
  color:red;
}

三、嵌套，模仿了HTML结构，是代码更加简洁

四、父元素选择器符号&。表示当前选择器的所有父选择器

如果将&放到当前选择器之后，就会当前选择器插入到所有父选择器之前

&&组合使用可以生成所有可能的选择器列表

五、运算功能任何数值颜色变量都可以计算

六、函数。less内部封装了很多函数可以调用

七、作用域。同js编程语言的作用域概念很像，不过less是在父作用域寻找变量。

八、条件表达式

1.比较运算符：>,<, <=, >=, = ,true

比如
#layout(@name){
  & when(@name=header){
     height:60px;
  }
}

2.类型检查函数：iscolor, isnumber, isstring, iskeyword, isurl等。

3.单位检查函数：检查一个值除了是数字，是否是一个特定的单位。

ispixel, ispercentage , isem, isunit等。

九、循环，混合可以调用自身，结合条件表达式，就可以写出循环。

.loop(@counter)when(@counter>0){
   .loop(@counter-1);
    width:(10px*@counter);
}
div{
  .loop(5)
}
编译后
div{
   width:50px;
   width:40px;
   width:30px;
   width:20px;
   width:10px;
}

十、合并属性 +

只要在需要合并的属性的：前面加上 + 号即可。

合并以逗号,分隔属性

可以使用+_分隔所有合并的属性。