less 快速入门

一、less 入门

介绍

• Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、q嵌套、函数、作用域等特性
• 提高了css代码可维护性、逻辑性、扩展性
• css 是一门非程序式语言，没有变量、函数、作用域等概念

安装 安装教程

• 简单，不需安装其他依

• 全局安装 npm install less -g

• 项目中安装 npm i less --save-dev

• 显示版本

lessc -v
lessc --version

编译：编译教程

• 命令行编译
• 编辑器插件编译
• 编译软件koala
• 前端自动化工具编译
• 在客户端使用less.js（简便，但推荐用于生产环境，影响性能） ---> 比sass多一种

注意点：
1. 在less.js之前引入css样式表
2. link标签的rel 属性设置为 "stylesheet/less"

二、嵌套

• 父选择器 &
• 层层嵌套，便于维护
• 解耦：高内聚、低耦合，利于维护

&:hover
&::before

三、变量 variales

定义变量用 @

• 定义变量、属性值为变量（不插值）

@link-color: #428bca; 
.link {
    color: @link-color;
}

// 被编译为：
.link {
    color: #428bca;
}

变量插值 @{}

• 选择器、属性名、属性值（插值）

• 选择器、属性名中、部分片段中：必须使用插值语句

@mySelector: banner;
.@{mySelector} {
  font-weight: bold;
}

// 被编译为：
.banner {
    font-weight: bold;
}

@property: color;
.widget {
    @{property}: #0ee;
    background-@{property}: #999;
}

// 被编译为：
.widget {
    color: #0ee;
    background-color: #999;
}

@images: "../img";
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

// 被编译为：
body {
  color: #444;
  background: url("../img/white-sand.png");
}

四、作用域

• LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。

五、混入 mixins

1. 混合集（输出、不输出）

.btn1 {     // 被输出
  color: black;
}
#btn2() {   // 不被输出，加括号
  font-size: 12px;
}
.class {
  .btn1();  // 调用混合集的时候：括号可加可不加
  #btn2;
}

// 被编译为：
.btn1 {
    color: black;
}
.class {
    color: black;
    font-size: 12px;
}

2. 带选择器的混合集

.my-hover-mixin() {
    &:hover {
        border: 1px solid red;
    }
}
button {
    .my-hover-mixin();
}

// 被编译为：
button:hover {
    border: 1px solid red;
}

3. 命名空间混入

#bundle {
    .button () {
        display: block;
        &:hover {
            background-color: white;
        }
    }

    .tab () {
        color: #fff;
    }
}

#header a {
    color: orange;
    #bundle > .button;  // 重点
}

// 被编译为：
#header a {
    display: block;
}

#header a:hover {
    background-color: #ffffff;
}

4.带参数混入（参数用 @ 定义）

• 单一参数：

.border-radius(@radius) {
    border-radius: @radius;
}

.box {
    .border-radius(4px);
}

// 被编译为
.box {
    border-radius: 4px;
}

• 带默认值的参数

.border-radius(@radius: 4px) {
    border-radius: @radius;
}

.box {
    .border-radius;
}

// 被编译为
.box {
    border-radius: 4px;
}

• 多个参数（推荐 逗号 分号 隔开）

.mixin(@color; @padding:2px) {
    color: @color;
    padding: @padding;
}
.selector {
    .mixin(#008000);
}

// 被编译为：
.selector {
    color: #008000;
    padding: 2px;
}

• 命名参数（不用再注意参数的位置）

.mixin(@color: black; @margin: 10px) {
    color: @color;
    margin: @margin;
}
.class1 {
    .mixin(@margin: 20px; @color: #33acfe);
}

// 被编译为
.class1 {
    color: #33acfe;
    margin: 20px;
}

六、内置函数 函数手册

列表函数

• length(列表); // 返回列表中元素的个数
• extract(列表, index); // 返回列表中指定位置的元素

七、条件语句、循环语句 when

比较运算符的完整列表为： >, >=, =, =<, <

.max (@a) when (@a > 0) { width: @a; }
.mixin (@a) when (default()) { width: 0; }
.max (10px);

// 被编译为：
.max {
    width: 10px;
}

类型检测函数

• 检测参数类型

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

• 检测参数单位

  • ispixel
  • ispercentage
  • isem
  • isunit

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

less中混合调用自身，即可形成循环

.loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));    // 递归调用自身
    width: (10px * @counter); // 每次调用时产生的样式代码
}

div {
    .loop(5); // 调用循环
}

// 被编译为：
div {
    width: 10px;
    width: 20px;
    width: 30px;
    width: 40px;
    width: 50px;
}

八、导入@import

less 中 @import 文件可在任意位置导入；css中 @import文件必须在其他类型规则之前导入

less 中导入文件的扩展名

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a less file
@import "foo.css";  // statement left in place, as-is

less 中导入文件选项

• 语法：@import (keyword) "filename";

  • reference：使用Less文件但不输出
  • inline：在输出中包含源文件但不加工它
  • less：将文件作为Less文件对象，无论是什么文件扩展名
  • css：将文件作为CSS文件对象，无论是什么文件扩展名
  • once：只包含文件一次（默认行为）
  • multiple：包含文件多次

九、注释

• /**/ 可以使用，会被编译
• // 可以使用，但不会被编译到css中
• less不认识的内容 不会被编译