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 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...
随机推荐
- ASP.NET MVC学习---（四）MVC初窥
前面三篇大幅度的介绍了EF框架 这并不是没有道理的 现在使用mvc开发一般都离不开ef 因为它们相结合可以为你带来完美的体验 当然 前面所描述的仅仅是ef框架的冰山一角 它是一门学问很深的功课 如果你 ...
- wp8使用mvvm模式简单例子
mvvm是silverlight/wpf下的mvc升华 通过一个简单的加法计算器例子来说明mvvm是什么 在设计界面完成设计之后,显示简单的布局,如下图: 然后来比较,传统的直接方式,mvc和mvvm ...
- Elasticsearch 的 Update更新
Update更新操作允许ES获得某个指定的文档,可以通过脚本等操作对该文档进行更新.可以把它看成是先删除再索引的原子操作,只是省略了返回的过程,这样即节省了来回传输的网络流量,也避免了中间时间造成的文 ...
- ubuntu用su切换，输入密码提示认证失败解决办法
ubuntu用su切换,输入密码提示认证失败,经查阅原来Ubuntu安装后,root用户默认是被锁定了的,不允许登录,也不允许 su 到 root ,对于桌面用户来说这个可能是为了增强安全性. 终端下 ...
- Sencha Test Futures API 探秘
原文链接:http://blog.csdn.net/lovelyelfpop/article/details/52301249 英文原文:<Inside the Sencha Test Futu ...
- WIN10 当中装BDM驱动
方法: 禁用第三方签名 将插件替换原有的dll 1.参考此篇文档 http://jingyan.baidu.com/article/375c8e19c2b25b25f2a229a3.html ...
- windows远程桌面如果超出最大连接数, 使用命令行mstsc /console登录即可
远程桌面如果超出最大连接数, 使用命令行mstsc /console登录即可. (也可以用 mstsc /admin) 可以在运行里使用mstsc /console /v:IP:远程端口即可强制登录; ...
- 测试用例使用传统excel还是思维导图（Xmind、MindManager等）?
一.使用感言 实习时随便使用了word文档编写测试用例,也没有人带.后来第一份正式测试工作,也没有人带测试,那时跟着大众学用思维导图写测试用例,发现思维导图非常灵活.目前使用xmind. 使用思维导图 ...
- 网页抓取工具Teleport Ultra简介及如何使用
Teleport Ultra是一款专业的离线浏览器,能够快速.准确地从网络抓取数据并保存到本地,实现离线浏览的目的.它可以从Internet的任何地方抓回你想要的任何文件,它可以在你指定的时间自动登录 ...
- UITextView被键盘遮挡的处理
这个应该是一个通用的任务了吧,键盘弹出来的时候,UITextView(或者UITextField)会被遮挡. 解决的办法就不是很能通用了. 1. 如果有UIScrollView做父view的话只需要滚 ...