CSS预处理器之Less

最新推荐文章于 2024-04-07 08:31:09 发布

Blockchain Explorer

最新推荐文章于 2024-04-07 08:31:09 发布

阅读量737

点赞数 1

分类专栏： CSS/CSS3 文章标签： Less css预处理器

本文链接：https://blog.csdn.net/TDCQZD/article/details/82356081

版权

这里写图片描述

一、less

Less 是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 既可以在客户端上运行，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/

二、Less使用

浏览器本身是不支持less语法的。我们需要通过编译将less转化为css代码。
可以通过less官网提供的js文件进行编译。

<style type="text/less">
    less代码的编写
</style>
<script src="../less/less.min.js"></script>

less编译文件的bootCDN地址:

https://cdn.bootcss.com/less.js/3.0.4/less.min.js

需要注意的是,该js文件必须要在style标签下面.因为这是一个解析动作需要拿到style中的信息。且这个style标签的type一定得是text/less的。
也可以通过编译工具来进行编译，比如考拉。
当然，最终对less的编译我们都会放进我们项目的工程化流程中使用构建工具来管理。

三、快速入门案例

01普通垂直水平居中.html

<html>

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

            #wrap {
                width: 300px;
                height: 300px;
                background: blue;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

            #f {
                width: 100px;
                height: 100px;
                background: pink;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>

    <body>
        <div id="wrap">
            <div id="f">

            </div>
        </div>
    </body>

案例图示：

这里写图片描述

02使用less实现垂直居中.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--使用less
              1、将f子元素嵌套到父元素中;
              2、style type="text/css"修改为type="text/less";
              3、引入less.min.js标签
        优点：可以实现在CSS中元素嵌套
        缺点：这种less加载方式浏览器加载渲染性能差
        解决：可以使用koala工具来处理less文件，将其转换为css文件
        -->
        <style type="text/less">
            * {
                margin: 0;
                padding: 0;
            }

            #wrap {
                width: 300px;
                height: 300px;
                background: blue;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                #f{
                    width: 100px;
                    height: 100px;
                    background: pink;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }
            }

        </style>
        <script src="../less/less.min.js"></script>
    </head>

    <body>
        <div id="wrap">
            <div id="f">

            </div>
        </div>
    </body>

less.min.js

03使用koala处理less实现垂直居中.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/koala_less_ver_hor_centered.css"/>
    </head>
    <body>
        <body>
        <div id="wrap">
            <div id="f">

            </div>
        </div>
    </body>
    </body>

koala_less_ver_hor_centered.less

* {
                margin: 0;
                padding: 0;
            }

            #wrap {
                width: 300px;
                height: 300px;
                background: blue;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                #f{
                    width: 100px;
                    height: 100px;
                    background: pink;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom