zoukankan      html  css  js  c++  java
  • CSS预处理语言-less 的使用

    Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

    Less 可以运行在 Node 或浏览器端。

    Less的编译处理

        作为一门CSS预处理语言,它并不像CSS一样能直接使用,而是需要编译后使用,如何编译呢,下面分node 和浏览器端两种情况解释。

     浏览器端:

        浏览器端使用less,只需要做如下两步:

          1.引如Less  

               使用link标签引入less,需要注意的是 rel="stylesheet/less" 

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

          2.引入less解析用的js文件 

    <script src="less.js" type="text/javascript"></script>

     

         3.声明解析,要在引入 less.js前进行声明。

    <script>
    
       less = {
    
        env: "development",
    
        async: false,
    
        fileAsync: false,
    
        poll: 1000, functions: {},
    
        dumpLineNumbers: "comments",
    
        relativeUrls: false, rootpath: ":/a.com/"
    
      };
    
    </script>

        完事,就这么简单,但是 由于编译解析less需要消耗一定的性能,且渲染也会有延迟,所有推荐使用node或其他第三方工具进行编译后使用。

        需要注意的是 js文件必须要在less文件后引入。

        less.js 下载地址在这里

     node端 

          1. 使用npm安装less 

                 $ npm install -g less

          2.编译输出

                 使用命令行调用less编译器进行编译

                 $ lessc styles.less

                这会输出到stdout编写CSS。将CSS结果保存到所选择使用的文件中

                 $ lessc styles.less styles.css

                 输出后你可以使用编译的style.css 啦。

    less的使用方法

       1.注释

       less 的注释分为两种:  /*  注释内容 */  和  //  注释内容   。

              /* */  为块注释  可以注释一行或多行, 

              //    为行注释,只能注释一行,而且这种注释在编译处理时会被编译掉。

        2.变量

      less中很方便的一个功能就是定义变量,当css多处用到同一个值的时候,如果不用变量,那么改动它需要改动100处,而使用变量的话,只需要修改变量的值便可以全局修改了,是不是很方便呢。

           

           和PHP类似 变量都是以@开头,无论是定义还是使用,使用如下  :

    // 定义变量 
    @cell_width:100px;

    //在使用的时候就可以这样使用

    .cell{
      @
    cell_width;

    }

        3.混合

        和css差别并不大,同样使用 选择器 后 带大括号 的形式,牛逼的是大括号里还可以写  选择器 +大括号 的形式,

        在不考虑渲染优化的情况下可以无限套下去,但是考虑到浏览器渲染任务繁重,往往最多只套4层。


    .body{
      100%;
    .section{
        border:1px solid #000;
      }
    }

    /*
    解析后的效果是下面这样的
    */
    .body{
      100%;
    }
    .body .section{
        border:1px solid #000;
      }

       除了套用,还可以引用:

    
    
    .section{
        border:1px solid #000;
      }
    .body{
      100%;
       .section;
    } /* 解析后的效果是下面这样的 */ 

    .body{
      100%;
      border:1px solid #000;
    } 

    除了以上的,还能使用传参,哈哈哈

    .border_radius(@radius:5px){
        -webkit-border-radius:@radius;
        -moz-border-radius:@radius;
        border-radius:@radius;  
    }
    .cell{
         100%;
        //可以不传参数,默认用5px 
        .border_radius(10px)
    }

    可以说是非常灵活了,随便套随便引。

    了解了以上的这些,就可以在实战中使用Less进行项目开发啦!

    (完)

         

  • 相关阅读:
    使用reflux进行react组件之间的通信
    一步一步学习underscore的封装和扩展方式
    使用nodewebx进行前后端开发环境分离
    react项目组件化思考
    css模块化策略
    immutableJS一些API
    CSS布局基础之二认识Viewport
    CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系
    【云图】如何制作全国KTV查询系统?
    【高德地图API】从零开始学高德JS API(六)——坐标转换
  • 原文地址:https://www.cnblogs.com/hanguozhi/p/7383729.html
Copyright © 2011-2022 走看看