用法

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. [转载]Redis后台启动

    FROM: http://www.art-coder.com/2011/12/01/how-to-run-redis-server-as-daemon/ How to run Redis server ...

  2. ECShop后台管理菜单修改

    ECShop中,和后台菜单相关的文件有两个: ·菜单项:admin\includes\inc_menu.php·菜单文本:languages\zh_cn\admin\common.php 所以,要修改 ...

  3. 扩充STL-编写自己的迭代器

    这里的迭代器能够与STL组件共同工作,是对STL的一种扩充.   自定义迭代器必须提供iterator_traits的五种特性,分别是迭代器类型.元素类型.距离类型.指针类型与reference类型. ...

  4. PHP实现查看邮件是否被阅读

      <? //当你在发送邮件时,你或许很想知道该邮件是否被对方已阅读.这里有段非常有趣的代码片段能够显示对方IP地址记录阅读//的实际日期和时间. error_reporting(0); Hea ...

  5. h5+ 管理设备信息

    Device模块管理设备信息,用于获取手机设备的相关信息,如IMEI.IMSI.型号.厂商等.通过plus.device获取设备信息管理对象. 1.属性 1.1.imei: 设备的国际移动设备身份码, ...

  6. Vue 事件修饰符 阻止默认事件

    阻止默认事件: <a v-on:click.prevent="doThat"></a>

  7. Cocos2d-X中创建菜单项

    Cocos2d-X中创建菜单的类: CCMenuItemFont:创建纯文本的菜单项 CCMenuItemAtlasFont:创建带有艺术字体的菜单项 CCMenuItemImage:用图片创建菜单项 ...

  8. jquery ui widget 源代码分析

    jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.wi ...

  9. Android开发过程中遇到的问题集合（—）

    1. Re-installation failed due to different application signatures. 将原来的软件包删除掉,然后又一次安装一次就好了.在命令行上执行:a ...

  10. 初探J2EE

    还记得在技术交流会上八期给我们讲的J2EE,当时就是云里来屋里去.留在自己脑子中的仅仅有两个字"规范",其他的真是一无全部. 可是如今学了后,又在脑子里留下了两个字"规范 ...