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 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...
随机推荐
- 数据库字段名称转java字段名称
/** * * @Title: changeToJavaFiled * @Description: TODO(将数据库中带下划线的字段转换为Java常用的驼峰字段) * @param @param f ...
- [转载]SecureCRT 绝佳配色方案, 保护你的眼睛
FROM:http://blog.csdn.net/zklth/article/details/8937905 SecureCRT 绝佳配色方案, 保护你的眼睛 关键词:SecureCRT配色, ...
- [WCF菜鸟]什么是WCF
一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...
- DevExpress控件之GridControl、GridView
GridControl对应标准WinForm里的GridView,相当于是一个控件,里面包含多个GridView也可以放其它的控件 禁止修改gridView1.OptionsBehavior.Edit ...
- OpenCV入门笔记（三） 图片处理
OpenCV中提供了非常多处理图片的强大函数,能够对非常多格式的图片 加特效.有点实现Photoshop里的工具的感觉. 以下先介绍一些简单和常见的特效. 二值化(Image Threshold) 參 ...
- Visual Prolog 的 Web 专家系统 （10）
GENI的核心 -- 推理机(4)求证过程分析 1.GENI知识库结构 专家系统推理机的设计执行,与其知识库结构紧密相关. GENI知识库结构是一棵逻辑推理树. 根节点是animal,即求证的目标. ...
- 企业级分布式存储应用与实战MogileFS、FastDFS
项目实战9—企业级分布式存储应用与实战MogileFS.FastDFS 目录 实战一:企业级分布式存储应用与实战 mogilefs 实现 原理 1.环境准备 2.下载安装,每个机器都一样 3.数据 ...
- MQTT--Mosquitto的配置文件
Mosquitto的配置文件存放在/etc/mosquitto/mosquitto.conf 配置文件具体的配置内容为: # ===================================== ...
- Android_Fragment_Fragment详解
Android_Fragment_Fragment详解 分类: Android基础2013-10-03 08:23 92人阅读 评论(0) 收藏 举报 AndroidFragmentFragmen ...
- android性能优化学习笔记（加快应用程序启动速度：）
一:安卓中应用程序的启动方式有两种: 冷启动:后台没有该应用进程,系统会重新创建一个进程分配给该应用(所以会先创建和初始化Application类,再创建和初始化MainActivity,包括测量,布 ...