嵌套规则

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. LoadRunner监控Linux资源

    一.LoadRunner监控Linux资源 (一).准备工作 首先,监视Linux一定要有rstatd这个守护进程,有的Linux版本里也有可能是rpc.rstatd这里只是名字不同而已,功能是一样的 ...

  2. 百度地图API详解之自定义地图类型

    http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图 ...

  3. 洛谷P3052 [USACO12MAR]摩天大楼里的奶牛 [迭代加深搜索]

    题目传送门 摩天大楼里的奶牛 题目描述 A little known fact about Bessie and friends is that they love stair climbing ra ...

  4. GPFS 安装测试

    简介 GPFS(General Parallel File System ,GPFS) 是 IBM 公司第一个共享文件系统,起源于 IBM SP 系统上使用的虚拟共享磁盘技术( VSD ).作为这项技 ...

  5. 【BZOJ 3160】 3160: 万径人踪灭 （FFT）

    3160: 万径人踪灭 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1440  Solved: 799 Description Input Outp ...

  6. POJ 3974 Palindrome 字符串 Manacher算法

    http://poj.org/problem?id=3974 模板题,Manacher算法主要利用了已匹配回文串的对称性,对前面已匹配的回文串进行利用,使时间复杂度从O(n^2)变为O(n). htt ...

  7. 【二分图最大匹配】【匈牙利算法】zoj3988 Prime Set

    题意:给你n个正整数,一对和为素数的数为一个合法数对.你选不超过K个合法数对,使得你选的数对涉及到的数的数量最大化.输出这个值. 所有1之间是可以任意两两配对的. 把奇数放在左侧,偶数放在右侧. 考虑 ...

  8. 【BIT套主席树】COGS257-动态排名系统

    题意同BZOJ1901,多组数据,数据范围也不一样.重新写一遍复习一下. #include<iostream> #include<cstdio> #include<cst ...

  9. 2017-2018-1 JAVA实验站 冲刺 day01

    2017-2018-1 JAVA实验站 冲刺 day01 各个成员在 Alpha 阶段认领的任务 小组成员 分工 任务量 张韵琪 写博客.后期市场推广,营销.打杂.各职能的配合 齐力锋 提供宣传用图. ...

  10. 如何解决The underlying provider failed on Open问题

    转自codeproject,找了半天解决办法,这个最靠谱. 我数据库用的EF做ORM,在vs里面测试的时候不会出现这个错误,用IIS就出错了.解决方法如下 Solution for "The ...