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进行一些简单的开发 但是还不够 哪里不够呢? 为什么现在的程序员喜欢用mvc进行开发 不就是因为它爽吗? 之前介绍的那些特点仅仅是mvc框架的一小部分 只是一 ...
- 为什么我获取不到这个css样式？js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- left menu
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ubuntu12.04 下安装nodejs
liunx里面安装nodejs我也找了非常多文章,貌似对非常多liunx新手来讲不是非常清楚,以下是我结合一些文章,亲自实践得到的安装步骤.同一时候还有大家关心的与seajs紧密相关的spm模块的安装 ...
- IBM Security App Scan 资料整理
转自:http://blog.csdn.net/u013147600/article/details/50002089 这是学习和使用IBM AppScan过程中总结整理的一些资料. 扫描系统操作 ...
- Maven环境下搭建SSH框架之Spring整合Struts2
© 版权声明:本文为博主原创文章,转载请注明出处 1.搭建环境 Struts2:2.5.10 Spring:4.3.8.RELEASE 注意:其他版本在某些特性的使用上可能稍微存在差别 2.准备工作 ...
- jquery的eq()
jQuery 遍历 - eq() 方法 jQuery 遍历参考手册 实例 通过为 index 为 2 的 div 添加适当的类,将其变为蓝色: $("body").find(&qu ...
- Ajax分页功能的实现
电脑换了固态硬盘,准备重装系统,因此打算把项目里一直延用的代码总结出来,防止丢失,以后也方便查阅.Ajax分页已经是非常普遍的技术了,所以也没什么需要特别说明的,直接贴代码: html部分 <! ...
- freemarker 开始时间与当前时间进行比较
<#if startTime?datetime lt .now?datetime>:年月日时分秒比较 <#if startTime?date lt .now?date>:年月日 ...
- JAVA读取文件夹大小的几种方式
(一)单线程递归方式 package com.taobao.test; import java.io.File; public class TotalFileSizeSequential { publ ...