less初步

Posted on Edited on

less初步

注释

注释分为两种：

  • /* 我是注释 */
  • // 我是注释

区别在于，第一种编译后会保留，而第二种不会保留。

变量

变量定义： @key:value;

LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次。

混合

  • 基本用法
1
2
3
4
5
6
7
variable{
  property: value;
}
selector{
  variable;
  others:...;
}
  • 带参数
1
2
3
4
5
6
variable(@key){
  property: some other @key;
}
selector{
  variable(value);
}
  • 带默认值
1
2
3
4
5
6
7
8
variable(@key:default){
  property: some other @key;
}
selector{
  variable();
  // or
  // variable(value)
}

匹配模式

1
2
3
4
5
6
7
8
9
10
11
12
13
variable(condition1){
  property:...;
}
variable(condition2){
  property:...;
}
variable(@_){	// 通用
  commonProperty:...;
}

selector{
  variable(condition1);
}

运算

1
2
3
4
@variable:value;
variable{
  property: value + @variable;	//如果value为10px，@variable为10，也可以进行运算
}

嵌套

1
2
3
4
5
6
7
8
9
10
11
12
parentSelector{
  property:value;
  
  childSelector{
    property:value;
    
    // &表示上一层选择器，如下面所示，表示的是childSelector:hover
    &:hover{
      //...
    }
  }
}

arguments

@arguments包含了所有传递进来的参数

1
2
3
variable(@key1:default, @key2:default){
  property: @arguments;
}

避免编译

用~'...'包裹不需要编译的内容。

!important

在分号前增加!important即可为语句增加!important。

这些是less的常用功能，除此之外，还有导引、Color函数、Math函数、命名空间、作用域、Importing、字符串插值、JavaScript表达式等，将在下一篇进行说明。