LESS学习笔记

本文讲述less的使用语法

  • 关于注释
    1.less的注释跟js一样，不会被编译。
    2.有两种方法： //这是单行注释； /*这是多行注释，也是css的注释*/
    3.注意：如果使用css的注释，那么编译的时候，这个注释会被保留

  • 定义变量

    1
    foremample: @jdRed: rgb(201,21,35)

  • 定义宽度

    1
    @minWdith:100px；

  • 定义图片的尺寸

    1
    @imageSize： 100px  100px;
1
2
3
4
body { background: @jdRed;}
h3 {
	background-size:@imageSize;
}
  • 关于变量
    注意：变量只能定义一次，本质就是常量。
1
2
3
4
5
6
7
forexample: 
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
//变量可以进行计算
#header {
  color: @light-blue;
}
  • 关于混合（mixin）

首先定义一个class类

1
2
3
4
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

然后可以在其他的属性里面调用class类

1
2
3
4
5
6
7
8
9
#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

注意： 这里的调用方法有两种

.a();
.a;

这两种方法效果是一样的。

  • 编译的时候使相关的类不输出的办法
    在定义的类或者选择器后面加上括号
    例如：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .my-mixin {
      color: black;
    }
    .my-other-mixin() {
      background: white;
    }
    .class {
      .my-mixin;
      .my-other-mixin;
    }

那么编译输出的结果是

1
2
3
4
5
6
7
.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

  • mixin 里面不仅可以放置属性也可以设置选择器
    例如： 
    1
    2
    3
    4
    5
    6
    7
    8
    .my-hover-mixin() {
      &:hover {
        border: 1px solid red;
      }
    }
    button {
      .my-hover-mixin();
    }

编译结果：

1
2
3
button:hover {
	border: 1px solid red;
}

关于这一块还没弄明白：我的理解，这里的命名空间要解决的就是命名的冲突，按照源文档的说法，这种混合是为了确保不与其他库冲突，把你要的混合写在了，一个id选择器里面，然后调用的时候，下面的几种方法都是可以的。

w3c 上面的解释：
它用于将mixins分组在通用名称下。 使用命名空间可以避免名称冲突，并从外部封装mixin组。

  • 关于命名空间 namespaces
1
2
3
4
5
6
7
8
9
#outer {
  .inner {
    color: red;
  }
}
.c {
  #outer > .inner;
}
1
2
3
4
5
// all do the same thing
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();

这里的>是可选的。

  • 受保护的命名空间
    当guard应用于命名空间时，只有在guard条件返回true时才使用由命名空间定义的mixin。 命名空间防护类似于mixins上的guard。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @import "//www.w3cschool.cn/less/lib.less";
    //导入的文件里面的代码
    //lib.less 
    //@color: blue;
    //只有当when后面的语句返回true的时候，才执行
    #namespace when (@color = blue) {
      .mixin() {
       color: red;
      }
    }
    p{
     #namespace .mixin();
    }

  • 关于!important 关键字
    方法同css。

  • 关于带参数的混合mixin
1
2
3
4
5
6
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
//注意：这里的@radius：5px是默认的属性值，在你不传参的时候，会调用这个。

调用的时候传参：用来添加私有化前缀很方便

1
2
3
4
5
6
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

关于既没有给定的默认参数，只有括号的情况之前，已经说明，是可以在编译的时候省略掉的。

  • 关于混合的多个参数
    参数可以使用逗号或分号分隔。 使用逗号符号，可以将其解释为mixin参数分隔符或css列表分隔符。 如果在mixin中使用分号，那么它将用分号分隔参数，CSS列表将包含所有逗号。

    • 如果你有两个参数，那么它们将包含逗号分隔的列表。 例如 .class1(1，2，3; sometext，other thing)。
    • 如果有三个参数，并且只包含数字，例如 .class1(1，2，3)。
    • 您可以使用带有逗号分隔列表的虚拟分号，例如 .class1(1，2，3;)。
    • 有逗号分隔的默认值。 例如 .class1(@color：gray，green;)。

  • 关于命名参数

Mixins通过使用它们的名称提供参数值而不是位置。 参数没有放置值的任何顺序，它们可以通过名称引用。 命名参数的结果更容易阅读，并提供清晰的代码。

