如何使用Less?

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>

在线LESS编译器>>

语法:

变量

@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;
}

在不同软件中的使用:

FIS3中使用less

Webstorm实时编译LESS

less在sublime中使用

让Less在Dreamweaver中高亮显示

随机推荐

  1. 深入理解JavaScript系列

    转自http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 深入理解JavaScript系列(1):编写高质量JavaScript代码 ...

  2. Flexigrid去掉列选择

    Flexigrid中会出现列选择的小黑箭头,有时挺讨厌,想去掉.发现没有控制的地方,于是自己加. 在flexigrid.js中增加 在定义中增加 p = $.extend({ //apply defa ...

  3. 【python】Python的单例模式

    原文:http://blog.csdn.net/ghostfromheaven/article/details/7671853 单例模式:保证一个类仅有一个实例,并提供一个访问他的全局访问点. 实现某 ...

  4. WinSock 异步I&sol;O模型-3

    重叠I/O(Overlapped I/O) 在 Winsock 中,重叠 I/O(Overlapped I/O)模型能达到更佳的系统性能,高于之前讲过的三种.重叠模型的基本设计原理便是让应用程序使用一 ...

  5. Android For JNI&lpar;三&rpar;——C的指针,指针变量,指针常见错误,值传递,引用传递,返回多个值

    Android For JNI(三)--C的指针,指针变量,指针常见错误,值传递,引用传递,返回多个值 C中比较难的这一块,大概就是指针了,所以大家还是多翻阅一下资料,当然,如果只是想了解一下,看本篇 ...

  6. 【安卓本卓】Android系统源码篇之(一)源码获取、源码目录结构及源码阅读工具简介

    前言        古人常说,“熟读唐诗三百首,不会作诗也会吟”,说明了大量阅读诗歌名篇对学习作诗有非常大的帮助.做开发也一样,Android源码是全世界最优秀的Android工程师编写的代码,也是A ...

  7. window&period;onload

    window.onload事件 window.onload  = function ()  { JS代码块} 当页面中的DOM节点(元素)都加载完的时候执行的JS代码

  8. 模拟器 Unable to execute simctl install Error 117

    ios 模拟器 Unable to execute '"/usr/bin/xcrun" simctl install  "/Users/tt/PAServer/scrat ...

  9. 源码编译安装mysql5&period;5&period;33

    源码编译安装mysql5.5.33 一.安装cmake编译工具 跨平台编译器 # yum install -y gcc* # yum install -y cmake 解决依赖关系 # yum ins ...

  10. Django项目的ORM操作之--数据模型类创建

    在django项目中,其自带了ORM(Object Relation Mapping)对象关系映射框架,我们在django项目下app的models模块下对类进行操作,通过ORM会将我们对类的操作转化 ...

上一篇:MySQL学习6 - 完整性约束


下一篇:zip文件内存中解压读取