嵌套规则

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. HTTP缓存了解（一）

    引言 HTTP/1.1 200 OK X-Powered-By: Express Content-Type: text/html; charset=utf-8 Content-Length: 3 ET ...

  2. [Codeforces50C]Happy Farm 5 凸包

    大致题意: 平面上有n个整数点,问你最少经过多少步能够将所有点严格包围. 将点严格包围要求你走的路径完全包围给出的点且不能有点在路径上 你只能走整数点,且方向只有上下左右左上右下等8个方向,每次移动一 ...

  3. HDU 6182 A Math Problem

    暴力. $k$的$k$次方在$k=15$的时候,达到了最大不爆掉的情况. #include<bits/stdc++.h> using namespace std; long long an ...

  4. python解析Nginx访问日志

    环境说明 python3+ pip install geoip2==2.9.0 nginx日志配置成json格式,配置如下: log_format json_log '{ "time&quo ...

  5. XPath中的text()和string()区别(转)

    原文地址 : http://blog.csdn.net/jiangchao858/article/details/63314426 本质区别 text()是一个node test,而string()是 ...

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

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

  7. Codeforces 622 F. The Sum of the k-th Powers

    \(>Codeforces \space 622\ F. The\ Sum\ of\ the\ k-th\ Powers<\) 题目大意 : 给出 \(n, k\),求 \(\sum_{i ...

  8. Java 请求webServce接口 不带参数

    最近对接了个webService的接口取数据,从网上良莠不齐的代码中找到了个方法, 具体作者已经记不住是谁了,现在把代码贴出来,希望可以帮到大家,代码如下,简单粗暴 public String get ...

  9. Mac下配置Idea的Maven

    环境版本: Mac OS: 10.13.4 JDK: 1.8 Idea: 2018.3 Maven: 3.6.0 Maven 相关配置: Maven 下载: http://maven.apache.o ...

  10. 内功心法 -- java.util.LinkedList<E> (8)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...