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