嵌套规则

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. ASN.1笔记——语法规则与类型概述

    转载:https://blog.csdn.net/sever2012/article/details/7672699 一.简介 ASN.1(Abstract Syntax Notation doton ...

  2. 消息中间件ActiveMQ使用详解

    消息中间件ActiveMQ使用详解 一.消息中间件的介绍 介绍 ​ 消息队列 是指利用 高效可靠 的 消息传递机制 进行与平台无关的 数据交流,并基于 数据通信 来进行分布式系统的集成. 特点(作用) ...

  3. TCP的那些事-2

    这篇文章是下篇,所以如果你对TCP不熟悉的话,还请你先看看上篇<TCP的那些事儿(上)> 上篇中,我们介绍了TCP的协议头.状态机.数据重传中的东西.但是TCP要解决一个很大的事,那就是要 ...

  4. [BZOJ4554][TJOI2016&&HEOI2016]游戏(匈牙利)

    4554: [Tjoi2016&Heoi2016]游戏 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 857  Solved: 506[Sub ...

  5. AHOI2018训练日程(3.10~4.12)

    (总计:共90题) 3.10~3.16:17题 3.17~3.23:6题 3.24~3.30:17题 3.31~4.6:21题 4.7~4.12:29题 ZJOI&&FJOI(6题) ...

  6. Android:Date、String、Long三种日期类型之间的相互转换

    源地址:http://blog.csdn.net/wangyanguiyiyang date类型转换为String类型: // formatType格式为yyyy-MM-dd HH:mm:ss//yy ...

  7. AIDL原理之 Framewok层实现

    AIDLFramework层的架构,如下图: 换而言之,Android就是在传统的C/S架构中加入了一层,实现IPC.图中表明,AIDL类似COM的Proxy/Stub架构.不过是现在android自 ...

  8. [YC703]ゴミ拾い Easy

    [YC703]ゴミ拾い Easy 题目大意: 二维平面内有\(n(n\le3\times10^5)\)个人和\(n\)个物品,第\(i\)个人在\((a_i,0)\)上,第\(i\)个物品在\((x_ ...

  9. Miller_rabin算法+Pollard_rho算法 POJ 1811 Prime Test

    POJ 1811 Prime Test Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 32534   Accepted: 8 ...

  10. Codeforces Beta Round #4 (Div. 2 Only) A. Watermelon 水题

    A. Watermelon 题目连接: http://www.codeforces.com/contest/4/problem/A Description One hot summer day Pet ...