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-width: 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} 就可以引用这个类里面的变量的样式了。

来源：https://www.cnblogs.com/wangzheng98/p/11245496.html

标签

css

less

变量