less 初体验

为什么需要 less

CSS 的语法虽然简单，但它同时也带来一些问题

CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，也不利于复用

造成这些原因的本质源于 CSS 是一门非程序式的语言，没有变量 / 函数 / 作用域等概念

什么是 less(Leaner Style Sheets)

Less 是一门 CSS 预处理语言，为 CSS 赋予了动态语言的特征

它扩展了 CSS 语言，增加了变量、Mixin (混合) 嵌套、函数和运算等特性，使 CSS 更易维护和扩展

一句话：用类似 JS 的语法去写 CSS

如上 为什么需要 less、什么是 less(Leaner Style Sheets) 我们先来看一个示例来体验一下不用 less 之前的 css 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .son {
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

当然如上的代码层级结构不深，而且类名命名的非常明确，那么如果是 a、b 呢，你说是吧，就不演示 a、b 类名命名的代码了，还是如上那句话 CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，也不利于复用，造成这些原因的本质源于 CSS 是一门非程序式的语言，没有变量 / 函数 / 作用域等概念。

CSS 预处理器

CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性 (变量、函数、继承等)

CSS 预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处

简而言之：CSS 预处理器就是升级版的 CSS

常见的 CSS 预处理器

Less
Sass
Stylus

less 基本使用

浏览器中直接运行

编写 less 文件
引入 less 文件
引入 less.js 运行

首先来看第一种编写方式，把 less 代码和 html 代码写在同一个文件当中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <style type="text/less">
      * {
        margin: 0;
        padding: 0;
      }

      .father {
        width: 300px;
        height: 300px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .son {
          width: 200px;
          height: 200px;
          background: blue;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

然后在浏览器当中打开发现没有任何效果如下图

使用 less 需要引入一个 less.js 文件，下载地址：http://lesscss.cn/#download-options 下载了之后然后引入下载好的 less.js 如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <style type="text/less">
      * {
        margin: 0;
        padding: 0;
      }

      .father {
        width: 300px;
        height: 300px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .son {
          width: 200px;
          height: 200px;
          background: blue;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

观察效果

如上就是第一种方式，因为你直接编写 less 的内容浏览器是不认识的，需要一个 less.js 文件来帮你转换为浏览器所认识的 css 内容，如上的代码可以简化为如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <style type="text/less">
      * {
        margin: 0;
        padding: 0;
      }

      .center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .father {
        width: 300px;
        height: 300px;
        background: red;
        .center;

        .son {
          width: 200px;
          height: 200px;
          background: blue;
          .center;
        }
      }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

接下来看第二种编写方式，新建一个 index.less 文件编写内容如下

* {
  margin: 0;
  padding: 0;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.father {
  width: 300px;
  height: 300px;
  background: red;
  .center;

  .son {
    width: 200px;
    height: 200px;
    background: blue;
    .center;
  }
}

修改 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <link rel="stylesheet/less" href="index/index.less">
    <script src="js/less.js"></script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>