美文网首页
less 初探

less 初探

作者: 汪槑槑2017 | 来源:发表于2018-11-19 16:34 被阅读20次

    官方文档 

    ## Less 中文网 http://lesscss.cn/

    ## Less 官网 http://lesscss.org/


    使用

    1.  Use with Node.js:

    npm install -g less

    lessc styles.less styles.css 

    2. browser:

    <link rel="stylesheet/less" type="text/css" href="main.less" />

    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>


    主要(常用):

    变量(Variables)

    混合(Mixins)

    嵌套(Nesting)

    运算(Operations)

    导入(Importing)

    作用域(Scope)

    Maps

    Escaping

    注释(Comments)
    插件:npm install less-plugin-clean-css

    //cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" >


    index.html

    <!doctype html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>初识 Less</title>

        <style>

            @import "./main.min.css"

        </style>

        <!-- <link href="./main.min.css" rel="stylesheet"> -->

    </head>

    <body>

        <div class="container">1</div>

        <div class="container2">

            2

            <span>haha</span>

        </div>

        <div class="container3">3</div>

        <div class="naim">

            Lorem ipsum dolor sit amet, consectetur adipisicing elit.

            Ex aspernatur nobis ipsa quia neque ad corporis deleniti,

            necessitatibus quam voluptatem est rerum numquam doloribus!

            Quo ducimus aperiam accusamus velit sequi!

        </div>

    </body>

    </html>


    main.less

    @width: 100%;

    @height: 100%;

    @color: red;

    @white: #fff;

    @borderH: 1px;

    @left: 15px;

    @max768: ~"(max-width: 768px)";

    @min320: ~"(min-width: 320px)";

    .border-radius (@radius:4px) {

        -moz-border-radius: @radius;

        -webkit-border-radius: @radius;

    }

    .bordered {

        border-top: dotted 10px black;

        border-bottom: solid 2px black;

    }

    .container{

        color: @white;

        width: @width;

        height: @height;

        background: @color;

        margin-bottom: 15px;

        .bordered();

    }

    .container2{

        width: @width;

        height: @height;

        background: @white;

        margin-bottom: 5px;

        span {

            font-size: 24px;

            color: @color;

            &:before {

                content: '';

                display: inline-block;

                width: 6px;

                height: 20px;

                margin-right: @left;

                background: yellow;

            }

            @media @max768 {

                color: blue;

            }

            @media @min320 {

                color: yellow;

            }

        }

        border-top: @borderH+2 solid black;

    }

    .container3{

        width: @width;

        height: @height;

        background-color: @color;

        margin-bottom: 5px;

        border: 1px solid @color;

        .border-radius(10px);

    }

    相关文章

      网友评论

          本文标题:less 初探

          本文链接:https://www.haomeiwen.com/subject/dqrafqtx.html