Less

来源：互联网发布：淘宝店铺刷流量编辑：程序博客网时间：2024/06/07 02:43

网站重构用到了Less。
what is this?
这里写图片描述
LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

1 变量

@color:#826650; // 主色调@color0:rgba(0,0,0,0.5);.page{color:@color;background-color:@color0;}@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }

2 混合

//定义圆角.rounded-corners (@radius: 5px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;    -ms-border-radius: @radius;    -o-border-radius: @radius;    border-radius: @radius;}#header {    .rounded-corners;}#footer {    .rounded-corners(10px);}

3 嵌套

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

4 函数和运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

@the-border: 1px;@base-color: #111;@red:        #842210;#header {    color: (@base-color * 3);    border-left: @the-border;    border-right: (@the-border * 2);}#footer {    color: (@base-color + #003300);    border-color: desaturate(@red, 10%);}

5 引用

#bundle {    .button () {        display: block;        border: 1px solid black;        background-color: grey;        &:hover { background-color: white }    }    .tab { ... }    .citation { ... }}#header a {    color: orange;    #bundle > .button; // 看，引用了#bundle 里button的全部样式}

6 关于注释

less有两种注释，// 以及 /* 注释内容*/

但是双斜线的注释，在编译成 CSS 的时候自动过滤掉。

以上是Less 的基本的用法。

这里写图片描述

我是用的一个Less 编辑器，Koala 。这是开发的LESSCSS/SASS编译工具。下载地址：http://koala-app.com/index-zh.html。

使用到其余一些语法函数,挑出一些可能会用到的

1 颜色透明

fadein(@color, 10%)

降低颜色的透明度（或增加不透明度），令其更不透明，对不透明的颜色无效。如果要增加颜色的透明度，使用 fadeout() 函数。

fadein(#ccc,90%)

这里写图片描述

2 convert 转换数字单位

第一个参数为带单位的数值，第二个参数为单位。如果两个参数的单位是兼容的，则数字的单位被转换。如果两个参数的单位不兼容，则原样返回第一个参数。

convert(9s, "ms")  // 你可以在做过渡效果的时候使用呀

这里写图片描述

3 rgb 通过十进制红色、绿色、蓝色三种值 (RGB) 创建不透明的颜色对象。
这里写图片描述

4 @arguments 变量

@arguments包含了所有传递进来的参数。如果你不想单独处理每一个参数的话就可以像这样写：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {    box-shadow: @arguments;    -moz-box-shadow: @arguments;    -webkit-box-shadow: @arguments;}.box-shadow(2px, 5px);

5 !important关键字

调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important：

.mixin (@a: 0) {    border: @a;    boxer: @a;}.important {    .mixin(2) !important; }

编译成：

.important {    border: 2 !important;    boxer: 2 !important;}

查看参考文档

0 0