『Less』学习笔记_less 定义一组样式-CSDN博客

本文链接：https://blog.csdn.net/dreaming_coder/article/details/110260863

1. Less 变量

1.1 定义

@变量名: 值;

变量是延迟加载的，可以写在使用行的后面

1.2 命名规范

必须有 @ 为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

@color: pink;                         /* 定义 */
body {
    background-color: @color;         /* 使用 */
}

特别地，如果自定义名和保留字、关键字一样，调用时注意加大括号：

@mydiv: div;
@{mydiv} {
    background-color: red;
}

编译后为：

div {
  background-color: red;
}

2. Less 注释

/* XXXXX */：编译后可见注释
// XXXX：编译后不可见注释

3. Less 嵌套

2.1 后代选择器

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 后代选择器 */
    a {
        color: red;
    }
}

2.2 交集|伪类|伪元素选择器

内层选择器的前面没有 & 符号，则他被解析为父选择器的后代
如果有 & 符号，它就被解析为父元素自身或父元素的伪类

div {
    /* 伪类选择器 */ 
    &:hover {
        color: blue;
    }
    /* 伪元素选择器 */
    &::before {
        content: "";
    }
    /* 交集选择器 */
    &.font14{
        font-size: 14;
    }
    /* 子选择器 */
    &>a{
        font-weight: 1000;
    }
}

4. Less Mixins

Mixins 就是将一系列属性从一个规则集引入到另一个规则集的方式

4.1 普通 Mixins

.format{
    float: left;
    width: 200px;
    height: 200px;
    background-color: skyblue
}

div{
    background-color: black;
    .div1{
        .format;
        background-color: red;
    }
    .div2{
        .format;
    }
}

预编译后为：

.format {
    float: left;
    width: 200px;
    height: 200px;
    background-color: skyblue;
}

div {
    background-color: black;
}

div .div1 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: skyblue;
}

div .div2 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: skyblue;
}

4.2 不带输出的 Mixins

上面的 Less 有个问题，.format 样式也被编译出来了，是多余的部分，解决方式如下：

.format(){
    float: left;
    width: 200px;
    height: 200px;
    background-color: skyblue
}

这样，这部分就不会预编译出来了

4.3 带参数的 Mixins

类似函数，可以传参，Less 代码如下：

.format(@w, @h, @c){
    float: left;
    width: @w;
    height: @h;
    background-color: @c
}

div{
    background-color: black;
    .div1{
        .format(200px,200px,pink);
    }
    .div2{
        .format(400px,400px,green);
    }
}

预编译之后，CSS 文件如下：

div {
    background-color: black;
}

div .div1 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;
}

div .div2 {
    float: left;
    width: 400px;
    height: 400px;
    background-color: green;
}

4.4 带有默认值的 Mixins

Less 代码如下：

.format(@w:200px, @h:200px, @c:green){
    float: left;
    width: @w;
    height: @h;
    background-color: @c
}

div{
    background-color: black;
    .div1{
        .format();
    }
    .div2{
        .format(400px,400px,red);
    }
}

预编译的代码如下：

div {
    background-color: black;
}

div .div1 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: green;
}

div .div2 {
    float: left;
    width: 400px;
    height: 400px;
    background-color: red;
}

4.5 命名参数

当你想自定义的样式在默认值的后面，需要手动指定传参到哪个参数

.format(@w:200px, @h:200px, @c:green){
    float: left;
    width: @w;
    height: @h;
    background-color: @c
}

div{
    background-color: black;
    .div1{
        .format(@c:blue);
    }
    .div2{
        .format(@c:orange);
    }
}

预编译之后的 CSS 代码如下：

div {
    background-color: black;
}

div .div1 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
}

div .div2 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}

4.6 匹配模式

例如画三角形，我想随我设定画的是哪个方向的，此时，第一个参数可以设置为标识符，只要每次传参会自动选择对应标识符的样式

特别地，为了避免冗余，要定义一个同名的样式，第一个参数必须是 @_，这样调用下面的样式时，默认会调用该样式里的设置

【triangle.less】

.triangle(@_,@w,@c){                         // 此处参数必须与下面的一一兑对应，只是标识符换成 @_，否则无法匹配导致样式不生效
    width: 0px;
    height: 0px;  
    border-style: solid;
}

.triangle(T,@w,@c) {
    border-width: @w;
    border-color: @c transparent transparent transparent;
}
.triangle(R,@w,@c) {
    border-width: @w;
    border-color: transparent @c transparent transparent;
}
.triangle(B,@w,@c) {
    border-width: @w;
    border-color: transparent transparent @c transparent;
}
.triangle(L,@w,@c) {
    border-width: @w;
    border-color: transparent transparent transparent @c;
}

【test.less】

@import "./triangle.less";
#wrap>.sjx {
    .triangle(R, 40px, blue)
}

【test.css】

#wrap > .sjx {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 40px;
  border-color: transparent blue transparent transparent;
}

4.7 @arguments 变量

Less 代码

.border(@1,@2,@3){
    border: @arguments;
}

#wrap>.sjx {
    .border(1px,solid,blue)
}

CSS 代码

#wrap > .sjx {
  border: 1px solid blue;
}

5. Less 运算

@border: 5px + 5;     /* 单位以第一个操作数为准 */

运算符左右必须有空格
以第一个操作数的单位为准
+、-、*、/ 运算都可以

6. Less 继承

首先定义一个基类

.center{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.center:hover{
    background-color: red!important;    // 此处由于优先级问题，所以强制最高级
}

类名可以是多个类，如 .class1.class2

然后在 Less 中继承它

*{
    margin: 0;
    padding: 0;
}
@import "./center.less";
#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        &:extend(.center all);         // all 代表该类的伪类选择器也被继承，只继承一个的话 all 可以省略
        &:nth-child(1){
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        &:nth-child(2){
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    }
}

编译后的结果为

* {
    margin: 0;
    padding: 0;
}

.center,
#wrap .inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.center:hover,
#wrap .inner:hover {
    background-color: red!important;
}

#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
}

#wrap .inner:nth-child(1) {
    width: 200px;
    height: 200px;
    background-color: pink;
}

#wrap .inner:nth-child(2) {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

7. Less 避免编译

使用 ~"cacl(100px + 100)" 这种形式强制 Less 不编译， CSS 仍保留 cacl(100px + 100)

Less 文件：

div {
    margin: ~"100% - 10px" 100% - 10px;
}

CSS 文件：

div {
    margin: 100% - 10px 90%;
}