嵌套规则

01 #header { color: black; }#header .navigation {  font-size: 12px;
02 }#header .logo { 
03   width: 300px; 
04 }#header .logo:hover {  text-decoration: none;
05 }
06  
07 #header {  color: black;  .navigation {    font-size: 12px;
08   }  .logo {    width: 300px;
09     &:hover { text-decoration: none }
10   }
11 }

变量:

1 @nice-blue: #5B83AD;
2 @light-blue: @nice-blue + #111;
3 #header { color: @light-blue; }

伪类写法:

1 a{
2     color: red;
3     &:hover{color:blue;}
4     &:active{color:green;}
5 }

COLOR颜色函数:

01 lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
02 darken(@color, 10%);      // return a color which is 10% *darker* than @color
03  
04 saturate(@color, 10%);    // return a color 10% *more* saturated than @color
05 desaturate(@color, 10%);  // return a color 10% *less* saturated than @color
06  
07 fadein(@color, 10%);      // return a color 10% *less* transparent than @color
08 fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
09 fade(@color, 50%);        // return @color with 50% transparency
10  
11 spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
12 spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
13  
14 mix(@color1, @color2);    // return a mix of @color1 and @color2

DEMO_HTML:

谷歌/火狐浏览器适用,IE浏览器不兼容.

01 <!doctype html>
02 <html>
03 <head>
04     <meta charset="UTF-8">
05     <title>Document</title>
06     <link rel="stylesheet/less" type="text/css" href="less/styles.less" />
07     <script src="less-1.5.0.min.js" type="text/javascript"></script>
08 </head>
09 <body>
10     <div id="content">
11         <div style="height:30px;color:#FFF;background-color:#000;">对照文本颜色</div>
12         <h1>这里是标题啦</h1>
13         <h2>内容标题文件</h2>
14         <h3>再一种颜色</h3>
15         <p>一种新颜色</p>
16     </div>
17 <script>
18     less.watch(); //自动刷新
19 </script>
20 </body>
21 </html>

CSS_LESS 语法/函数详解的更多相关文章

  1. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  2. PHP输出缓存ob系列函数详解

    PHP输出缓存ob系列函数详解 ob,输出缓冲区,是output buffering的简称,而不是output cache.ob用对了,是能对速度有一定的帮助,但是盲目的加上ob函数,只会增加CPU额 ...

  3. ***PHP $_FILES函数详解 + PHP文件上传 move_uploaded_file() 参数的正确写法

    PHP $_FILES函数详解 在PHP中上传一个文件建一个表单要比ASP中灵活得多.具体的看代码. 如:  复制代码代码如下: <form enctype="multipart/fo ...

  4. 实例-sprintf() 函数详解-输出格式转换函数

    Part1:实例 $filterfile = basename(PHP_SELF, '.php'); if (isset($_GET['uselastfilter']) && isse ...

  5. Atitit.jdk java8的语法特性详解 attilax 总结

    Atitit.jdk java8的语法特性详解 attilax 总结 1.1. 类型推断这个特别有趣的.鲜为人知的特性1 2. Lambda1 2.1. 内部迭代意味着改由Java类库来进行迭代,而不 ...

  6. Jquery之each函数详解

    最近项目被each函数坑惨了,想来还是好好整理下关于each函数的方方面面,一来方便自己查阅,二来为读者提供经验和教训,废话不多说,来看看Each函数到底是怎么坑人的. 一. 全局jQuery.eac ...

  7. Mysql 字符函数详解

    MySql 所有字符串函数函数详解 ASCII(str) 返回str最左边第一位字符的ASCII编码,如果str为空,则返回 0 .如果str为NULL,则返回NULL -- 只返回a的ASCII编码 ...

  8. PHP glob() 函数详解

    PHP glob() 函数详解 一.总结 glob()作用:glob() 函数返回匹配指定模式的文件名或目录. glob()返回值:该函数返回一个包含有匹配文件 / 目录的数组.如果出错返回 fals ...

  9. jQuery.hasClass() 函数详解

    jQuery.hasClass() 函数详解 hasClass()函数用于指示当前jQuery对象所匹配的元素是否含有指定的css类名. 该函数属于jQuery对象(实例). 语法 JavaScrip ...

随机推荐

  1. Failed to lookup view 'error'

    这个问题在npm run dev进行本地开发时,没有问题.但是在npm run build后,生产服务器上部署时出现问题. 我对本地的路径排查,发现写的没有问题 所以我去了生产的文件夹看路径 我去了s ...

  2. UWP数据分享

    前言 本文介绍如何在通用Windows平台(UWP)应用程序中支持共享合同.共享合同是一种在应用程序之间快速共享数据(如文本,链接,照片和视频)的简便方法.例如,用户可能想要使用社交网络应用与他们的朋 ...

  3. Ubuntu下修改ubuntu源，完成Redis Desktop Manager的安装

    原文地址: http://blog.csdn.net/u013410747/article/details/51706964 免费下载链接:http://pan.baidu.com/s/1cA3jWU ...

  4. 【随机化】【并查集】Gym - 100851J - Jump

    题意:交互题,有一个长度为n(偶数)的二进制串,你需要猜不超过n+500次猜到它.如果你猜的串与原串相同的位数为n,那么会返回n,如果为n/2,那么会返回n/2,否则都会返回零. 先random,直到 ...

  5. 【二分查找-最大化平均值】POJ2976 - Dropping Test

    [题目大意] 给出n组ai和bi,去掉k个使得a的总和除以b的总和最大. [思路] 也就是取(n-k)个数,最大化平均值,见<挑战程序设计竞赛>P144,最后公式为c(x)=((ai-x* ...

  6. 某DP题目3

    题意: 一根数轴上有n只怪物,第i个怪物所在的位置为ai,另有m个特殊点,第i个特殊点所在的位置为bi.你可以对怪物进行移动,若两怪物相邻,那么你不能把他们分开,移动时要看作一个整体.你可以选择向左或 ...

  7. JDK源码(1.7) -- java.util.AbstractList<E>

    java.util.AbstractList<E> 源码分析(JDK1.7) ------------------------------------------------------- ...

  8. python开发_pickle

    pickle模块使用的数据格式是python专用的,并且不同版本不向后兼容,同时也不能被其他语言说识别.要和其他语言交互,可以使用内置的json包使用pickle模块你可以把Python对象直接保存到 ...

  9. 国内OCR供应商及其演示链接

    最近因为需要收集了一些OCR的供应商,可以做身份证识别,银行卡识别,名片识别等特定场景下的文字识别.在通用场景下的文字识别效果还不是很理想.现在OCR在特定的场景下做得已经很不错了.下面列出下这些厂商 ...

  10. 分享我用Taker做任务时需要的各种资源的精华帖，方便查阅

    http://tieba.baidu.com/p/2310764470 第一名 [Tasker论坛] https://groups.google.com/group/tasker/?pli=1http ...