Less 学习笔记

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%

Less内置函数

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;
}