1. 介绍
Less是一直CSS的预编译语言，是CSS的扩展。使用Less我们也可以对css进行编程，可以定义变量、判断等。本文只要学习自W3Cschool
2. 安装
使用nodejs来进行安装
//安装命令
npm install -g less
//测试是否安装成功
lessc -v
在vue项目中安装
npm install less less-loader --save
3. Less编译
less使用命令
lessc style.less style.css来进行编译
4. Less语法规则
4.1 变量
LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。
@color1: #ca428b;
.div1{
background-color : @color1;
}
.div2{
background-color : @color1;
}
编译后变成
.div1 {
background-color: #ca428b;
}
.div2 {
background-color: #ca428b;
}
4.2 注释
less注释分块注释和单行注释，块注释显示在css文件中，单行注释不显示。
/*
块注释
*/
//单行注释
4.3 混合
混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。 在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。
- 基础使用
// less
@width: 100px;
@height: 50px;
//输出mixin
.subcontent {
height: @height;
}
.content {
width: @width;
.subcontent;
}
输出的css
.subcontent {
height: 50px;
}
.content {
width: 100px;
height: 50px;
}
- 加上()后，将不输出mixin。包含选择器的混合如下:
@width: 100px;
@height: 50px;
//输出mixin
.subcontent {
height: @height;
}
//加上()后，在css中将不输出，同时
.a() {
&:hover {
background: #FFC0CB;
}
}
.content {
width: @width;
.subcontent;
.a;
}
输出css
.subcontent {
height: 50px;
}
.content {
width: 100px;
height: 50px;
}
.content:hover {
background: #FFC0CB;
}
- mixin命名空间。命名空间用于在通用名称下对mixin进行分组。 使用命名空间可以避免名称冲突，并从外部封装mixin组。
#outer() {
background:yellow;
.inner {
color: red;
}
}
p {
#outer > .inner;
}
css
p {
color: red;
}
- LESS 保护的命名空间，当guard应用于命名空间时，只有在guard条件返回true时才使用由命名空间定义的mixin。 命名空间防护类似于mixins上的guard。
@color: blue;
#namespace when (@color = blue) {
.mixin() {
color: red;
}
}
p{
#namespace .mixin();
}
css
p {
color: red;
}
- 可带参数的混合
//定义的@fontSize: 10px是默认值，在混合时可以进行重新赋值覆盖。
.mixin(@color: black; @fontSize: 10px) {
color: @color;
font-size: @fontSize;
}
.class1 {
.mixin(@fontSize: 20px; @color: #F5A9D0);
}
.class2 {
.mixin(#F79F81; @fontSize: 20px);
}
.class3 {
.mixin(#F79F81);
}
//使用@arguments取出全部的参数
.box-shadow(@x: 0; @y: 0; @height: 3px; @width: 3px) {
-webkit-box-shadow: @arguments; //输出-webkit-box-shadow: 2px 2px 3px 3px;
}
.myclass {
.box-shadow(2px; 2px);
}
//使用... 提供可变数量的参数
.mixin(...) { // it matches arguments from 0-n
.mixin() { // it matches exactly 0 arguments
.mixin(@x: 1) { // it matches arguments from 0-1
.mixin(@x: 1; ...) { // it matches arguments from 0-n
//模糊匹配
.mixin(dark; @color) {
color: darken(@color, 15%);
}
.mixin(light; @color) {
color: lighten(@color, 15%);
}
@color-new: dark;
.line {
.mixin(@color-new; #FF0000);
}
4.4 mixins函数
Mixins函数和混合的工作方式非常相似。mixins可以嵌套，可以接受参数和返回值。
- mixin的作用域：由变量和混合组成的混合可以在调用者的作用域中使用，并且是可见的
.mixin() {
@bgcolor: #C0C0C0;
}
.myclass{
.mixin();
background-color: @bgcolor;
}
- Mixin和返回值： mixin类似于函数，在mixin中定义的变量将作为它的返回值。
.padding(@x, @y) {
@padding: ((@x + @y) / 2);
}
.myclass{
.padding(80px, 120px); // call to the mixin
padding-left: @padding; // returns the value
}
- Mixin定义另一个mixin
.outerMixin(@value) {
.nestedMixin() {
font-size: @value;
}
}
.myclass {
.outerMixin(30);
.nestedMixin();
}
4.5 嵌套
Less允许将一个类的属性用于另一个类，并且包含类名作为其属性
.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
.myclass{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
}
css
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
.container .myclass h1 {
font-size: 25px;
color: #E45456;
}
.container .myclass p {
font-size: 25px;
color: #3C7949;
}
4.6 操作符
Less支持加减乘除等算术运算
@size: 10px;
.myclass {
padding-bottom: @size * 2;
padding-left: @size / 2;
padding-right: @size + 2;
padding-top: @size - 2;
}
css
.myclass {
padding-bottom: 20px;
padding-left: 5px;
padding-right: 12px;
padding-top: 8px;
}
4.7 函数
Color 函数
- lighten(@color, 10%); // 返回一个比@color低10％更轻的颜色
- darken(@color, 10%); // 返回一个比@color高10％较暗的颜色
- saturate(@color, 10%); // 返回比@color多饱和度10％的颜色
- desaturate(@color, 10%); // 返回一个比@color少饱和度10％的颜色
- fadein(@color, 10%); // 返回一个比@color少10％透明度的颜色
- fadeout(@color, 10%); // 返回一个比@color多10％透明度的颜色
- fade(@color, 50%); // 返回一个颜色透明度为50％的颜色
- spin(@color, 10); // 返回色调比@color大10度的颜色
- spin(@color, -10); // 返回一个比@color小10度色调的颜色
- mix(@color1, @color2); // 返回一个混合@ color1和@ color2的颜色
Math 函数
- round(1.67); // returns
2 - ceil(2.4); // returns
3 - floor(2.6); // returns
2 - percentage(0.5); // returns
50%
4.8 Less 命名空间和访问器
less通过命名空间来管理class，有点类似后端的包结构，如下：
//命名空间定义
.class1 {
.class2 {
.val(@param) {
font-size: @param;
color:green;
}
}
}
/访问方式
.myclass {
.class1 > .class2 > .val(20px);
}
4.9 导入
使用@import可以导入LESS或CSS文件的内容。
@import "style"; // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php"; // imports the style.php as a less file
@import "style.css"; // it will kept the statement as it is
4.10 循环
Loops语句允许我们多次执行一个语句或一组语句。 当递归mixin与 Guard表达式和模式匹配组合时，可以创建各种迭代/循环结构。
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
css
div {
width: 25px;
width: 50px;
width: 75px;
width: 100px;
width: 125px;
width: 150px;
width: 175px;
}
