Less小结

简介

整理了less使用过程中，常用的语法等

安装

less解析需要使用模块：less；

• 新建目录，下载less

mkdir less
npm init -y
npm i less

• 新建style.less文件

touch style.less

• 修改package.json文件，添加build命令

{
  // ...
  "scripts": {
    // ...
    "build": "lessc style.less resStyle.css"
  },
  // ...
}

• 修改的style.less文件，需要编译时，运行npm run build

引用外部文件 @import

@import "@/themes/variables.less";
@import "./colors.less";
@import '~antd/lib/style/themes/default.less';

变量

• 使用@声明一个变量

• 重复赋值时，后赋值的会替换先赋值的

• 如果变量需要镶嵌到字符串中，需要用{}将变量名分隔开。eg: @{position}

• 示例代码

@primary-color: #ffaf53;
@primary-color: #207BE4;           // 前面有定义的@primary-color，会覆盖，使用新值 #207BE4
@position: top;
@images: "../img";

.test {
  border-color: @primary-color;    // 变量使用

  background-image: url("@{images}/white-sand.png");    // 路径等都可以用变量

  color: #efefef;
  background-color: $color;   // 通过$取某个属性值

  @color: primary-color;      // 可以将变量名赋值给另一个变量
  .inner {
    color: @@color;
  }

  .border_@{position} {    // 字符串中，通过 {} 包裹使用变量
    border-@{position}: 1px solid @primary-color;
  }
  &::after {                // 嵌套代码中，使用 & 引用父元素
    content: '*';
    color: green;
  }
}

• 编译后代码

.test {
  border-color: #207BE4;
  background-image: url("../img/white-sand.png");
  color: #efefef;
  background-color: #efefef;
}
.test .inner {
  color: #207BE4;
}
.test .border_top {
  border-top: 1px solid #207BE4;
}
.test::after {
  content: '*';
  color: green;
}

Maps

@theme-mutual: {
  primaryColor: #ffaf53;
  bgColor: #f4f4f4;
  fontSize: 32px;
  borderRadius: 4px;
};

.commonTheme(@theme) {
  .test {
    color: @theme[primaryColor];
  }
}

.mutual {
  .commonTheme(@theme-mutual);
}

// 编译后
// .mutual .test {
//   color: #ffaf53;
// }

运算符

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。

如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

语句

条件语句 if

@position: top;

.test {
  position: absolute;
  left: 0;
  right: 0;
  top: if((@position=top), 0, auto);
  bottom: if((@position=bottom), 0, auto);
  
  @index: 5;
  // and or not
  color: if((@index > 3) and (@index < 10), red, green);  
}

循环语句 each

默认参数 value key index（index从 1 开始）

@widthList: 24, 50, 100;
each(@widthList, .(@w, @k, @i){
  .w_@{w} {
    width: unit(@w, px);
  }
  .h_@{w} {
    height: unit(@w, px);
  }
  .wh_@{w} {
    width: unit(@w, px);
    height: unit(@w, px);
  }

  each(@widthList, .(@h){
    .wh_@{w}_@{h} {
      width: unit(@w, px);
      height: unit(@h, px);
    }
  })
})

// range: 参数分别为 start end step
// start、step可省略。 eg: range(5)    1 ~ 5
@hrList: range(5, 30, 5);
each(@hrList, {
  .hr_@{value} {      // 默认 value key index
    display: block;
    width: 100%;
    height: unit(@value, px);
    clear: both;
  }
})

继承 extend

.clearfix {
  display: block;
  clear: both;
}

.test {
  color: green;
  &:extend(.clearfix);
}

// 编译后
.clearfix, .test {
  display: block;
  clear: both;
}
.test {
  color: green;
}

混入 mixin

// 定义
.ar(@size) {
  border-radius: @size;
  overflow: hidden;
}
// 可以设置默认值 @num: 2
.ellipsis(@num: 2, @color: green) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @num;
  -webkit-box-orient: vertical;
  border-color: @color;
}
// 没有参数的 是这么写 .clearfix() {}
// 也可以写作 .clearfix {}  这种写法(其实是css中的类)编译出来 会保留这个类
// 调用的时候  .clearfix;  或者   .clearfix();  都可以
.clearfix {
  display: block;
  clear: both;
}

.test {
  color: green;
  // .ellipsis();                          // 有默认值的可以省略； 也可以这么调用：.ellipsis;
  .ellipsis(@num: 3, @color: $color);   // 可以指定传入的变量，这时候顺序无所谓了
  .ar(4px);
}