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 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...
随机推荐
- caffe卷积层代码阅读笔记
卷积的实现思想: 通过im2col将image转为一个matrix,将卷积操作转为矩阵乘法运算 通过调用GEMM完毕运算操作 以下两个图是我在知乎中发现的,"盗"用一下,确实非常好 ...
- H5性能调优
概述 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成首屏指标 基于第二点,首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s),所 ...
- redis基本数据类型及命令
一.key相关命令 redis本质上是key-value数据库.所以key操作适用于redis的任何数据类型缓存. 1.exists key判断是否存在key,存在返回1,不存在返回0 2.del k ...
- 拒绝IP登陆
tail -n 30 /var/log/messages 发现很多IP尝试登陆,直接封禁. 解决方案:1. vi /etc/hosts.allow 添加 sshd:143.63.182.238 [注意 ...
- POJ 2375 Cow Ski Area (强连通分量)
题目地址:POJ 2375 对每一个点向与之相邻并h小于该点的点加有向边. 然后强连通缩点.问题就转化成了最少加几条边使得图为强连通图,取入度为0和出度为0的点数的较大者就可以.注意,当强连通分量仅仅 ...
- spring aop中的propagation（传播属性）的7种配置的意思
1.前言. 在声明式的事务处理中,要配置一个切面,即一组方法,如 <tx:advice id="txAdvice" transaction-manager="t ...
- 无法连接到服务器,用户xxx登陆失败"
无法连接到服务器,用户xxx登陆失败" 该错误产生的原因是由于SQL Server使用了"仅 Windows"的身份验证方式, 因此用户无法使用SQL Server的登录 ...
- 【Lucene】Apache Lucene全文检索引擎架构之构建索引2
上一篇博文中已经对全文检索有了一定的了解,这篇文章主要来总结一下全文检索的第一步:构建索引.其实上一篇博文中的示例程序已经对构建索引写了一段程序了,而且那个程序还是挺完善的.不过从知识点的完整性来考虑 ...
- 为什么返回的数据前面有callback？ ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题
为什么返回的数据前面有callback? 这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...
- MVC| Razor 布局-模板页 | ViewStart.cshtml
来自:http://blog.csdn.net/fanbin168/article/details/49725175 这个图就看明白了 _ViewStart.cshtml 视图文件的作用 _View ...