less概述
Lesscss 是一门 CSS 预处理语言,简称less。它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 服务端 或浏览器端。
less使用方式
直接使用:官网下载less.js(http://lesscss.cn/#download-options)
编写less(类似于css),当为内部组样式时,style标记的type属性必须为text/less。
为外部样式时,link标记为rel属性必须写为stylesheet/less。
vscode:直接安装 Easy Less;
在less后链接进less.js
编译为css后使用:
安装node.
安装lessec (npm install -g less)
变量
1.less中使用@定义变量。例:@width = 100px;然后在需要的时候调用变量。如:width:@width;
2.变量不仅可以用于值,还可以用于选择器,样式属性,变量嵌套URL;
- less中变量的使用没有js那样严格的规定。如@font-size @123。但建议按照规范起名字。less中的变量可以先使用再定义
less:
@w : 100px;
@h : 100px;
@color : red;
@prop:color;
@selector : select;
. @{selector}{
width: @w;
height: @h;
background-@{prop}: @color;
}
生成
.select {
width: 100px;
height: 100px;
background-color: red;
}
注意:除了简单变量外,其它的变量调用时都需要加{}
变量的嵌套
less
@a:50px;
@b:a;
@c:@a;
div{
width:@@b;
height: @c;
}
生成:
div {
width: 50px;
height: 50px;
}
混合MIXIN
在less中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性、
如:
less
.mix{
width:100px;
height:100px;
}
div{
.mix;
background-color: red;
color: #fff;
}
生成:
.mix {
width: 100px;
height: 100px;
}
div {
width: 100px;
height: 100px;
background-color: red;
color: #fff;
}
混合可以将一个定义好的class轻松的引入到另一个class中。从而实现样式的复用。
在Less中可以定义带一个或者多个带参的属性集合,并指定缺省值,在调用可以传递缺省值。就像编程函数一样调用。
less:
test(@color){
color:@color;
background-color:@color;
}
div{
.test(red);
}
h1{
.test(green)
}
生成:
div {
color: red;
background-color: red;
}
h1 {
color: green;
background-color: green;
}
导引表达式:当我们想根据表达式匹配,而非根据值和参数匹配时。这时你可以使用导引表达式。而为了尽可能地保留css的可声明性。less通过导引混合而非if/else来实现条件判断。
如:
mix(@a) when (unit(@a) > 30){
font-size: unit(@a,px);
color:red;
}
.mix(@a) when (unit(@a) <= 30){
font-size: unit(@a,px);
color:green;
}
.mix(@a){
background-color: orange;
}
.div{
.mix(35)
}
}
运算
任何数字,颜色,变量都可以参与运算
@num:100px;
@num1: 100px;
@color:#666;
div{
width: @num*100;
height:@num + @num1;
background-color: @color / 3;
}
单位函数unit:改变或移除单位,如:
unit(15,px) 结果为15px;
unit(15px,rem):结果15rem
unit(15px) 结果为15
函数
单位转换函数convert: 在单位类型一致的情况下进行转换,否则返回原始数据:如:
convert(500ms,s)
covert(14m,px)
convert(30deg,rad)
其它函数: color(red) darken( )lignten() data-uri() default() not length() extract() replace()等等
嵌套和继承
ess可以让我们以嵌套的方式编写层叠样式,这样写让代码更简洁。如:
#header{
color:black;
.navgator{
width: 1226px;
.left .content{
float:left;
}
.right{
float:right;
&:hover{
text-decoration: underline;
}
}
}
}
继承被符在选择器后面或者规则集中(具体的样式)&。如:
.inline{
color:red;
font-size:12px;
}
nav ul{
&:extend(.inline);
background-color: red;
}
h5:extend(.inline){
background-attachment: fixed;
}
h1{
font-size:30px;
}
.h2{
color:red;
}
.h3{
&:extend(.h1,.h2);
}
import
这里link与@import介绍的是[html引入css的语法单词。两者均是引入css到html]的单词。link和import语法结构不同,前者是html标签,只能放入html源代码中使用,后者可看作为css样式,作用是引入css样式功能。import在html使用时候需要