LESS即学即用

时间  2019-11-16
标签 即用 繁體版
原文   原文链接

前言

咱们你们都知道HTML和CSS不属于编程语言而是属于标记语言，因此很难像JS同样定义变量、编写方法、实现模块化开发等。而目前的CSS编写模式中，都是定义一些公共的样式类名，哪一块的HTML须要这个样式，就去增长对应的样式类名，因此咱们常常看到一个标签上存在不少样式类名，在这种模式中咱们要时常关注CSS的优先级，避免样式的重叠覆盖...javascript

为了解决CSS的这一困境，CSS预处理预编译的思想脱颖而出，比较具备表明性的有LESS、SASS、Stylus。它们在传统的CSS基础上增长了大量的新的语法，编写方式，经常使用的函数等，可让咱们的CSS像JS同样成为一门编程语言。本文主要介绍LESS的语法和使用。css

希望文章对你有些许帮助，欢迎在个人GitHub博客点赞和关注，感激涕零！html

1、LESS的编译

编写完成的LESS代码是不能直接在浏览器中运行的，须要编译成正常的CSS代码。那么咱们首先就来学习一下经常使用的LESS编译方式。java

1.在浏览器中调用LESS.JS

LESS只支持在现代浏览器中运行（最新版本的Chrome, Firefox, Safari 和 IE）。咱们不建议在生产环境中使用LESS客户端，由于在将LESS编译成CSS的时候，用户会看到加载延迟的现象，即使在浏览器中有不足一秒的加载延迟，但也会下降性能。node

首先引入咱们设置样式的LESS文件，注意：这里的rel='stylesheet/less'git

<link type="text/css" rel="stylesheet/less" href="1.less"/>
复制代码

而后引入less.js文件github

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
复制代码

浏览器中调用有个好处:能够开启监视模式,只要咱们的LESS改变，在必定时间内，浏览器就会从新的编译，咱们能够看到想要的效果。具体操做以下:web

<script charset="utf-8" type="text/javascript">
    //->在引入LESS以前设置一个全局的变量less,配置一些参数值(根据状况自行选择须要配置的项)
      var less = {
        //->env:设置运行的环境(生产模式仍是开发模式)
        //production:编译后的CSS缓存到本地localStorage中
        //development:没有把编译后的CSS缓存到本地,在URL不是标准的格式下(例如:file://...),自动设置为development
        env: "development",
        //->poll:在监视模式下，每两次请求之间的时间间隔(ms)
        poll:500
        }
    </script>     
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
    <script charset="utf-8" type="text/javascript">
      //->启用监视模式(env必需要设置成development)
      less.watch();
    </script>   
复制代码

须要特别注意的是，因为浏览器端使用时是使用ajax来拉取.less文件，所以直接在本机文件系统打开（即地址是file://开头）或者是有跨域的状况下会拉取不到.less文件，致使样式没法生效。因此通常less作css预处理，不多采用引用less的方式，通常是把less编译成css以后，引用生成的css文件。 

// index.html文件
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>less</title>
    <link type="text/css" rel="stylesheet/less" href="css/styles.less">
</head>
<body>
    <header>
        <p>Hello World!</p>
    </header>
<script src="./less.min.js" type="text/javascript"></script>   
</body>
</html>
复制代码
// styles.less文件
@blue:#5B83AD;
@size:50px;
header {
    color: @blue;
    font-size: @size;
}
复制代码

若是直接引入less文件，便会出现以下错误：ajax

能够尝试用一个简单的web server启动网站就能解决，譬如lite-server 

npm install -g lite-server
lite-server //to run
复制代码

二、使用NODE命令编译LESS(单个文件)

这种方式是目前项目中最经常使用的方式，适用于项目的生产环境，它是把咱们的LESS文件编译成CSS文件，咱们项目中直接的引入CSS文件便可，基本步骤：安装->编译/压缩编译->或者使用NODE代码实现批量编译等npm

把LESS模块安装到全局NODE环境中

npm install less -g
复制代码

使用命令进行编译

//->把styles.less文件编译成styles.css文件(若是没有这个CSS文件本身会建立)
    lessc styles.less styles.css

    //->编译完成的CSS文件是通过压缩的
    lessc styles.less styles.min.css -x或者--compress
复制代码

通过node命令编译代码先后对比:

// styles.less文件(编译前)
@blue:#5B83AD;
@size:50px;
header {
    color: @blue;
    font-size: @size;
}
复制代码
// styles.css文件(编译后)
header {
  color: #5B83AD;
  font-size: 50px;
}
复制代码

三、在NODE环境中编写批量编译的代码

咱们在上述用NODE命令编译的时候，一次只能编译一个文件，这样，若是页面中有多个LESS，每一次编译都是比较耗费时间的，因此咱们结合NODE的FS文件读写操做，能够写一套批量编译的代码。

