Less -- 初见less（Less介绍 & 初次使用less & 使用考拉编译less）

Posted 2021-09-22 Z && Y

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Less -- 初见less（Less介绍 & 初次使用less & 使用考拉编译less）相关的知识，希望对你有一定的参考价值。

1. 初见less

1.1 Less介绍

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
Less中文网

1.2 初次使用less

1.2.1 没有使用less: wrap 和 inner在样式文件里面没有联系

代码:

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

        #wrap {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid;
            margin: 0 auto;
        }

        #inner {
            width: 100px;
            height: 100px;
            background: orange;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="inner"></div>
</div>
</body>
</html>

运行结果:

1.2.2 使用less: css代码层次结构清晰

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--	这里选择的类型是less-->
    <style type="text/less">
      * {
        margin: 0;
        padding: 0;
      }

      #wrap {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid;
        margin: 0 auto;

        #inner {
          width: 100px;
          height: 100px;
          background: orange;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }
      }
    </style>
    <!--	引入less.min.js 用于在游览器段把less编译成为css-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
</head>
<body>
<div id="wrap">
    <div id="inner"></div>
</div>
</body>
</html>