Less的简单使用（六）——CSS Guards以及@import规则和Maps的用法

Less的简单使用（六）——CSS Guards以及@import规则和Maps的用法

Guard用于匹配表达式上的简单值或参数个数。它应用于css选择器，是用于声明mixin然后立即调用它的语法糖。要成功的引出if类型语句：将此功能与功能&结合使用，可以将多个guards分组

一、css guards的正常用法

.less文件中的代码：

// Guards直接应用于css样式
@val: true;
button when (@val = true) {
    width: 100px;
}

.css文件中的css代码：

button {
  width: 100px;
}

与&功能结合使用来实现类型声明，从而可以对多个防护进行分组

.less文件中的代码：

@val: true;
& when (@val = true) {
    button {
      color: white;
    }
    a {
      color: blue;
    }
  }

.css文件中的css代码：

button {
  color: white;
}
a {
  color: blue;
}

还可以通过使用if()函数和变量调用来实现类似的模式

.less文件中的代码：

@val: true;
 @model: if(@val = true, {
    #start {
        float: left;;
    }
    #stop {
        float: right;
    }
});
@model();

.css文件中的css代码：

#start {
  float: left;
}
#stop {
  float: right;
}

二、@import规则

@import取决于文件扩展名，Less可以对语句做出不同的处理：

• 如果文件具有.css扩展名，它将被视为css,并且该@import 语句保持原样；

• 如果没有其他扩展名，则将其视为less文件并导入；

• 如果没有扩展名，.less将被附加，并将其作为导入的less文件包含在内；

导入选项： Less提供了@import css规则的几个扩展，以提供更多的灵活性来处理外部文件

语法： @import（keyword）“filename”;

@import 允许使用多个关键字，要使用逗号分隔关键字：语法：@import（optional, reference) from “foo.less”;

• reference: 使用less文件但不输出; 即使用@import （reference)导入外部文件时，不添加导入样式编译后的输出，除非引用；

• inline: 在输出中包含源文件，但不对其进行处理；

• less: 无论文件扩展名是什么，都将其视为less文件；

• css: 无论扩展名是什么，都将其视为css文件；（直接在文件中输出@import语句）

@import (css) "foo.less";

输出：

@import "foo.less";

• once: 仅包含一个文件（默认行为)；

@import (once) "foo.less";
@import (once) "foo.less"; // 第二个导入语句是无效的

• multiple: 包含多次文件导入；

// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";

输出：

.a {
  color: green;
}
.a {
  color: green;
}

• optional: 仅在文件存在时才允许导入。如果没有optional关键字Less，则在导入找不到的文件时会引发FileError并停止编译；

三、Maps

使用规则集和mixin作为值的映射：通过将命名空间与查找[ ]语法结合使用，可以将规则集/mixin生成map

.less文件中的代码：

// 使用命名空间和查找相结合使用，可以将规则集/mixin生成映射
// 使用命名空间和查找相结合使用，可以将规则集/mixin生成映射
@size: {
    mobile: 320px;
    tablet: 768px;
    desktop: 1024px;
}
.navbar {
    display: inline-block;
@media (min-width: @size[tablet]) {
    display: inline;
    }
}

.css文件中的css代码：

.navbar {
  display: inline-block;
}
@media (min-width: 768px) {
  .navbar {
    display: inline;
  }
}

命名空间和mixin的重载同样适用于map

.less文件中的代码：

//重载功能，会对原来的值进行覆盖
//使用#default无效
#one() {
    .colors() {
        primary: green;
        secondary: blue;
    }
}
#one() {
    .colors() {
        primary: grey;
    }
}
.span {
    @alias: #one.colors();//使用别名来简化操作
    color: @alias[primary];
    border-color: @alias[secondary];
}

.css文件中的css代码：

.span {
  color: grey;
  border-color: blue;
}

如果查找值中包含另一个规则集，则可以追加第二个[ ]进行查找

.less 文件中的代码：

// 如果查找值产生另一个规则集，则追加第二个[]查找
@config: {
    @char1: {
        bool1: true;
    }
}
.navbar when (@config[@char1][bool1] = true) {
    float: left;
}

.css文件中的css代码：

.navbar {
  float: left;
}

通过这种方式，规则集和变量调用可以模拟“名称间隔”类型，类似于mixin。

在查询中使用变量：值[@lookup]是键（变量）名称，而不是变量本身。如果你想让键名称是可变的，则可以使用@@avariable语法

.less文件中的代码：

//在查询中使用变量，使得键名可变
.foods {
    @fruit: apple;
    @food: rice;
}
@key-look-up: fruit;

#foods {
    treat: .foods[@@key-look-up];
}

.css文件中的css代码：

#foods {
  treat: apple;
}