//->定义编译文件目录和目标导出目录
    var dirPath = "./less/", tarPath = "./css/";
    //->导入NODE中须要使用的模块
    var fs = require("fs"),
        less = require("less");
    //->读取dirPath中的全部文件,检查文件的类型,只有LESS文件咱们才进行存储
    var ary = [],
        files = fs.readdirSync(dirPath);
    files.forEach(function (file, index) {
        /\.(LESS)/i.test(file) ? ary.push(file) : null;
    });
    //->把目录下的全部文件进行编译,把编译完成的结果保存在指定的目录中
    ary.forEach(function (file) {
        var newFile = file.replace(".less", ".css"),
            conFile = fs.readFileSync(dirPath + file, "utf-8");
        less.render(conFile, {compress: true}, function (error, output) {
            fs.writeFileSync(tarPath + newFile, output.css, "utf-8");
        });
    });
复制代码

四、使用工具编译LESS

目前经常使用的编译工具备：Koala(听说目前最流行的)、在线编译(tool.oschina.net/less)、SimpLESS等。本篇文章不作过多的说明。

2、LESS的语法

LESS的基础语法基本上分为如下几个方面：变量、混合(Mixins)、嵌套规则、运算、函数、做用域等。

1.变量

和JS中的变量同样，只是LESS的变量定义不是使用VAR而是使用@。

//->LESS代码
    @link-color: #428bca;
    @link-color-hover: darken(@link-color, 10%);
    a {
        color: @link-color;
        &:hover {
            color: @link-color-hover;
        }
    }
  //->编译为CSS的结果
    a {
        color: #428bca;
    }
    a:hover {
        color: #3071a9;
    }
复制代码

除了上述用变量存储公用的属性值，咱们还能够用变量存储公用的URL、选择器等等

//->LESS代码
    .@{selector} {
        width: 100px;
        height: 100px;
        @{property}: #000;
        background: url("@{bgImg}/test.png");
    }
    @selector: box;
    @bgImg: "../img";
    @property: color;
复制代码

2.混合(Mixins)

① 基本使用

混合能够将一个定义好的class A轻松的引入到另外一个class B中，从而简单实现class B继承class A中的全部属性。咱们还能够带参数地调用，就像使用函数同样。

//->LESS代码
    .public {
        width: 100px;
        height: 100px;
    }
    nav ul {
        .public;
        list-style: none;
    }
    //->编译为CSS的结果
    .public {
        width: 100px;
        height: 100px;
    }
    nav ul {
        width: 100px;
        height: 100px;
        list-style: none;
    }
复制代码

上述的代码，nav ul是把public中设定的样式属性值copy了一份到本身的样式中。若是你想在编译完成的结果中不输出public这个样式的结果，只须要按照下述的代码编写便可：

//->LESS代码
    .public() {//->在选择器后面加上()就能够不编译这个样式了
        width: 100px;
        height: 100px;
    }
    nav ul {
        .public;//若是public有子孙元素的样式，一样也会被复制过来
        list-style: none;
    }
    //->编译为CSS的结果
    nav ul {
        width: 100px;
        height: 100px;
        list-style: none;
    }
复制代码

② extend

虽然在上述的案例中，nav ul把public中的样式继承了过来，可是原理倒是把代码copy一份过来，这样编译后的CSS中依然会存留大量的冗余CSS代码，为了不这一点，咱们可使用extend伪类来实现样式的继承使用。和原来的选择器共用一套样式，但要保证原来的选择器不加括号。

//->LESS代码
    .public {
        width: 100px;
        height: 100px;
    }
    nav ul {
        &:extend(.public);
        list-style: none;
    }
    //->编译为CSS的结果
    .public, nav ul {
        width: 100px;
        height: 100px;
    }
    nav ul {
        list-style: none;
    }
复制代码

3.嵌套规则

咱们能够在一个选择器中嵌套另外一个选择器来实现继承，这样很大程度减小了代码量，而且代码看起来更加的清晰。

//->LESS代码
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}
复制代码
//->编译为CSS的结果
#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}
复制代码

4.函数 & 运算

运算提供了加，减，乘，除操做；咱们能够作属性值和颜色的运算，这样就能够实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，若是你愿意的话能够操做属性值。

任何数字、颜色或者变量均可以参与运算. 来看一组例子:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
复制代码

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 而后在通道级别操做:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
复制代码

LESS提供了一组方便的数学函数，你可使用它们处理一些数字类型的值:

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
复制代码

5.命名空间和做用域

LESS 中的做用域跟其余编程语言很是相似，首先会从本地查找变量或者混合模块，若是没找到的话会去父级做用域中查找，直到找到为止。

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red  
}
复制代码

参考文章

LESS学习:了解LESS和编译LESS

LESS学习:LESS的基础语法

LESS一种动态样式语言

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程