css less
LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。
官网:
http://lesscss.cn/
node.js安装less
npm install -g less
gulp less使用
var gulp=require("gulp");
var less=require("gulp-less");
gulp.task("testless",function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest("src/css"));
});
//监视文件的变化
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['testless']);
});
如果less有错误,会提示:
Potentially unhandled rejection [2] Unrecognised input. Possibly missing opening
'{' in file F:\nodejs\code\lessLearn\src\css\study.less line no. 15
在命令行中使用
一旦安装完成,就可以在命令行中调用,例如:
lessc styles.less
这样的话编译后的CSS将会输出到stdout中,你可以选择将这个输出重定向到文件中:
lessc styles.less > styles.css
如果你想输出一个压缩后的CSS,只要加到-x
选项即可。如果你想要更NB的压缩,你也可以选择使用YUI CSS压缩器,只要加上--yui-compress
选项即可。
直接运行lessc,不带任何参数将可以看到所有的命令行参数。
less语法
注释
// 单行注释,不会作为最终输出
/*
多行注释,以原生CSS的/*注释....*/形式作为最终输出
*/
2. 变量(Variable)
Less中的变量有以下规则:
- 以@作为变量的起始标识,变量名由字母、数字、_和-组成
- 没有先定义后使用的规定;
- 以最后定义的值为最终值;
- 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接;
- 定义时 "@变量名: 变量值;" 的形式;引用时采用 "@变量名" 或 "@{变量名}" 的形式;
- 存在作用域,局部作用域优先级高于全局作用域。
Less源码:
@color: color;
@dialog: .dialog;
@suffix: fix;
// 空格将被忽略,若要保留空格则需要使用单引号或双引号
@hi: 'hello ';
@dear: there ; .dialog{
// 用于 rule属性部件,必须使用"@{变量名}" 的形式
background-@{color}: #888;
// 用于 rule属性,必须使用"@{变量名}" 的形式
@{color}: blue;
}
// 用于 选择器,必须使用"@{变量名}" 的形式
@{dialog}{
width: 200px;
}
@{dialog}::after{
content: ': @{hi}@{dear}!'; // 用于 字符串拼接,必须使用"@{变量名}" 的形式
}
@h: 1000px;
// 用于 选择器部件,必须使用"@{变量名}" 的形式
.ie-@{suffix}{
@h: 30px; // 存在作用域,局部作用域优先级高于全局作用域。
height: @h; // 用于 属性值,两种形式均可使用
line-height: 30px;
} // 1. 以@作为变量的起始标识,变量名由字母、数字、_和-组成
// 2. 没有先定义后使用的规定;
@dialog-border-color: #666;
@dialog-border-width: 10px;
@dialog-border-width: 1px; // 3. 以最后定义的值为最终值;
最终输出:
.dialog {
background-color: #888;
color: blue;
}
.dialog {
width: 200px;
}
.dialog::after {
content: ': hello there!';
}
.ie-fix {
height: 30px;
line-height: 30px;
}
列表类型
less变量除了支持#FFF,12px,12,test等单值类型外,还支持列表类型,通过内置函数extract通过索引获取列表元素,通过内置函数length获取列表的元素个数
@colors: #FFF, #0F0, #F0F;
.skin{
color: extract(@colors, 0);
height: 12px * length(@colors);
}
(我测试时看到extract没有识别
)
最终输出:
.skin{
color: #FFF;
height: 36px;
}
3. 嵌套(Nested)
Less源码:

.main{
padding: 10px;
> div {
width: 100px;
}
.aside {
width: 200px;
}
}

最终输出:

.main {
padding: 10px;
}
.main > div {
width: 100px;
}
.main .aside {
width: 200px;
}

