Fork me on GitHub

less使用笔记

发表于 | 分类于 ， |

文章概述

本篇文章记录less的使用笔记。

概述

Less是一门CSS预处理语言，使用方式类似sass。

参考网站

使用less

  1. 安装less：
1
$ yarn -D add less
  1. 编译less文件：

less包bin目录中有lessc文件用来执行编译less文件为css文件；

变量

概述

less使用@符号定义和使用变量；

变量定义变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//1.用一个变量来定义另一个变量；
@colorVar: #fff;
@myColor: @colorVar;

#testId::before {
  color: @myColor;
}

//2.@符号加一个变量值是字符串等于另一个变量名组合的变量；
@contentVar: 'hello world';
@myContent: 'contentVar';

#testId::after {
  content: @@myContent;
}

变量运算

变量运算: 运算符和变量之间一定要加空格，否则会被认为是变量名；

1
2
- 加减法时：以第一个数据的单位为基准;
- 乘除法时：注意单位一定要统一;

示例：

1
2
3
4
5
6
7
8
9
10
@width: 300px;
@color: #222;
#operation {
  width: @width - 20;
  height: @width - 20*5;
  margin: (@width - 20)*5;
  color: @color * 2;
  background-color: @color + 111;
  border-color: @color + #111;
}

变量的类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 1.值变量：
@theme-color: red;
.app {
  width: 100px;
  height: 200px;
  background-color: @theme-color;
}

// 2.选择器变量：变量名必须使用大括号包裹；
@classSelector: wrap;
.@{classSelector} {
  color: #999;
  width: 50%;
}

@idSelector: wrap;
#@{idSelector} {
  color: #666;
}

//3.属性变量：变量名必须使用大括号包裹；
@borderStyle: border-style;
#wrap {
    @{borderStyle}: solid;
}

//4. url变量：可用于给地址加统一前缀；
@baseImageUrl: "http://www.lewei.cool";
.myImage {
  background: url("@{baseImageUrl}/dog.png");
}

//5. 样式表变量：指一组样式，使用时需要在变量后加圆括号()来引入;
@listBackground: { background: red; };

.listBox {
  @listBackground();
}

样式嵌套

  1. less支持选择器多级嵌套，但是层级越深效率月低，推荐限制在两个层级；
1
2
3
4
5
6
7
8
9
10
11
.box {
  .title {
    color: #000;
  }
  #item {
    font-size: 12pt;
    #content {
      color: red;
    }
  }
}
  1. 嵌套内引用父选择器名，可以使用&代表父选择器名；
1
2
3
4
5
6
7
8
9
10
11
#header {
  &:after {
    content: "Less is more!";
  }
  .title {
    font-weight: bold;
  }
  &_content {
    margin: 20px;
  }
}
  1. 媒体查询嵌套：缺点是每一个元素都会编译出自己的@media样式表，并不会合并。
1
2
3
4
5
6
7
8
9
10
#main {
  @media screen {
    @media (max-width: 768px) {
      width: 100px;
    }
  }
  @media tv {
    width: 2000px;
  }
}

mix混合器方法

mix混合器方法用来优化代码，将多次使用的样式封装到公共的方法来获取，提高代码的质量；

无参方法

无参数混合器方法: 混合器方法必须使用.做前缀；

  • 定义时：可以不加括号，但是不推荐。不加括号不仅代表混合器方法，也代表一个样式表，都会被单独编译；
  • 使用时：引用时，直接引入选择器或者引入选择器并且加括号,两种引用方式等价；
1
2
3
4
5
6
7
8
9
10
11
12
.mix-card() {
  -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
  box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}

.myCard {
  .mix-card;
}

#myCard {
  .mix-card();
}

带参方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 1> 普通带参数方法：
.me-padding(@top,@right,@bottom,@left) {
  padding: @top @right @bottom @left;
}

.myArg {
  .me-padding(3px, 3px, 4px, 4px);
}

// 2> 默认参数方法：
.me-margin(@top: 6px,@right: 6px,@bottom: 6px,@left: 6px) {
  margin: @top @right @bottom @left;
}

#my-margin-default {
  .me-margin;
}

#my-margin {
  .me-margin(11px, 11px);
}

#my-margin-all {
  .me-margin(11px, 11px, 11px, 11px);
}
全参关键字

全部参数关键字：arguments

1
2
3
4
5
6
7
.mix-args(@width,@style,@color) {
  border: @arguments;
}

#me-args {
  .mix-args(1px, solid, blue);
}

匹配模式

