zoukankan      html  css  js  c++  java
  • less相关知识点总结

    Less和css的区别

    html和css不属于编程语言而是属于标记语言,很难像js一样定义变量、编写方法、实现模块化开发等。
    LESS是一门CSS预处理语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS更易维护和扩展。
    使用LESS基本上按照这样的步骤:编写LESS代码,使用NODE、js或者是其他的工具把编写的LESS代码编译成我们平时看到的CSS代码(因为浏览器是无法解析LESS的语法的,所以编写完成的LESS代码需要进行编译)。

    Less叫做预编译css,写好的less代码浏览器是不能直接渲染的,需要我们把它编译成为能渲染的css才可以。

    广州vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

    编译Less

    开发环境中
    在开发环境下,我们一般都通过导入less插件来随时编译less代码。

    //注意rel="stylesheet/less"中必须加上less
    <link rel="stylesheet/less" href="./css/1.less">
    <script src="./css/less-2.5.3.min.js"></script>
    生产环境中

    由于每一次加载页面都需要导入LESS插件,并且把LESS文件重新编译为CSS,很消耗性能,导致页面打开速度变慢。所以在生产环境中,我们需要事前把LESS文件编译为正常的CSS后,在相应文件中引入,以后用户访问的都是编译好的CSS,为不是拿LESS现编译的。
    生产环境下,我们需要事先把LESS编译成CSS方法:
    1)使用Node编译

    这种方式是目前项目中最常用的方式,它是把我们的LESS文件编译成CSS文件,我们项目中直接的引入CSS文件即可. 

    (1) 安装node 

    npm install less -g

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

    (3) 使用命令进行编译

    //->把styles.less文件编译成styles.css文件(如果没有这个CSS文件自己会创建)    
    lessc styles.less styles.css      
    //->编译完成的CSS文件是经过压缩的     
    lessc styles.less styles.min.css -x或者--compress 

    如果你想要更牛X的压缩,还可以自己单独的设定,下面我们使用–clean-css。这个需要提前的安装less-plugin-clean-css模块才可以。

    //->安装less-plugin-clean-css     
    npm install -g less-plugin-clean-css
    //->安装成功后就可以使用它压缩了     
    lessc --clean-css styles.less styles.min.css 

    2)使用编译工具(less在线编译)

    目前常用的编译工具有:Koala(据说目前最流行的)、在线编译(http://tool.oschina.net/less)、SimpLESS等。

     

    Less的基本语法

    less中的变量
    和JS中的变量一样,只是LESS的变量定义不是使用var而是使用@。

    //用变量存储公用的属性值
    @shadowColor: #000;
    .inner {
        box-shadow: 0 0 10px 0 @shadowColor;
    }
    //用变量存储公用的URL、选择器
    
        @selector: box;
        @bgImg: "../img";
        @property: color;
        @name: "fung";
        
        //->LESS代码
        .@{selector} {
             100px;
            height: 100px;
            @{property}: #000;
            background: url("@{bgImg}/test.png");
    
            &:after {
                display: block;
                content: @@var;
            }
         }

    混合(Mixins)
    所谓的混合其实是把某个选择器中的样式拷贝一份拿过来使用

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

    我们发现其实nav ul是把public中设定的样式属性值copy了一份到自己的样式中。如果你想在编译完成的结果中不输出public这个样式的结果,只需要按照下述的代码编写即可:

    
    //->LESS代码
    .public() {//->在选择器后面加上()就可以不编译这个样式了
         100px;
        height: 100px;
    }
    
    nav ul {
        .public;
        list-style: none;
    }
    
    //->编译为CSS的结果
    nav ul {
         100px;
        height: 100px;
        list-style: none;
    }

    3.extend

    虽然在上述的案例中,nav ul把public中的样式继承了过来,但是原理却是把代码copy一份过来,这样编译后的CSS中依然会存留大量的冗余CSS代码,为了避免这一点,我们可以使用extend伪类来实现样式的继承使用。
    ```
    
    //->LESS代码
    .public {
         100px;
        height: 100px;
    }
    
    nav ul {
        &:extend(.public);
        list-style: none;
    }
    
    //->编译为CSS的结果
    .public, nav ul {
         100px;
        height: 100px;
    }
    
    nav ul {
        list-style: none;
    }
    ```
    或者
    ```
    
    //->LESS代码
    .public {
         100px;
        height: 100px;
    }
    
    nav ul:extend(.public) {
        list-style: none;
    }
    
    //->编译为CSS的结果和第一种写法一样
    ```

    4.命名空间和作用域

    在LESS中定义了命名空间就创建了一个私有的作用域,在这个私有作用域中使用的变量都是先看一下自己作用域中有没有,没有的话,在向上一级查找(类似于JS的作用域链)
    ```
    
    //->LESS代码
    @color: #ccc;
    .box {
        @color: #eee;
        .gray {
            color: @color;
        }
    }
    
    .box2 {
        .gray {
            color: @color;
        }
    }
    
    //->编译为CSS的结果
    .box .gray {
        color: #eee;
    }
    
    .box2 .gray {
        color: #ccc;
    }
    ```

    5.!important
    在调用的混合集后面追加 !important 关键字,可以使混合集里面的所有属性都继承 !important.

    //->LESS代码
    @color: #ccc;
    .box {
      @color: #eee;
      .gray {
        color: @color;
      }
    }
    
    nav ul {
      .box !important;
    }
    
    //->编译为CSS的结果
    .box .gray {
        color: #eee;
    }
    
    nav ul .gray {
        color: #eee !important;
    }

    6.函数
    如同JS一样,LESS也可以向函数一样设定形参数,这个技巧在我们的项目中会被经常的使用到,例如:处理CSS3的兼容问题

    
        //->LESS代码
        .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
          -webkit-transition: @property @duration @function @delay;
          -moz-transition: @property @duration @function @delay;
          -ms-transition: @property @duration @function @delay;
          -o-transition: @property @duration @function @delay;
          transition: @property @duration @function @delay;
        }
    
        .box1 {
          .transition;
        }
    
        .box2 {
          .transition(@duration: 2s);
        }
    
        .box3 {
          .transition(@duration: 2s; @property: width;);
        }
    
        //->编译为CSS的结果
        .box1 {
            -webkit-transition: all 1s linear 0s;
            -moz-transition: all 1s linear 0s;
            -ms-transition: all 1s linear 0s;
            -o-transition: all 1s linear 0s;
            transition: all 1s linear 0s;
        }
    
        .box2 {
            -webkit-transition: all 2s linear 0s;
            -moz-transition: all 2s linear 0s;
            -ms-transition: all 2s linear 0s;
            -o-transition: all 2s linear 0s;
            transition: all 2s linear 0s;
        }
    
        .box3 {
            -webkit-transition: width 2s linear 0s;
            -moz-transition: width 2s linear 0s;
            -ms-transition: width 2s linear 0s;
            -o-transition: width 2s linear 0s;
            transition: width 2s linear 0s;
        }

    此外我们需要值得注意的是,LESS中也有arguments。

    
        //->LESS代码
        .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
          -webkit-transition: @arguments;
          transition: @arguments;
        }
    
        .box1 {
          .transition;
        }
    
        //->编译为CSS的结果
        .box1 {
            -webkit-transition: all 1s linear 0s;
            transition: all 1s linear 0s;
        }
     
  • 相关阅读:
    122. Best Time to Buy and Sell Stock II
    121. Best Time to Buy and Sell Stock
    72. Edit Distance
    583. Delete Operation for Two Strings
    582. Kill Process
    indexDB基本用法
    浏览器的渲染原理
    js实现txt/excel文件下载
    git 常用命令
    nginx进入 配置目录时
  • 原文地址:https://www.cnblogs.com/ypppt/p/13695906.html
Copyright © 2011-2022 走看看