webpack2与Less使用教程

当我们在项目里写大量的css的时候，会有以下几个问题：太多重复性的规则、查找定位和修改太依赖编辑器、替换修改太麻烦等等。基于这类问题，我们可以用css预处理器来解决，例如Less，Sass，Stylus和PostCSS，让代码更加有条理和易于维护

css预处理器可以给我们带来以下好处：

• 变量 - 定义常用的变量

• 计算 - 实现值的计算

• 混合 - 代码复用或继承

• 函数 - 强大的函数来操作属性和值

通过预处理器，将css预文件编译为css文件，维护和开发直接面向预文件，解决以往的开发痛点

下面将以Less为例子，简单介绍这款css预处理器的用法和一些技巧

教程以webpack为构建工具，配合react去做的，大家凑合着看吧~

安装Less

通过NPM安装

npm install less -g

通过Yarn安装

yarn add less -g

然后你就可以在终端用lessc命令，对已写好的less文件编译为css文件，如下

lessc styles.less > styles.css

结合webpack2

假设你已经安装好webpack2和webpack-dev-server,接着还需要先安装一些loader，如下

yarn add less less-loader css-loader style-loader --dev

style标签内联

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        use:[ 'style-loader','css-loader','less-loader'],
      },
    ],
  },
};

这样就会自动解析css和less，如何将其放到head里的style,style-loader就是负责style标签的生成

style标签外联

如果我们想要放到一个style.css文件里，怎么实现？如下

先安装插件

yarn add extract-text-webpack-plugin --dev

然后再修改配置webpack.config.js为

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        use: ExtractTextPlugin.extract({
          use:[ 'css-loader','less-loader'],
          fallback: 'style-loader',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'index.css',
      disable: false,
      allChunks: true,
    }),
  ],
};

支持CSS Modules

什么？你想让其支持CSS Modules

修改配置webpack.config.js为

module: {
  rules: [
    {
      test: /\.(less|css)$/,
      use: ExtractTextPlugin.extract({
        use:[
          {
            loader: 'css-loader',
            options:{
              modules:true,
              importLoaders:1,
              localIdentName:'[local]',
            }
          },
          {
            loader:'less-loader',
          },
        ],
        fallback: 'style-loader',
      }),
    },
  ],
},

这步其实已经涉及到CSS Modules的部分内容，先省略，下回分解

Less使用学习

Variables

Less可以让我们像标准的编程语言一样去创建变量，这样我们就可以再同一个地方存储我们常用的属性值，如颜色，尺寸，选择器，字体，URL等等。如下所示

Less:

@background-color: #eee;
@text-color: #333;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

CSS:

p{
  background-color: #eee;
  color: #333;
  padding: 15px;
}

see more

Mixins

Less可以让我们实现先有class或id的样式直接应用于别的选择器中，主要有两种用法

Less:

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

CSS:

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}

如果我们不想让被选择的样式单独出现，则如下

Less:

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

CSS:

#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}

注意到区别了吗？前者是#circle,后者是#circle()

see more

Nesting and Scope

这部分应该算是用得最多的了。对各种选择器进行嵌套使用

Less:

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS:

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

see more

还有其变量在其使用的选择器域内声明别的值，会影响其嵌套下的选择器的变量的值

Less:

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS:

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

see more

Operations

我们也可以使用数学计算去做一些数值或颜色的计算，看下面的例子

Less:

@div-width: 100px;
@color: #03A9F4;

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

CSS:

#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

Functions

Less也有自己的函数，例如获取图片大小，单位转换，数组等等，例如

通过image-width、image-height和image-size，我们可以直接获取图片的尺寸大小

Less:

.img{
  width:image-width("../img/less-logo.png");
  height:image-height("../img/less-logo.png");
  margin:image-size("../img/less-logo.png");
}

CSS:

.img {
  width: 300px;
  height: 100px;
  margin: 300px 100px;
}

数组也蛮常用的，变量定义了好一串我们要用的值，可以通过其位置直接拿到值，这里得注意的是Less的数组是从1开始的

Less:

@list: red, blue, green, yellow;
.list{
  color:extract(@list, 1);
  border-color:extract(@list, 2);
  background-volor:extract(@list, 3);
}

CSS:

.list {
  color: red;
  border-color: blue;
  background-volor: green;
}

see more

Others

& 用于在嵌套写法时，直接继承上一个选择器名，例如

Less:

.a{
  &:hover{
    color:red;
  }
}
.p, .a, .ul, .li {
  border-top: 2px dotted #366;
  && {
    border-top: 0;
  }
  & + & {
    border-top: 0;
  }
}

CSS:

.a:hover{
    color:red;
}
.p, .a, .ul, .li {
  border-top: 2px dotted #366;
}
.p.p, .p.a, .p.ul, .p.li,
.a.p, .a.a, .a.ul, .a.li,
.ul.p, .ul.a, .ul.ul, .ul.li,
.li.p, .li.a, .li.ul, .li.li {
  border-top: 0;
}
.p + .p, .p + .a, .p + .ul, .p + .li,
.a + .p, .a + .a, .a + .ul, .a + .li,
.ul + .p, .ul + .a, .ul + .ul, .ul + .li,
.li + .p, .li + .a, .li + .ul, .li + .li {
  border-top: 0;
}

import让我们直接引入别的less文件，最后跟着一起编译为css

other.less:

@background-color: #eee;
@text-color: #333;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

Less:

@import "other.less";

CSS:

p{
  background-color: #eee;
  color: #333;
  padding: 15px;
}

结语

Less还有很多，例如if和loop,更多的进阶学习可以查看官方文档

文章首发于 https://www.linpx.com/p/webpa...

欢迎访问我的博客：https://www.linpx.com/

参考

• webpack.js.org/loaders/css-loader

• webpack.js.org/loaders/style-loader

• webpack.js.org/loaders/less-loader

• lesscss.org