混合器方法的匹配模式: 与面向对象中的多态相似;

  • 如果匹配的参数使用常量做标识，使用时会优先使用匹配程度最高的方法，如果匹配程度相同，将合并样式。
  • 如果匹配的参数是变量，使用@_标识；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 示例：显示各个方向上的三角形箭头？

//常量匹配模式
.triangle(top,@width:20px,@color:#f00) {
  border-width: @width;
  border-color: transparent transparent @color transparent;
  border-style: dashed dashed solid dashed;
}

.triangle(bottom,@width:20px,@color:#f00) {
  border-width: @width;
  border-color: @color transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}

.triangle(right,@width:20px,@color:#f00) {
  border-width: @width;
  border-color: transparent transparent transparent @color;
  border-style: dashed dashed solid dashed;
}

.triangle(left,@width:20px,@color:#f00) {
  border-width: @width;
  border-color: transparent @color transparent transparent;
  border-style: dashed solid dashed dashed;
}

//变量匹配模式，与常量匹配程度相同；
.triangle(@_,@width:20px,@color:#f00) {
  width: 0;
  height: 0;
  overflow: hidden;
}

.arrow {
  .triangle(bottom, 100px);
}

方法命名空间

使用命名空间方法时，使用符号>标识的直接子方法的父方法不能加括号；

1
2
3
4
5
6
7
8
9
10
.namespace() {
  background: #723232;
  .d(@w:300px) {
    width: @w;
  }
}

#namespace {
  .namespace > .d(1px);
}

数量不定的参数

方法接受数量不定的参数，可以使用…表示，用arguments关键字引用;

1
2
3
4
5
6
7
8
9
10
11
12
.boxShadow(...) {
  box-shadow: @arguments;
}

.textShadow(@a,...) {
  text-shadow: @arguments;
}

#main {
  .boxShadow(1px, 4px, 30px, red);
  .textShadow(1px, 4px, 30px, red);
}

批量important

方法使用important,来让混合器方法内部样式批量添加important，直接在方法名后加上important关键字即可；

1
2
3
4
5
6
7
8
.level-border {
  border: solid 1px red;
  margin: 50px;
}

#main {
  .level-border !important;
}

条件筛选方法

Less没有if…else表达式，less用when…and/not来做条件匹配；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#condition {
  // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
  .border(@width,@color,@style) when (@width>100px) and(@color=#999){
    border: @style @color @width;
  }
  // not 运算符，相当于 非运算 !，条件为 不符合才会执行
  .background(@color) when not (@color>=#222) {
    background: @color;
  }
  // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
  .font(@size:20px) when (@size>50px), (@size<100px) {
    font-size: @size;
  }
}

#condition {
  #condition> .border(200px, #999, solid);
  #condition .background(#111);
  #condition > .font(40px);
}

循环方法

Less并没有提供for循环功能，可以使用递归去实现。

1
2
3
4
5
6
7
8
.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

.generate-columns(4);

继承

extend是Less的一个伪类。它可继承所匹配声明中的全部样式。extend扩展样式必须放在选择器最后面;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.animation() {
  transition: all .3s ease-out;
  .animationChild {
    transform: scale(0);
  }
}

.test{
  width: 100px;
}

//继承单个选择器样式
#extend1 {
  &:extend(.animation);
}

#extend2 {
  &:extend(.animation .animationChild);
}

//继承多个选择器样式
#extend3 {
  &:extend(.animation .hide,.test);
}

//继承某个选择器的所有样式
#extend4 {
  &:extend(.animation all);
}

引用外部样式

less使用外部样式

  1. 普通导入并使用外部样式：
1
2
@import "outerLess";
@import "outerLess.less";
  1. 导入外部样式文件，但不编译到css，只会编译引用到的样式【推荐导入方式】：
1
2
3
4
@import (reference) "outerLess";
.title{
  .outerThemeColor;
}
  1. @import (once)导入方式，@import语句的默认行为,相同的文件只会被导入一次，随后的导入文件的重复代码都不会解析：
1
@import (once) "outerLess";
  1. @import (multiple)导入方式，允许导入多个同名文件,每个文件的样式都会被解析一遍，会出现个重复的样式：
1
2
@import (multiple) "outerLess";
@import (multiple) "outerLess";

属性避免编译

属性避免编译，可以将属性添加到引号内，并在属性引号前加~

1
2
3
.not-build {
  width: ~'calc(300px-20px)';
}

内置函数

less内置一些辅助函数，详见官网。

示例

1
2
3
#fn-style{
  color: color('#ff0');
}
坚持原创技术分享，您的支持将鼓励我继续创作！
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多