注意 &
符号的使用 — 如果你想写串联选择器,而不是写后代选择器,就可以用到 &
了。这点对伪类尤其有用如 :hover
和 :focus
。
例如:
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
会输出:
.bordered.float {
例子:
float: left;
}
.bordered .top {
margin: 5px;
}
color: red;
text-decoration: none;
&:hover {
/*有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素,&表示当前选择器的父选择器*/
color: black;
text-decoration: underline;
}
}
&
的高级用法
用在选择器中的&
还可以反转嵌套的顺序并且可以应用到多个类名上。
例如:
.child, .sibling {
.parent & {
color: black;
}
& + & {
color: red;
}
}
输出:
.parent .child,
.parent .sibling {
color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
color: red;
}
&
也可以用在混合中用于指示嵌套这个混合的父选择器。
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
http://lesscss.cn/features/#mixins-feature
"mix-in" properties from existing styles
You can mix-in class selectors and id selectors, e.g.
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
which results in:
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
Notice that when you call the mixin, the parentheses are optional.
// these two statements do the same thing:
.a();
.a;
Not Outputting the Mixin
If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.
.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
outputs
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
Selectors in Mixins
Mixins can contain more than just properties, they can contain selectors too.
For example:
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
Outputs
button:hover {
border: 1px solid red;
}
Namespaces
If you want to mixin properties inside a more complicated selector, you can stack up multiple id's or classes.
#outer {
.inner {
color: red;
}
}
.c {
#outer > .inner;
}
and again both >
and whitespace are optional
// all do the same thing
#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();
One use of this is known as namespacing. You can put your mixins under a id selector and this makes sure it won't conflict with another library.
Example:
#my-library {
.my-mixin() {
color: black;
}
}
// which can be used like this
.class {
#my-library > .my-mixin();
}
浏览器端使用
LESSCSS也可以不经编译,直接在浏览器端使用。
使用方法:
下载LESSCSS的.js文件,例如lesscss-1.4.0.min.js。
在页面中引入.less文件
<link rel="stylesheet/less" href="example.less" />
需要注意rel属性的值是stylesheet/less,而不是stylesheet。
引入第1步下载的.js文件
<script src="lesscss-1.4.0.min.js"></script>
需要特别注意的是,由于浏览器端使用时是使用ajax来拉取.less文件,因此直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下会拉取不到.less文件,导致样式无法生效。
还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css(具体方法请搜索)。或者还有一种更简单的方法,即是直接将.less文件改名为.css文件即可。
参考:
http://lesscss.cn/
http://www.cnblogs.com/fsjohnhuang/p/4187675.html
http://www.1024i.com/demo/less/document.html
css less的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- 1st-code-review summary
每次做code review,先贤谆谆教诲便在耳畔响起: "There are only two hard problems in Computer Science: cache inval ...
- html EL表达式抬头
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:forE ...
- 浅析C++的内存管理
在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/ 静态存储区和常量存储区. 栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清楚的变量的存储区.里面的变量通常是局部变量.函数参 ...
- OneDrive无法正常登录
可能是DNS被污染 手动设置DNS 134.170.108.26 onedrive.live.com134.170.108.152 skyapi.onedrive.live.com
- 【No.1】监控Linux性能25个命令行工具
如果你的Linux服务器突然负载暴增,告警短信快发爆你的手机,如何在最短时间内找出Linux性能问题所在?通过以下命令或者工具可以快速定位 top vmstat lsof tcpdump netsta ...
- SQL代码创建表例子
create table class ( code ) primary Key, name ) ); create table student ( code ) primary Key, name ) ...
- fatal error C1189: #error : WINDOWS.H already included. MFC apps must not #include <windows.h>
给对话框添加类, 报错 CalibrateMFCDlg.h(6) : error C2504: “CDialog”: 未定义基类 等多个错误 加上 #include "afxwin.h&qu ...
- sublime3的安装和注册,和前端利器emmet插件的安装。
1.下载sublime3,在网上搜索sublime3,在官网下载即可. 2.下载后安装,直接下一步下一步即可安装. 3.注册. 在help菜单中,enter license里面输入 —– BEGIN ...
- 【C51】单片机独立按键与矩阵按键
独立按键 首先既然是检测输入,对于当然要用到拉电阻,来检测引脚电平变化变化.51单片机中,除了P0口外,P2,P3,P4都是内置上拉电阻的准双向IO口,一般 的 51 P0引脚都外接了上拉电阻,当然也 ...
- frameset、frame、noframes和iframe的区别
原网站地址:http://nmyun.blog.51cto.com/448726/155268 ■ 框架概念 :所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只需要 <frameset ...