在Less中并没有对数组遍历的原生支持，我们可以通过mixin递归的方式来实现遍历。

1、定义数组元素

1

@colors: red, green, blue, black;

2、获取数组元素长度

1

@length: length(@color);

汉堡式菜单，由三根平行的直线组成；返回箭头，由两个对称倾斜的箭帽和一条水平直线组成。下面我们就通过使用 CSS 来实现上图的转换效果。
实际效果见banner。

在使用 webpack 构建项目时，经常会使用到 resolve.alias 的功能。它可以用来创建 import 或 require 的别名，使得模块引入变得更简单。

1
2
3

alias: {
    '@': 'src/components'
}

现在，可以替换替换原有的导入路径方式：

1
2
3
4

// before
import component from "src/components/component"
// after
import component from "@/component"

在CSS预处理器的@import中使用alias

@import存在于 css 中，而 css 是由 css-loader 来进行处理的，所以在处理过程中并不能使用 webpack loader 的 alias 配置。下面的引入将不会生效：

1

@import "@/reset.css"

使用 ~ 标识符

想要在 css 中使用 alias，可以采用如下解决方案：

1

@import "~@/reset.css"

~的作用是告诉 webpack，当前 import 的路径是使用 alias 配置进行导入。
可以点击这里查看该css-loader Issues详情

CSS Grid Layout 是 CSS 中非常强大的布局系统，与 flexbox 很相似。但 flexbox 主要针对一维布局， grid layout 能够很好的作用于二维布局。
本文将使用 grid layout 的若干属性来创建一个自适应布局，体会一下在屏幕适配方面 grid layout 给我们带来的便携。
如果你还没有学习或接触过 gird layout ，可以先通过这篇文章来学习一下。