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;
}效果图
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);
}丑图
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官网学习，官网上够详细啦
