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; // }

运算符

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

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

如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:pxcmrad% 的转换。

语句

条件语句 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 indexindex从 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); }

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: