注释

缓存式注释/*注释内容*/ 
非缓存式注释//注释内容

变量

@nice-blue: #5B83AD;

@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

混合

1.混合类:

.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

#menu a
{

color: #111;

.bordered;

2.混合带参数:

.border-radius (@radius) {

border-radius: @radius;

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

}}

#header {

.border-radius(4px);

}

我们还可以像这样给参数设置默认值:

.border-radius
(@radius: 5px) {

border-radius:
@radius;

-moz-border-radius:
@radius;

-webkit-border-radius:
@radius;

}

#header {

.border-radius;

}

模式匹配

LESS 提供了通过参数值控制 mixin 行为的功能,让我们先从最简单的例子开始:

.mixin (@s, @color)
{ ... }

.class {

.mixin(@switch,
#888);

}

如果要根据 @switch 的值控制 .mixin 行为,只需按照下面的方法定义 .mixin:

.mixin (dark,
@color) {

color:
darken(@color, 10%);

}

.mixin (light,
@color) {

color:
lighten(@color, 10%);

}

.mixin (@_, @color)
{

display: block;

}

然后调用:

@switch: light;

.class {

.mixin(@switch,
#888);

}

将会得到以下 CSS:

.class {

color: #a2a2a2;

display: block;

}

传给 .mixin 的颜色将执行 lighten 函数,如果 @switch 的值是 dark,那么则会执行 darken 函数输出颜色。

运算:

@test:800px;

body{

width:@test - 200;
//运算会自动同步单位

}

嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式

#header {

color: black;

.navigation {

font-size: 12px;

}

.logo {

width: 300px;

&:hover {
text-decoration: none }

}

}

注意 & 符号的使用
— 如果你想写串联选择器,而不是写后代选择器,就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。

例如:

.bordered {

&.float {

float: left;

}

.top {

margin: 5px;

}

}

会输出:

.bordered.float {

float: left;

}

.bordered .top {

margin: 5px;

}

@arguments 变量

.box-shadow (@x: 0,
@y: 0, @blur: 1px, @color: #000) {

box-shadow:
@arguments;

-moz-box-shadow:
@arguments;

-webkit-box-shadow:
@arguments;

}

.box-shadow(2px, 5px);

将会输出:

box-shadow: 2px 5px
1px #000;

-moz-box-shadow: 2px
5px 1px #000;

-webkit-box-shadow:
2px 5px 1px #000;

避免编译

~"样式" 可用单引号或双引号

有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。

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

.class {

filter:
~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

}

这叫作“避免编译”,输出结果为:

.class {

filter:
ms:alwaysHasItsOwnSyntax.For.Stuff();

}

作用域

LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止。

@var: red;

#page {

@var: white;

#header {

color: @var; // white

}

}

#footer {

color: @var; // red

}

!important关键字

调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important:

.mixin (@a: 0) {

border: @a;

boxer: @a;

}

.unimportant {

.mixin(1);

}

.important {

.mixin(2) !important;

}

编译成:

.unimportant {

border: 1;

boxer: 1;

}

.important {

border: 2 !important;

boxer: 2 !important;

}

LESS速查的更多相关文章

  1. 常用的14种HTTP状态码速查手册

    分类 1xx \> Information(信息) // 接收的请求正在处理 2xx \> Success(成功) // 请求正常处理完毕 3xx \> Redirection(重定 ...

  2. jQuery 常用速查

    jQuery 速查 基础 $("css 选择器") 选择元素,创建jquery对象 $("html字符串") 创建jquery对象 $(callback) $( ...

  3. 简明 Git 命令速查表(中文版)

    原文引用地址:https://github.com/flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md在Github上 ...

  4. 《zw版·Halcon-delphi系列原创教程》 zw版-Halcon常用函数Top100中文速查手册

    <zw版·Halcon-delphi系列原创教程> zw版-Halcon常用函数Top100中文速查手册 Halcon函数库非常庞大,v11版有1900多个算子(函数). 这个Top版,对 ...

  5. .htaccess下Flags速查表

    Flags是可选参数,当有多个标志同时出现时,彼此间以逗号分隔. 速查表: RewirteRule 标记 含义 描述 R Redirect 发出一个HTTP重定向 F Forbidden 禁止对URL ...

  6. IL指令速查

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  7. Linux命令速查手册,超详细Linux命令教程

    一.常用命令速查 ls cd pwd cat more less tail head cp scp mv mkdir rmdir touch rm ps kill top free clear tre ...

  8. 25个有用的和方便的 WordPress 速查手册

    如果你是 WordPress 开发人员,下载一些方便的 WordPress 备忘单可以在你需要的时候快速查找.下面这个列表,我们已经列出了25个有用的和方便的 WordPress 速查手册,赶紧收藏吧 ...

  9. R之data.table速查手册

    R语言data.table速查手册 介绍 R中的data.table包提供了一个data.frame的高级版本,让你的程序做数据整型的运算速度大大的增加.data.table已经在金融,基因工程学等领 ...

  10. HTML速查列表

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. ng-cordova 手机拍照或从相册选择图片

    1.需求描述 实现一个调用摄像头拍照,或者直接打开本地图库选择照片,然后替换App中图片的功能 2.准备 1) 安装ng-cordova 进入到ionic工程目录,使用bower工具安装, bower ...

  2. 如何排查sharepoint2010用户配置文件同步服务启动问题

    用户配置文件同步服务与 Microsoft Forefront Identity Manager (FIM) 交互,以与外部系统(如目录服务和业务系统)同步配置文件信息.启用用户配置文件同步服务时,将 ...

  3. filezilla sftp 文件和linux 文件不同步的问题

    删除掉以前的链接,重新建立链接就好了

  4. yii create url (一)

    1.$this->redirect这里的$this是当前的controller.可能是应用程序的也 可能是模块下的 这里仅将解一下第一个参能是url,当url是一个字符串时,它会自己动跳转 如$ ...

  5. Android studio打开项目时出现 gradle download 无反应

    在使用android studio 新建 项目的时候,会发现一直无法下载 gradle程序一直卡住不动,原因是被墙了. 解决方法: 到gradle官网下载离线包,解压后将bin路径加入Path环境变量 ...

  6. Android中TextView添加删除线

    项目中的需求~~~~ 商城中物品的一个本身价格,还有一个就是优惠价格...需要用到一个删除线. public class TestActivity extends Activity { private ...

  7. 全面理解JavaScript中的闭包的含义及用法

    1.什么是闭包 闭包:闭包就是能够读取其他函数内部变量的函数;闭包简单理解成“定义在一个函数内部的函数”. 闭包的形式:即内部函数能够使用它所在级别的外部函数的参数,属性或者内部函数等,并且能在包含它 ...

  8. pentaho cde popup弹出框口

    弹出窗口在pentaho cde里面相对比较容易,不过还是记录一下,以防时间久了,忘记关键参数. 先看一下效果图: 画出自己想要在弹出框展示的图形,把他的HtmlObject设置成弹出窗口,如图: 然 ...

  9. 根据上一行填充本行的空白栏位,SQL处理方式

    我在4年多前,写了一篇Excel处理空白Cell的文章,http://www.cnblogs.com/studyzy/archive/2010/04/07/1706203.html,其实在数据库中也会 ...

  10. 使用国内 maven 镜像 代替国外 mirror

    使用maven的都知道国外的maven下载一个是比较慢,一个是因为被墙,一些jar包无法下载,非常老火. 比如出现类似下面的错误: Unknown host repo.maven.apache.org ...