less (css预处理)
用法
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预处理)的更多相关文章
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理
第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...
- css预处理语言--让你的css编写更加简单方便
CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...
- CSS预处理语言
CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...
- CSS预处理语言-less 的使用
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Node 或浏览器端. Less的编译处理 作为一 ...
- css预处理scss环境配置
css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...
- 前端面试：css预处理
css预处理定义: 定义了一种新的语言,其基本思想是用一种专门编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 几种预处理语言 sass l ...
- Less：Less（CSS预处理语言）
ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...
- CSS 预处理语言之 less 篇
less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...
随机推荐
- 2017.9.15 postgres使用postgres_fdw实现跨库查询
postgres_fdw的使用参考来自:https://my.oschina.net/Kenyon/blog/214953 postgres跨库查询可以通过dblink或者postgres_fdw来完 ...
- CentOS6.8 编译安装LNMP
思路:根据Linux系统以及公司网站系统的信息,选择合适的安装包进行安装 一.查看系统信息 # uname -a # 查看内核/操作系统/CPU信息 # /etc/issue # 查看操作系统版本 # ...
- Java注解基本介绍
注解(Annotation),又称元数据(MetaData),提供了一种在代码中添加信息的形式化的方法,将元数据和源代码结合在一起. 1. 外部配置文件如XML存在的问题: 代码复杂度较高,需要编写很 ...
- java中替换双引号 Java问题通用解决代码 Java问题通用解决代码
http://blog.csdn.net/newhappy2008/article/details/4785263 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- LinkedHashMap的实现讲解
http://www.cnblogs.com/hubingxu/archive/2012/02/21/2361281.html LinkedHashMap 是HashMap的一个子类,保存了记录的插入 ...
- 【hadoop之翊】——windows 7使用eclipse下hadoop应用开发环境搭建
由于一些缘故,这节内容到如今才写.事实上弄hadoop有一段时间了,能够编写一些小程序了,今天来还是来说说环境的搭建.... 说明一下:这篇文章的步骤是接上一篇的hadoop文章的:http://bl ...
- java web 通配符* ? $1 $2 $3
匹配通配符 * 匹配0-n个字符,但不包括“/”.即,“*”只匹配一级目录或文件中的零个或多个字符. ** 匹配0-n个字符,包括“/”.即,“**”匹配多级目录或文件. ? 匹配0-1个字符,但不包 ...
- Atitit.struts排除url 的设计and 原理 自定义filter 排除特定url
Atitit.struts排除url 的设计and 原理 自定义filter 排除特定url 1.1. 原理流程1 2. Invoke1 3. StrutsX2 1.1. 原理流程 读取struts配 ...
- Trie|如何用字典树实现搜索引擎的关键词提示功能
Trie字典树 Trie字典树又称前缀树,顾名思义,是查询前缀匹配的一种树形数据结构 可以分为插入(创建) 和 查询两部分.参考地址极客时间 下图为插入字符串的过程: 创建完成后,每个字符串最后一个字 ...
- UserScan的处理流程分析
UserScan的处理流程分析 前置说明 Userscan是通过client或cp中发起的scanner操作. 在Scan中通过caching属性来返回能够返回多少条数据.每次进行next时. 通过b ...