(一)嵌套规则

  【1】less可以让我们以嵌套的方式编写层叠样式,先看下面这段CSS;

.box-a .hd {
height: 20px;
}
.box-a .bd .txt {
color: #000;
}
.box-a .other {
position: relative;

  在LESS中,可以用嵌套方式写以上代码:

.box-a{
.hd{
height:20px;
}
.bd{
.txt{
color:#000;
}
}
.other{
position:relative;
}
}

  代码变更简洁与直观,与DOM树结构很相似。

  【2】 & 符号

  如果在嵌套规则中,想写串联选择器,而不是写后代选择器,可以用 & 符号,如:hover 伪类写法

.box-a{
.hd{
height:20px;
a{
&:hover{
color:#000;
}
}
} }

  编译后:

.box-a .hd {
height: 20px;
}
.box-a .hd a:hover {
color: #000;
}

(二)变量

  【1】定义

  @名:值; (需要在末尾加上分号)

@color:#f60;
p{
background-color:@color;
}

  编译后:

p {
background-color: #ff6600;
}

  【2】字符串插入变量值

@url:'../images/';
p{
background:url('@{url}sp.png');

  编译后:

p {
background: url('../images/sp.png');
}

  【3】变量之间赋值

@url:'../images/';
@pageurl:@url; p{
background-image:url('@{pageurl}xxxx.jpg');
}

  编译后:

p {
background-image: url('../images/xxxx.jpg');
}

  【4】预解析

  (1)Less的变量调用,不需要在变量声明后才可以使用;

  (2)同一个变量定义多次,在当前作用域中最后一次定义的将被使用

p{
background-image:url('@{url}xxxx.jpg');
} @url:'../images/';
@url:'http://www.xx.com/';

  编译后:

p {
background-image: url('http://www.xx.com/xxxx.jpg');
}

(三)混合(Mixins)

  【1】调用已有的class或id 属性集  

#modA{color:#000;}
.fl{float:left;} p{
#modA;
.fl;
}

  编译后:

#modA {
color: #000;
}
.fl {
float: left;
}
p {
color: #000;
float: left;
}

  【2】带参数(或者空参数)的混合,编译后不会暴露在css文件中

#modA(){color:#000;}
.fl(){float:left;} p{
#modA;
.fl;
}

  编译后(CSS文件没有混合模块的代码):

p {
color: #000;
float: left;
}

  

  【3】设置默认参数

.mixins(@w;@h:100px){
width:@w;
height:@h;
}
p{
.mixins(50px);
}

  编译后:

p {
width: 50px;
height: 100px;
}

  【4】参数

  (1)多个参数可以使用分号或者逗号分隔,推荐使用分号分隔,因为逗号有两重含义:它既可以表示混合的参数,也可以表示一个参数中一组值的分隔符。

  (2)如果在混合的定义或者是调用中找到至少一个分号,就会假设参数是使用分号分隔的,所有的逗号都属于参数中的一组值的分隔符。

.mixins(@font;@h){
font:@font;
height:@h;
}
p{
.mixins(12px 'Microsoft yahei',arial;50px);
}

  编译后:

p {
font: 12px 'Microsoft yahei', arial;
height: 50px;
}  

  (3)...  设置不限制参数的个数;@arguments 获取全部的参数值

.mixins(...){
-webkit-transform:@arguments;
-moz-transform:@arguments;
-ms-transform:@arguments;
-o-transform:@arguments;
transform:@arguments; }
p{
.mixins(translate(-10px,-10px));
}

  编译后:

p {
-webkit-transform: translate(-10px, -10px);
-moz-transform: translate(-10px, -10px);
-ms-transform: translate(-10px, -10px);
-o-transform: translate(-10px, -10px);
transform: translate(-10px, -10px);
}

  【5】同名混合不会覆盖,符合且都会调用

.mixins(){
overflow:hidden;
}
.mixins(){
font:;
}
p{
.mixins();
}

  编译后:

p {
overflow: hidden;
font:;
}

  【6】匹配

  (1)根据参数数量匹配

.mixins(){
overflow:hidden;
}
.mixins(@fz){
font:@fz;
}
.mixins(@w;@h){
width:@w;
height:@h;
}
p{
.mixins(10px);
}

  编译后:

p {
font: 10px;
}

  (2)指定匹配

.mixins(baidu){
overflow:hidden;
}
.mixins(winds){
font-size:;
} p{
.mixins(baidu);
}

  编译后:

p {
overflow: hidden;
}

  【7】表达式匹配 Guards,支持的表达式匹配运算符包括:>   >=   =    =<    <   (注意:相等是 = )

  (1)单个条件

.mixins(@type) when(@type=baidu){
overflow:hidden;
} .mixins(@type) when(@type=winds){
font-size:;
} p{
.mixins(baidu);
}

  编译后:

p {
overflow: hidden;
}

  (2)多条件,用逗号隔开:符合其中之一即可匹配

.mixins(@type) when(@type=baidu),(@type=winds){
overflow:hidden;
} p{
.mixins(baidu);
} h1{
.mixins(winds);
}

  编译后:

p {
overflow: hidden;
}
h1 {
overflow: hidden;
}

  (3)多条件,用 and 隔开:全部符合才匹配

.mixins(@type;@style) when(@type=baidu)and(@style=blue){
overflow:hidden;
} p{
.mixins(baidu;blue);
} h1{
.mixins(baidu;pink);
}

  编译后:

p {
overflow: hidden;
}

(四)递归 

  可以在定义的混合模块自我调用(递归)

  循环输出的例子

.loop(@n;@i:1) when(@i<=@n){
.row-@{i}{
background:url('xxx.jpg') 0 @i*10px no-repeat;
} .loop(@n;(@i+1));
} .bg{
.loop(5);
}

  编译后:

.bg .row-1 {
background: url('xxx.jpg') 0 10px no-repeat;
}
.bg .row-2 {
background: url('xxx.jpg') 0 20px no-repeat;
}
.bg .row-3 {
background: url('xxx.jpg') 0 30px no-repeat;
}
.bg .row-4 {
background: url('xxx.jpg') 0 40px no-repeat;
}
.bg .row-5 {
background: url('xxx.jpg') 0 50px no-repeat;
}

(五)作用域

  作用域跟其他编程语言类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,逐层递增,直到找到为止,否则报错。

@color:#f60;

p{
@color:#333;
background-color:@color;
}

  编译后:

p {
background-color: #333333;
}

(六)命名空间

  为了更好组织 CSS 或者单纯是为了更好的封装,可以添加命名空间

.index{
.mixins(){
font-size:;
}
} p{
.index > .mixins();
}

  编译后:

p {
font-size:;
}

(七)注释

   /*编译后保留css原有注释*/

  // 同时支持双反斜杠,但编译后不会保留在css文件中

(八)导入(import)

  其实就是把样式内嵌到指定的文件中,不会带来额外请求

  (1)嵌入less文件

@import "layout.less";

  (2)嵌入css文件

@import (inline) "base.css";

(八)避免编译

  如果需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法,编译为less文件过程中会出现错误,这时候可以用避免编译来处理。

  要输出这样的值我们可以在字符串前加上一个 ~

  看下出错的例子:

p{
_top:expression(eval(document.documentElement.scrollTop));

  编译过程中报错

  所以需要用到避免编译的语法

p{
_top:~"expression(eval(document.documentElement.scrollTop))";
}

  避免编译也支持字符串插入值

@opacity:50;
p{
opacity:50/100;
filter:~"alpha(opacity=@{opacity})";
}

  编译后:

p {
opacity: 0.5;
filter: alpha(opacity=50);
}

  总结:以上只是less知识中的冰山一角,更多请关注官网 http://www.lesscss.net/article/home.html

  下一章是  less代码跟踪调试  敬请期待

Less开发指南(二)- 基本语法的更多相关文章

  1. Spark Streaming和Kafka整合开发指南(二)

    在本博客的<Spark Streaming和Kafka整合开发指南(一)>文章中介绍了如何使用基于Receiver的方法使用Spark Streaming从Kafka中接收数据.本文将介绍 ...

  2. 【转】Polymer API开发指南 (二)(翻译)

    原文转自:http://segmentfault.com/blog/windwhinny/1190000000596258 公开 property 当你公开一个 Polymer 元素的 propert ...

  3. Polymer API开发指南 (二)(翻译)

    公开 property 当你公开一个 Polymer 元素的 property 名字时,就等于把这个 property 设置为公开API了.公开 property 会有如下的特性: 支持声明数据双向绑 ...

  4. ECMALL模板解析机制.MVC架构分析及文件目录说明.二次开发指南手册(转)

    ECMALL模板解析语法与机制 http://www.nowamagic.net/architecture/archt_TemplateSyntaxAndAnalysis.php ECMALL模块开发 ...

  5. 现代前端库开发指南系列(二):使用 webpack 构建一个库

    前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档. 输 ...

  6. ECSHOP二次开发指南

    ECSHOP二次开发指南 发布时间:2013-05-28 12:47:00   来源:   评论:0 点击: 次 [字号:大 中 小] QQ空间新浪微博腾讯微博人人网豆瓣网百度空间百度搜藏开心网复制更 ...

  7. Knockout应用开发指南 第三章:绑定语法(3)

    原文:Knockout应用开发指南 第三章:绑定语法(3) 12   value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input&g ...

  8. Knockout应用开发指南 第三章:绑定语法(2)

    原文:Knockout应用开发指南 第三章:绑定语法(2) 7   click 绑定 目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用 ...

  9. Knockout应用开发指南 第三章:绑定语法(1)

    原文:Knockout应用开发指南 第三章:绑定语法(1) 第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能,才能使代码生效,为了节约篇幅,所有例子均省略了此 ...

  10. App架构师实践指南二之App开发工具

    App架构师实践指南二之App开发工具     1.Android Studio 2.编译调试---条件断点.右键单击断点,在弹出的窗口中输入Condition条件.---日志断点.右键单击断点,在弹 ...

随机推荐

  1. 下拉刷新&上拉加载

    效果演示 核心codehtml <ion-view view-title="学生list"> <ion-content > <ion-refreshe ...

  2. loadrunner配置多台负载机设置

    面对并发量比较大的性能需求,用单台机子进行加压由于本身硬件资源.网络资源等的限制已经不能满足该性能测试条件,这个时候就需要在场景中添加多台负载机来联机做性能测试.添加多台负载机的设置非常简单下面做一个 ...

  3. Hbase环境安装

    说明: (Hbase依赖于HDFS和zookeeper) 参考我的博客: https://www.cnblogs.com/654wangzai321/p/8603498.html https://ww ...

  4. 使用自签名SSL证书配置HTTPS,解决浏览器提示不安全警告

    项目测试过程中需要将应用从HTTP升级到HTTPS,浏览了网上一些帖子,参考<WebLogic11g-单双向SSL配置(以Springside3为例)>一文使用openssl工具来自建CA ...

  5. getAttribute() 与 attr() 的区别

    getAttribute() 和 attr() 都是获取元素属性的方法,只是一种是 JS 写法,一种是 JQ 写法,但其实它们是有区别的. 主要区别 调用 getAttribute() 的主体必须是元 ...

  6. 使用tcpdump 对nginx的access.log 非400的ip进行自动抓包

    #抓取nginx access日志不是 400 的行,找出该ip ,并且启动抓包 #该脚本的执行要放在 crond 里面或者 while循环里面 ################## #网卡名称 ne ...

  7. openwrt下如何只编译linux内核

    答:make target/linux/install V=s (此操作也会将最终镜像打包好,V=s会输出日志) 拓展 清空内核: make target/linux/clean V=s 解压内核: ...

  8. webform button

    https://www.codeproject.com/Questions/412553/differences-between-onClick-and-onClientClick OnClick w ...

  9. tornado之WebSocket

    WebSocket WebSocket是HTML5规范中新提出的客户端-服务器通讯协议,协议本身使用新的ws://URL格式. WebSocket 是独立的.创建在 TCP 上的协议,和 HTTP 的 ...

  10. 爬虫之动态HTML处理(Selenium与PhantomJS )

    Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上, ...