• less的用法


      less是一个css预处理语言,赋予了动态语言的特性,如变量集成,运算,函数。less既可以在客户端(koala)上运行,也可以在服务端运行(借助Node.js),也可以在浏览器上运行。

      1.使用less的基本步骤

      1)在引入less.js之前要先把样式文件先引入

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

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

              less源文件一定要在less.js 引入之前引入,less源文件才可以正常的变异解析

      2)创建一个less文件(style.less),在style.css的中写css样式。

      3)然后将style.less文件进行编译为style.css,然后生成到css上。

     2.变量

       定义变量的作用:定义变量可以单独定义一些样式,然后在我们需要的时候再去调用它。更少的更改代码。

       定义变量:  @变量名:变量值; 比如 @color: #4D926F;

     3.混合嵌套

      作用:可以将一个定义好的class A 引入到class B中,然后可以简单的实现B继承A的所有属性。也可以进行参数的调用,就像使用函数一样的方便。嵌套还可以减少代码量。

      比如:

    p { font-size: 12px;
        a { text-decoration: none;
          &:hover { border- 1px }
        }
      }

       4.函数

        less提供css的加减乘除运算,可以用在属性值和颜色的运算。

        比如

    /* 先定义好变量*/
    @the-border: 1px;
    @base-color: #111;
    @red:        #842210;
    /*less代码*/
    #header {
      color: @base-color * 3;
      border-left: @the-border;
      border-right: @the-border * 2;
    }
    /*css的代码*/
    #header {
      color: #333;
      border-left: 1px;
      border-right: 2px;
    }

        5.Mixin

          就是定义一个类,然后把利用率高的代码放到一个类中,然后需要引用的时候就可以引用了;

          先定义一个类 .round{ border-radius = @radius};

          #header{ .round}  就可以引用这个类里面的变量的样式了。

        

     

      

      

      

      

        

      

  • 相关阅读:
    【BZOJ4864】[BeiJing 2017 Wc]神秘物质 Splay
    【BZOJ3438】小M的作物 最小割
    【BZOJ3436】小K的农场 差分约束
    【BZOJ2879】[Noi2012]美食节 动态加边网络流
    【BZOJ1070】[SCOI2007]修车 费用流
    【BZOJ1486】[HNOI2009]最小圈 分数规划
    搜索ABAP程序代码中的字符串
    自定义表的维护
    用户名转换成中文名
    日期计算
  • 原文地址:https://www.cnblogs.com/wangzheng98/p/11245496.html
Copyright © 2020-2023  润新知