less的基本使用
众所周知,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="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></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官网学习,官网上够详细啦