less的基本使用

比格杰森 2020-04-16

众所周知,less是一门css预处理语言,其他的类似还有scss、Stylus 等,和js相似度比较高的就是less了。话不多说,我们来看less的使用。

Node.js 环境中使用 Less :

npm install -g less

> lessc styles.less styles.css 

我用的vscode,编译后css文件在vscode项目文件里显示不出来,但是在本地路径下查看得到。

在浏览器环境中使用 Less :

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="<a target="_blank" href="https://www.ancii.com/link/v1/mPvXdERZ3QUsd4G0Rs8H5wjnP2dX_Pdmz6mWXRfTTbkkrwafAYDlyHgYdUYiSzyrZLzSY_s3XEgT7bQm2LeAY5WgUQBW8ceXAdzjtURQlwY/" rel="nofollow" title="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js">//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js</a>" ></script>

1.变量的使用

Less中,变量由变量名称和值组成。变量名以 @ 为前缀,由字母、数字、_和-组成,变量名称和值之间用冒号隔开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@width:80%;
@height:100px;
@color:blue;
 
.box{
   width:@width;
   height:@height;
   
   margin-top: 5px;
}
.box1{
   width:@width+10px;
   height:@height;
   
   margin-top: 10px;
}
.box2{
   width:@width+20px;
   height:@height;
   
   margin-top: 5px;
}<br><br>

 less变量也分全局变量和局部变量,不仅可以直接在属性值中使用变量,还可以用类似 @{name} 的结构,以“插值”的方式在选择器名、属性名、URL、import、媒体查询中使用变量。在编译时,变量将被替换为它们相应的值。

2.混合(是一种将一组属性从一个规则集包含到另一个规则集的方法)

.box1{
   width:@width+20px;
   height:@height;
   background-color: @color;
   margin-top: 5px; 
   .bordered();
}
.bordered{
   border-top:dotted 1px #ff0000;
   border-bottom:solid 2px #000000;
}

恩,就是定义一个类似函数的东西,然后引用它就行

3.嵌套

@width:80%;
@height:100px;
@color:pink;

.box{
   width:@width;
   height:@height;
   background-color: @color;
   margin-top: 5px; 
   p{
      color:red;
      font-size: 12px;
   }
   .username{
      color:#eeeeee;
      font-size: 16px
   }
}

等效于

.box{width:@width;height:@height;margin-top: 5px; }
.box p{color:red;font-size: 12px;}   
.box .username{color:red;font-size: 12px;}

这波操作也是很骚了,是不是想到了js函数嵌套啊~

4.运算

官网翻译哈:算术运算+、-、*、/可以对任何数字、颜色或变量进行运算。如果可能的话,数学运算在加、减或比较之前会考虑到单位并转换数字。结果具有最左边的显式单位类型。如果转换不可能或没有意义,则忽略单位。不可能的转换示例:px到cm或rad到%。

@count-1:5cm+10mm;
@count-2:5cm+10mm-2mm;
@count-3:5cm+10px;
@count-4:5cm-10px;
@count-5:5cm-10mm+50px;
@base:5%;
@filter:@base*2;
@color:#224488;
.d1{
   width:@count-1;
   background-color: @color+#111;
}
.d2{
   width:@count-2;
   background-color: @color+#222;
}
.d3{
   width:@count-3;
   background-color: @color+#333;
}
.d4{
   width:@count-4;
   background-color: @color+#444;
}
.d5{
   width:@count-5;
   background-color:@color+#fff;
}

效果图

less的基本使用

5.Escaping 

转义允许您使用任意字符串作为属性或变量值。在~“anything”或~“anything”中的任何内容都将按原样使用,除了插值之外没有任何更改。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

等效于

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

感觉是给了你自由,反而让人有点不习惯来了呢~

6.函数

这是我们最经常用到的东西,但是用法也很多,具体的还是参见函数手册

@width:0.5;
@base:#c0b40c;
.class{
   width:percentage(@width);
   color:saturate(@base,5%);
   background-color: spin(lighten(@base, 25%), 8);
}

丑图

less的基本使用

7.命名空间和访问器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    
  }
   .font{...}
   .tab{...}
}
 
#header a {
  color: orange;
  #bundle.button();  // 也可以写成#bundle > .button
}

这也是为了方便函数复用了,命名空间选择器了解一下。

命名空间不加()也行。

.box{
   width:@width;
   height:@height;
   background-color: @color;
   .username{
      color:#eeeeee;
      font-size: 16px;
   }
}
.box1{
   .box.username;
   width:@width;
   height:@height;
   background-color: @color;
  

}

8.Map

从3.5以下的版本开始,可以使用mixin和ruleset作为值的映射

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#library() {
  .colors() {
    primary: green;
    secondary: blue;
  }
}
 
#library() {
  .colors() { primary: grey; }
}
 
.button {
  color: #library.colors[primary];
  border-color: #library.colors[secondary];
}//等效于//.button { color: grey; border-color: blue; }  

再次感叹万能的对象!

这些还只是初步的less语法知识,下次我们再来深入了解吧!推荐大家去less官网学习,官网上够详细啦

转载文章;https://www.cnblogs.com/nature-wind8/p/10532043.html

相关推荐

Enjoyendless / 0评论 2020-06-11