webpack2与Less使用教程

in Tutorials with 0 comment

当我们在项目里写大量的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]_[hash:base64:5]',
            }
          },
          {
            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-widthimage-heightimage-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还有很多,例如ifloop,更多的进阶学习可以查看官方文档

看完不给评论表示支持一下我吗?内容较多,至此~

参考

Responses