2019-11-10CSS8 分钟读完 (大约 1272 个字)

预处理器less的使用

css预处理器：使用一种新的语言书写css代码，通过编译后生成普通css文件，我们所要做的就是安装预处理器以及学习使用它的语法，然后编译生成目标css文件。

css预处理器的优势是：提供了css复用机制，减少冗余代码，同时也提高了代码的可维护性，极大提升了css开发效率。

sass和less都是css预处理器。

less扩展了css语言，加入了变量、Mixin、函数等特性。

less可以运行在node或者浏览器。

安装使用

node引入：

安装

$ npm install -g less

# 查看是否安装成功
$ less --version

编译

# 编译
$ lessc common.less

# 编译并指定目标文件
$ lessc common.less common.css

# 编译并指定目标文件并压缩
$ lessc --clean-css common.less common.min.css

标签引入：

1 2	<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

less代码写在styles.less中，script标签引入less.js，可以使用国内静态资源库替换上面的。比如75cdn：

1
2

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script crossorigin="anonymous" integrity="sha384-Xx4jwiERWTGivWIlK2V3UtQRXPRlrLtnx0+zsIL2/eiJGcRkOQ6CpFTNXCX6jwAV" src="https://lib.baomitu.com/less.js/3.10.3/less.min.js"></script>

变量

变量书写形式：@var，只能在作用域内有效，不可以重复定义变量：

@cos_width: 10px;
@cos_height: @cos_width * 2;

header {
    width: @cos_width;
    height: @cos_height;
}

赋值：只要保持单位统一或可相互转换，就可以进行运算，包括颜色在内：

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color +#111;

混入mixin

就是将一组属性从一个规则集混入到另一个规则集中。

比如，我们创造一组属性：

/*源规则集*/
.bordered {
    border-top: 1px red solid;
    border-bottom: 1px #000 dotted;
}

现在我们想要在其他地方使用这组属性，使用.bordered()语句：

// 目标规则集
div {
    color: #111;
    .bordered();
}

嵌套

less嵌套和sass一样

普通css代码：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

使用less写：

#header {
    color: black;
    .navigation {
        font-size: 12px;
    }
    .logo {
        width: 300px;
    }
}

可以将伪元素选择器和混入以及嵌套一起用，比如这是一个.clearfix：

.clearfix {
    display: block;
    zoom: 1;
    
    &:after {
        content: ' ';
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

在元素中调用.clearfix，注意：以上代码中的&代表父元素（同sass）。

1
2
3

div {
    .clearfix();
}

@规则嵌套和冒泡

@规则可以和选择器以相同的方式嵌套，@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

计算

less可以使用加减乘除对数字颜色以及变量使用。算术运算符在使用的时候会进行单位换算，以最左侧类型为准，若无意义则忽略单位。

@var1: 5cm + 10mm;	//6cm
@var2: 2 - 3cm - 5mm	//-1.5cm
    
@var3: 5%;
@var4: @var3 * 2;	//10%

@var5: 2cm * 3cm;	//6cm

对颜色计算：

1 2	@color_base: #248 / 2; //#124 @color_new: @color_base + #111; //#235

对于calc()函数：less不会计算出来，会保留calc()让css运算。

转义

比如给一个变量赋值min-width: 768px

Less3.5开始，无需转义，可以直接简写为：@min768: (min-width: 768px)

@min768: (min-width: 768px);
.element {
    @media @min768 {
        font-size: 1.2rem;
    }
}

函数

less内置了一些函数用于转换颜色、处理字符串、运算。

注意：less不提供自定义函数！sass可以自定义函数！

@base: #f04615;
@width: 0.5;

.class {
    width: percentage(@width);	//50%
    color: saturate(@base,5%);
    background-color: spin(lighten(@base, 25%),8);
}

命名空间和访问符

有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对mixin进行分组。你可以用 less 更直观地实现这一需求。假设你希望将一些mixin和变量置于 #bundle 之下，为了以后方便重用或分发：

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做：

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

注意：如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间（例如 #bundle()）后面。

映射maps

less3.5开始，可以将mixin和规则集作为一组值的映射使用：

#colors() {
    main: blue;
    second: green;
}

.div {
    color: #colors[main];
    border: 1px solid #colors[second];
}

作用域

@var: red;
div {
    @var: white;
    header {
        color: @var;	// white
    }
}

@var: red;
div {
    header {
        color: @var;	// white
    }
    @var: white;
}

以上代码只是第二层嵌套的@var顺序不一致，但是header中引用的都是white。故而变量随用随定义。

注释

第一种：/*注释*/可以单行可以多行，在css文件中会被保留在原码中。

/*注释*/

第二种：//注释单行注释，在less文件中，但是编译后的css文件中没有。

//注释

import

1
2
3

@import "style.less"	//如果是.less文件，则扩展名可以省略

@import "style.css"