用法

1. 必须在head内

2. 样式文件必须先加载

<head>

<meta charset='utf-8'>

<link rel="stylesheet/less" type="text/css" href="style.less" />

<script src="less.js"></script>

</head>

变量

普通用法：

@nice-blue:#555;

#header { color: @nice-blue; }

用变量名定义变量：

@fnord: "I am fnord.";

@var: 'fnord';

content: @@var;

变量只能定义一次

混合

定义一些通用的属性为一个class，然后在另一个class中去调用（id同理）

普通用法：

.bordered {

border-top: dotted 1px black;

}

#menu a{

color:#111;

.bordered;

}

带参数混合：或设置默认值 .bordered(@color:#f00){...}

.bordered(@color) {

border-top: dotted 1px black;

}

#menu a{

color:#111;

.bordered(blue);

}

@arguments 变量：包含了所有传递进来的参数

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

box-shadow:@arguments;

}

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

输出：

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

模式匹配

根据不同的参数和值

.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;

}

根据表达式

全部比较运算有   >  >=  =  =<  <

除去关键字true以外的值都被视示布尔假

所有条件用逗号进行分隔：.mixin (@a) when (@a > 10), (@a < -10) { ... }

.mixin (@a) when (lightness(@a) >= 50%) {

background-color: black;

}

.mixin (@a) when (lightness(@a) < 50%) {

background-color: white;

}

.mixin (@a) {

color: @a;

}

.class1 { .mixin(#ddd) }

.class2 { .mixin(#555) }

得到的css是：

.class1 {

background-color: black;

color: #ddd;

}

.class2 {

background-color: white;

color: #555;

}

根据值的类型

例如，.mixin (@a, @b: 0) when (isnumber(@b)) { ... }

常见的检测函数：iscolor、isnumber、isstring、iskeyword、isurl

判断一个值是纯数字，还是某个单位量：ispixel、ispercentage、isem

使用and / not关键字：与、或条件

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

.mixin (@b) when not (@b > 0) { ... }

嵌套

#header        { color: black;

.navigation  { font-size: 12px }

.logo        { width: 300px;

&:hover    { text-decoration: none } //&是串联选择器，相当于 .logo:hover{...}

}

}

运算

使用变量

@base: 5%;

@filler: @base * 2;

变量和变量的运算

@other: @base + @filler;

颜色：除法、加法

color: #888 / 4;

background-color: @base-color + #111;

尺寸：乘法、加法 （可以使用括号）

@var: 1px + 5;

width:(@var+5)*2;

穿插在复合属性中

border:(@width*2) solid black;


 

color函数

lighten(@color, 10%);

darken(@color, 10%);

saturate(@color, 10%);

desaturate(@color, 10%);

fadein(@color, 10%);

fadeout(@color, 10%);

fade(@color, 50%);

spin(@color, 10);

spin(@color, -10);

mix(@color1, @color2)

hue(@color);

lightness(@color);

@new: hsl(hue(@old), 45%, 90%); //@new 将会保持 @old的 色调, 但是具有不同的饱和度和亮度.

Math函数

round

ceil

floor

percentage

其他点

命名空间

1.定义一些属性集，打包在bundle中

#bundle {

.button () {

display: block;

&:hover {
background-color: white }

}

.tab { ... }

.citation { ... }

}

2.这样引入使用

#header a{

color:orange;

#bundle > .button;

}

作用域

@var: red;

#page {

@var: white;

#header {

color: @var; // white

}

}

#footer {

color: @var; // red

}

注释

/* hello,comment! */

// hi,comment!

但是，双斜线的注释在编译的过程中会被过滤掉

Importing

@import "lib.less";

@import "lib";//可以省略.less后缀

@import "lib.css";//less不会对它进行处理

字符串中插入变量：@{varName}

@base-url: "//abc.com";

background-image: url("@{base-url}/images/bg.png");

避免编译：在字符串前加上一个 ~

.class{

filter:
~"ms:always.say";

}

使用js表达式：在字符串前后加上一个反引号

@var: `"hello".toUpperCase()
+ '!'`;

@height: `document.body.clientHeight`;

@color: color(`window.colors.baseColor`);

;

less (css预处理)的更多相关文章

  1. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  2. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  3. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  4. css预处理语言--让你的css编写更加简单方便

    CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...

  5. CSS预处理语言

    CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...

  6. CSS预处理语言-less 的使用

    Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Node 或浏览器端. Less的编译处理 作为一 ...

  7. css预处理scss环境配置

    css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...

  8. 前端面试：css预处理

    css预处理定义: 定义了一种新的语言,其基本思想是用一种专门编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 几种预处理语言 sass l ...

  9. Less：Less（CSS预处理语言）

    ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...

  10. CSS 预处理语言之 less 篇

    less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...

随机推荐

  1. rsync数据同步工具的配置

    rsync数据同步工具的配置 1. rsync介绍 1.1.什么是rsync rsync是一款开源的快速的,多功能的,可实现全量及增量的本地或远程数据同步备份的优秀工具.Rsync软件适用于 unix ...

  2. 2017.3.31 spring mvc教程（六）转发、重定向、ajax请求

    学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...

  3. Node.js 使用http客户端向网站请求数据并保存

    app.js代码: // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // 内置文件处理模块 var fs=requir ...

  4. 剑指offer——链表相关问题总结

    首先统一链表的数据结构为: struct ListNode { int val; struct ListNode *next; ListNode(int x) :val(x), next(NULL) ...

  5. centos 6.x Python2.7x安装

    centos 6.x Python2.7x安装 yum install -y gcc gcc-develwget https://www.python.org/ftp/python/2.7.14/Py ...

  6. Transform.eulerAngles 欧拉角

    var eulerAngles : Vector3 Description描述 The rotation as Euler angles in degrees. 旋转作为欧拉角度. The x, y, ...

  7. inspect模块详解

    inspect模块主要提供了四种用处: (1).对是否是模块,框架,函数等进行类型检查. (2).获取源码 (3).获取类或函数的参数的信息 (4).解析堆栈 使用inspect模块可以提供自省功能, ...

  8. debounce 防抖动函数

    http://lodash.think2011.net/debounce _.debounce(func, [wait=0], [options]) 创建一个防抖动函数. 该函数会在 wait 毫秒后 ...

  9. Business Process and SAP ERP

    1. Definition of Organisation - Organizations are created entities within and through which people i ...

  10. 关联查询的resultMap写法示例

    对于自定义对象一般使用association,对于集合一般使用collection. 对于一般的自定义对象 1.使用子查询: <resultMap id="BaseResultMapW ...