1
2
3
4
5
6
7
8
9
10
.mixin(@color: black; @fontSize: 10px) {
  color: @color;
  font-size: @fontSize;
}
.class1 {
  .mixin(@fontSize: 20px; @color: #F5A9D0);
}
.class2 {
  .mixin(#F79F81; @fontSize: 20px);
}

  • 传递所有参数
    当调用mixin时， @arguments 包括所有传递的参数。 当不想使用单个参数时， @arguments 变量很有用。
1
2
3
4
5
6
7
8
.box-shadow(@x: 0; @y: 0; @height: 3px; @width: 3px) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.myclass {
  .box-shadow(2px; 2px);
}

  • LESS 高级参数和@rest Variable

    • .mixin(…) { // matches 0-N arguments
    • .mixin() { // matches exactly 0 arguments
    • .mixin(@a: 1) { // matches 0-1 arguments
    • .mixin(@a: 1; …) { // matches 0-N arguments
    • .mixin(@a; …) { // matches 1-N arguments
      1
      2
      3
      4
      .mixin(@a; @rest...) {
         // @rest is bound to arguments after @a
         // @arguments is bound to all arguments
      }

  • 参数的模式匹配

    1
    2
    3
    4
    5
    .mixin(@a; @color) { ... }
    .line {
      .mixin(@color-new; #888);
    }

可以使用 @ color-new 的不同值来使mixin的行为不同。

1
2
3
4
5
6
7
8
9
10
11
12
.mixin(dark; @color) {
  color: darken(@color, 15%);
}
.mixin(light; @color) {
  color: lighten(@color, 15%);
}
@color-new: dark;
.line {
  .mixin(@color-new; #FF0000);
}

如果将 @ color-new 的值设置为dark，则它会以较暗的颜色显示结果，因为mixin定义与 dark 作为第一个参数匹配。

  • 变量范围
    变量范围指定可用变量的位置。 变量将从本地作用域搜索，如果它们不可用，则编译器将从父作用域搜索。
    1
    2
    3
    4
    5
    6
    7
    8
    @var: @a;
    @a: 15px;
    .myclass {
      font-size: @var;
      @a:20px;
      color: green;
    }

输出：

1
2
3
4
.myclass {
  font-size: 20px;
  color: green;
}

  • Mixin和返回值
1
2
3
4
5
6
7
8
9
.padding(@x, @y) {
  @padding: ((@x + @y) / 2);
}
.myclass{
  .padding(80px, 120px);  // call to the mixin
  //调用mixin函数，获取返回值。
  padding-left: @padding; //  returns the value
}

是不是可以这样写：

1
2
3
4
5
6
.padding(@x, @y) {
  @padding: ((@x + @y) / 2);
}
.myclass {
	padding-left:.padding(80px,120px);
}

  • 使用@import 导入less文件
1
2
3
4
5
@import "//www.w3cschool.cn/less/myfile.less";
.myclass2
{
color: #FF0000;
}
  • less 选择器,url

选择器可以引用任何变量，它是在编译时构建的。变量名称必须放在用@符号前缀的花括号（{}）内。

1
2
3
4
5
@selector: h2;
@{selector} {
  background: #2ECCFA;
}

变量可用于保存URL。

1
2
3
4
5
6
7
@images: "http://www.w3cschool.cn";
.myclass {
  background : url("@{images}/less/images/less_variables/birds.jpg");
  width:800px;
  height:500px;
}

import语句可以具有保存路径的变量。当你引用一个普通的父目录时，这是非常有用的。

1
2
3
4
5
@path : "//www.w3cschool.cn/less";
@import "@{path}/external1.less";
.myclass{
 color : #A52A2A;
}

变量可以由属性引用。

1
2
3
4
@my-property: color;
.myclass {
  background-@{my-property}: #81F7D8;
}
  • 变量名称

我们可以定义变量名称由一个值组成的变量。

1
2
3
4
5
.myclass{
  @col: #ca428b;
  @color: "col";
  background-color: @@color;
}
  • less 变量延迟加载

在延迟加载中，即使它们尚未声明，也可以使用变量。

1
2
3
4
5
6
p {
  font-size: @a;
  color: #ca428b;
}
@a: @b;
@b: 25px;

以上代码是可以正常执行的。

关于延迟加载的范围
如果定义变量两次，将搜索并使用当前范围中变量的上一个定义。

1
2
3
4
5
6
7
8
9
10
@var: 10;
.myclass {
  @var: 50;
  .para1 {
    @var: 30;
    font-size: @var;
    @var: 20;
  }
  font-size : @var;
}

输出：

1
2
3
4
5
6
.myclass {
  font-size: 50;
}
.myclass .para1 {
  font-size: 20;
}

  • 关于扩展伪类:extend
1
2
3
4
5
6
7
h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: green;
}

编译结果：

1
2
3
4
5
6
7
h2 {
  font-style: italic;
}
.style,
h2 {
  background: green;
}

1
2
3
4
5
6
7
8
9
10
.style:extend(.container, .img)
{
  background: #BF70A5;
}
.container {
  font-style: italic;
}
.img{
   font-size: 30px;
 }

编译结果：

1
2
3
4
5
6
7
8
9
10
11
 .style {
  background: #BF70A5;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 30px;
}

我的理解：
添加扩展伪类，就是把扩展extend参数里面的选择器所有的属性添加到，前面的添加了extend的选择器里面。

  • 需要注意的是extend放置的位置不一样，最终的编译结果也不一样

例如：

1
2
3
4
5
6
7
8
.style,
.container:extend(.img){
   background: #BF70A5;
}
.img{
   font-size: 45px;
   font-style: italic;
}

编译结果：

1
2
3
4
5
6
7
8
9
.style,
.container {
  background: #BF70A5;
}
.img,
.container {
  font-size: 45px;
  font-style: italic;
}

再来看看extend写在正文的使用&连接起来的编译效果

1
2
3
4
5
6
7
8
.container,
.style {
     &:extend(.img);
}
.img{
    font-style: italic;
    background-color: #7B68EE;
 }

编译结果：

1
2
3
4
5
6
 .img,
.container,
.style {
  font-style: italic;
  background-color: #7B68EE;
}

我们看到，他把container添加了.img里面的属性。

官方文档指明：

&:extend(selector) 语法可以放在规则集的正文中。 它是放置扩展到规则集的每个选择器的快捷方式。

但是文档的另一部份似乎出错了，先记录下来，看看有没有人纠错。
关于：extend（）扩展编译w3c的一个错误例子

  • extend扩展嵌套选择器
1
2
3
4
5
6
7
.style {
  h3{
	color: #BF70A5;
	font-size: 30px;
}
}
.img:extend(.style h3){}

编译结果：

1
2
3
4
5
.style h3,
.img {
  	color: #BF70A5;
 	font-size: 30px;
}

  • extend扩展完全匹配 我理解：严格匹配，包括属性选择器的单引号和双引号等。
    默认情况下， extend 查找选择器之间的完全匹配。 对于具有相同含义的两个第n个表达式，扩展无关紧要，但它只寻找与为选择器匹配定义的相同的顺序形式。

  • less中nth表达式的扩展
    nth表达式的形式在扩展中很重要，否则它将选择器视为不同。 nth表达式1n + 2和n + 2是等效的，但扩展将该表达式视为不同。

  • extend扩展参数all
    当最后在扩展参数中标识关键字 all 时，LESS将该选择器作为另一个选择器的一部分。 匹配的选择器部分将被extend替换，形成一个新的选择器。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .style.nav,
    .nav h3 {
      color: orange;
    }
    .nav {
      &:hover {
        color: green;
      }
    }
    .container:extend(.nav all) {}

编译结果：

1
2
3
4
5
6
7
8
9
10
.style.nav,
.nav h3,
.style.container,
.container h3 {
  color: orange;
}
.nav:hover,
.container:hover {
  color: green;
}

关于extend扩展的跟多内容请参考extend扩展

  • Less Mixin Guards
    每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句，并执行计算以指定匹配的mixin。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .mixin (@a) when (lightness(@a) >= 50%) {
       font-size: 14px;
    }
    .mixin (@a) when (lightness(@a) < 50%) {
       font-size: 16px;
    }
    .mixin (@a) {
       color: @a;
    }
    .class1 {
       .mixin(#FF0000)
    }
    .class2 {
       .mixin(#555)
    }

  • LESS 类型检查函数

您可以使用类型检查内置函数来确定匹配混合宏的值类型。 为此，您可以使用 is 函数。 以下是可用功能的列表：

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl
    这些都是基本的类型检查功能。 您可以使用以下函数检查值是否在特定单位中：
  • ispixel
  • ispercentage
  • isem
  • isunit
1
2
3
4
5
6
7
.mixin (@a; @b: red) when (iscolor(@b)){
color:blue;
}
.mixin (@a) {
  font-size: @a;
}
.myclass { .mixin(20px) }

未完待续…

Recommended Posts