less学习

一、什么是less

• less 是一个 css 扩展，让 css 变成支持变量，嵌套等操作的 css 语言
• 可以去 Less官方文档 去学习
• less 可以在浏览器端使用也可以在服务端使用
• 在浏览器端使用CDN：<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script> 引入
• 并且需要告诉浏览器我们写的是 less 代码：

<style type="less"></style>

• 但是上面的方法是运行时编译 (也就是运行这个网页时才把 less 文件转化为 css)，影响网页加载时间
• 我们想让我们写好 less 文件之后直接转换成 css 文件，这里 vscode 安装 EasyLESS 插件，写好之后会自动生成语义相同的 css 文件

• EasyLESS高级配置
• 在 less 中导入文件用 @import

@import "../test.less";

二、注释

• 多行注释保留
• 单行注释不被保留在编译生成的 CSS 中

/* 我在编译之后仍然显示 */
// 我在编译之后不显示

三、变量

基本使用

• less 中使用 @ 来定义变量
• less 中的变量是块级作用域

@width: 50px;
@height: 100px;

div {
  width: @width;
  height: @height;
}

变量插值(Variable Interpolation)--需要使用{}大括号

• 变量用于选择器名、属性名、URL、@import语句

@m:margin;
@selector:#wrap;
* {
    // 使用的时候要加大括号
    @{m}:0;
}
@{selector} {
    color: pink;
}
// 网址在使用的时候也要加大括号
@image: "../image";
div {
    background: url("@{image}");
}

延迟加载(Lazy Evaluation)

当一个变量被声明多次，会取最后一次的值，并从当前作用域往外寻找变量。

div {
    @var: 2;
    z-index: @var;
    @var: 3;
}
// z-index 属性值为 3

四、嵌套

Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力

• 父标签的样式可以嵌套子标签的样式 (像在 html 里面的结构一样)

#father {
    color:pink;
    .inner {
        color: purple;
    }
}

父选择器 (Parent Selectors)

在嵌套规则中， & 表示父选择器，常用于给现有选择器添加伪类。

#father {
    color:pink;
    .inner {
        color: purple;
        // 不能直接在里面写 :hover,这样写他会直接变成inner的子元素
        // 要这样写
        &:hover {
            background: pink;
        }
    }
}

如果没有 &，会被编译成后代选择器 inner:hover。

除此之外，& 还能用于生成重复类名

.button {
  &-ok {
    background-image: url('ok.png');
  }
  &-cancel {
    background-image: url('cancel.png');
  }

  &-custom {
    background-image: url('custom.png');
  }
}

五、混合

混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方式，可理解为复制粘贴。

• 混合是为了避免大量重复的样式代码，可以将一部分样式打包成代码块 (长得很像函数)

普通混合

// 可以传参，即使没有参数也要加括号，加了括号后在 css 文件中不会显示
.template(@w,@h) {
    color: pink;
    width: @w;
    height: @h;
}
div {
    // 上面的样式就添加到里面了
    .template(100px,100px);
}

带参数的混合(Parametric Mixins)

• less 混合支持默认参数，例如：

.template(@w:100px,@h:200px) {
    color: pink;
    width: @w;
    height: @h;
}
div {
    // 这时里面可以不用传参数
    .template();
}

命名参数

• less 也支持命名参数，解决了参数不匹配的问题

.template(@w:100px,@h:200px,@c:pink) {
    color: @c;
    width: @w;
    height: @h;
}
div {
    // .template(black);
    // 显示错误，w 参数把 black 接收了过去，导致显示错误
    .template(@c:black);
    // 正确写法
}

六、计算

• 在 less 中，计算的双方只需要一方带单位就可以了
• 例如：100 + 100px == 200px
• 为了和 css 保持兼容，less 不会把 calc() 属性计算出来，会留到 css 中计算

七、继承

• 继承同样是为了压缩代码，混合有时候两个类似的功能，他们的 css 代码相差不多，但是里面有很多的重复，这时我们可以使用继承来写这部分代码
• 在继承中不支持参数
• 语法格式：div:extend(.jicheng) (实质就是在两个选择器中加了一个逗号)