LESS是动态样式语言,赋予CSS动态语言的特性,如变量、继承、运算、函数,使得CSS更方便编写与维护。>>官网
less
@color:#ff0000;
body{color:@color;}
编译后
bosy{color:ff0000;}
一:命令行用法:
安装:
npm install -g less
解析styles.less
lessc styles.less
解析styles.less到styles.css
lessc styles.less styles.css
注意: 如果文件路径带有中文会编译不成功
二:浏览器端使用:
1、引入rel属性的值是stylesheet/less的.less样式表:
<link rel="stylesheet" href="test.less">
2、下载less脚本,放在自己项目中:
<script src="js/less.js" type="text/javascript"></script>
或引用:
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
语法:
变量
@color:#ff0000;
body{color:@color;}
输出:
body{color:#ff0000;}
混合
.bd{border:1px solid #000;}
.a{.bd}
输出:
.a{border:1px solid #000;}
带参数混合
.box(@height){
height:@height;
line-height:@height;
}
.a{.box(25px);}
输出:
.a {
height: 25px;
line-height: 25px;
}
嵌套:
.box{
.a{color:blue;}
.c{&:hover{color:yellow}}
}
输出:
.box .a{color:blue;}
.box .c:hover{color:yellow;}
命名空间
.box{
.a{color:red;}
} body{
.box > .a;
}
输出:
body {
color: red;
}
作用域
@color:red;
body{
@color:#ffff00;
color:@color;
}
输出:
body {
color: #ffff00;
}
在不同软件中的使用:
随机推荐
-
深入理解JavaScript系列
转自http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 深入理解JavaScript系列(1):编写高质量JavaScript代码 ...
-
Flexigrid去掉列选择
Flexigrid中会出现列选择的小黑箭头,有时挺讨厌,想去掉.发现没有控制的地方,于是自己加. 在flexigrid.js中增加 在定义中增加 p = $.extend({ //apply defa ...
-
【python】Python的单例模式
原文:http://blog.csdn.net/ghostfromheaven/article/details/7671853 单例模式:保证一个类仅有一个实例,并提供一个访问他的全局访问点. 实现某 ...
-
WinSock 异步I/O模型-3
重叠I/O(Overlapped I/O) 在 Winsock 中,重叠 I/O(Overlapped I/O)模型能达到更佳的系统性能,高于之前讲过的三种.重叠模型的基本设计原理便是让应用程序使用一 ...
-
Android For JNI(三)——C的指针,指针变量,指针常见错误,值传递,引用传递,返回多个值
Android For JNI(三)--C的指针,指针变量,指针常见错误,值传递,引用传递,返回多个值 C中比较难的这一块,大概就是指针了,所以大家还是多翻阅一下资料,当然,如果只是想了解一下,看本篇 ...
-
【安卓本卓】Android系统源码篇之(一)源码获取、源码目录结构及源码阅读工具简介
前言 古人常说,“熟读唐诗三百首,不会作诗也会吟”,说明了大量阅读诗歌名篇对学习作诗有非常大的帮助.做开发也一样,Android源码是全世界最优秀的Android工程师编写的代码,也是A ...
-
window.onload
window.onload事件 window.onload = function () { JS代码块} 当页面中的DOM节点(元素)都加载完的时候执行的JS代码
-
模拟器 Unable to execute simctl install Error 117
ios 模拟器 Unable to execute '"/usr/bin/xcrun" simctl install "/Users/tt/PAServer/scrat ...
-
源码编译安装mysql5.5.33
源码编译安装mysql5.5.33 一.安装cmake编译工具 跨平台编译器 # yum install -y gcc* # yum install -y cmake 解决依赖关系 # yum ins ...
-
Django项目的ORM操作之--数据模型类创建
在django项目中,其自带了ORM(Object Relation Mapping)对象关系映射框架,我们在django项目下app的models模块下对类进行操作,通过ORM会将我们对类的操作转化 ...