Less的使用

Less笔记

1. Less使用方法

1. Less引入

// node命令
// 全局安装less
npm install -g less
// 本地安装less
npm init
npm i less --save-dev

2. Less使用

// 安装完毕后先查看less版本信息,确定是否安装
lessc -v
// 确认安装后,新建less文件 index.less,书写less代码后,执行下命令,将less文件编译成css文件,在html引入这个css文件就可以使用了
lessc index.less index.css

3. 中文文档

https://less.bootcss.com/

2. 变量使用

编译前

// 变量
@width: 100px;
@height: 200px;

.box {
  width: @width;
  height: @height;
  background-color: pink;
}

编译后

.box {
  width: 100px;
  height: 200px;
  background-color: pink;
}

3. 混合

编译前

// 混合
.bordered {
  border-top: dotted 1px red;
  border-bottom: solid 2px green
}

.text {
  color: blueviolet;
  // 使用混合
  .bordered();
}

编译后

.bordered {
  border-top: dotted 1px red;
  border-bottom: solid 2px green;
}
.text {
  color: blueviolet;
  border-top: dotted 1px red;
  border-bottom: solid 2px green;
}

4. 嵌套

编译前

// 嵌套
.parent {
  width: 200px;
  height: 200px;
  background-color: pink;
  background-color: gold;

  .son {
    width: 50px;
    height: 50px;
    background-color: blueviolet;

    p {
      color: white;
    }
  }
}

编译后

.parent {
  width: 200px;
  height: 200px;
  background-color: pink;
  background-color: gold;
}
.parent .son {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
}
.parent .son p {
  color: white;
}

5. @media媒体查询规则

编译前

// @规则与冒泡
// @规则与普通选择器规则并不相同,如下媒体查询,
/* 
  在最小宽度768时,
  .component的样式为{width:600px;}

  在最小宽度和最小分辨率192dpi时
  .component的样式为{background: red}

  在最小宽度1280px时,
  .component的样式为{width: 800px}

  而嵌套的子样式都会继承他的父样式,如在各种情况下的.component如果没有定义宽度,则宽度就为300
  但是@media里的嵌套是没有继承的

  所以这样写也可以把其理解为一种子代关系
*/
.component {
  width: 300px;
  height: 40px;
  background-color: yellowgreen;

  @media (min-width: 768px) {
    width: 600px;
    background-color: powderblue;

    @media (min-resolution: 192dpi) {
      background: red;
    }
  }

  @media (min-width: 1280px) {
    width: 800px;
    background-color: green;
  }
}

编译后

@media (min-width: 768px) {
  .component {
    width: 600px;
    background-color: powderblue;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background: red;
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
    background-color: green;
  }
}

6. 运算

// 运算
// 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

@incompatible-units: 2 + 5px - 3px; // 结果是 4px

@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

.num {
  width: @conversion-1;
  margin-top: @conversion-2;
  border: @incompatible-units solid red;
  height: 20+2px;
}

编译后

.num {
  width: 6cm;
  margin-top: -1.5cm;
  border: 4px solid red;
  height: 22px;
}

7. calc特例

编译前

// calc()特例
// 为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。
@var: 50vh/2;

.calc {
  width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))
  height: 50px;
  background-color: #bfa;
}

编译后

.calc {
  width: calc(50% + (white - 20px));
  height: 50px;
  background-color: #bfa;
}

8. 转义

编译前

// 转义
@min768: ~"(min-width: 768px)";

.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译后

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

9. 函数

编译前

// 函数的用法非常简单
@base: #f04615;
@width: 0.5;

.fun {
  // percentage()将小数转化为百分比
  width: percentage(@width); // 50%
  // saturate()将颜色饱和度增加5%
  color: saturate(@base, 5%);
  // lighten()将颜色亮度降低百分之25
  // spin()并且色相值增加8
  background-color: spin(lighten(@base, 25%), 8);
}

编译后

.fun {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

10. 命名空间和访问符

编译前

// 命名空间和访问符
#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;

    // &符代表自身
    &:hover {
      background-color: white;
    }
  }
}

// #header中.button混合到#header a中
#header a {
  color: orange;
  #bundle.button(); // 还可以书写为 #bundle > .button 形式
}

编译后

#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: white;
}

11. 映射

编译前

// 映射
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  // 可以使用colors中的属性
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

编译后

.button {
  color: blue;
  border: 1px solid green;
}

12. 作用域

编译前

// 作用域
@var: red;

#page {
  @var: white;

  #header {
    color: @var; // white
  }
}

编译后

#page #header {
  color: white;
}

13. 注释

编译前

// 注释
/* 一个块注释
 * style comment!
*/
@var: red;

// 这一行被注释掉了！
@var: white;

编译后

/* 一个块注释
 * style comment!
*/
/* 在css中只能识别多行注释并转化到css中,而//会在编译css后丢失

14. 导入

编译前

// 导入
@import "library"; // library.less
@import "typo.css";

编译后

/* 这是library */
/* 这是引入的library.less文件 */
/* 会直接编译 */
div {
  /* library.less */
  background-color: black;
}

/* 而引入的css文件不会直接编译 */
@import "typo.css"