什么是LESSCSS

LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

语言特性快速预览:

变量:

变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

LESS源码:

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}

编译后的CSS:

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

混合(Mixins)

混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。

LESS源码:

.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
} #header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

编译后的CSS:

#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

LESS源码:

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px
}
}
}
}

编译后的CSS:

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

函数和运算

运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。

LESS源码:

@the-border: 1px;
@base-color: #111;
@red: #842210; #header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}

编译后的CSS:

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

更多说明

更多更详细的语法特性请参见语言文档

快速上手

LESSCSS的使用是很容易的,首先,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。

GUI编译工具

为方便起见,建议初学者使用GUI编译工具来编译.less文件,以下是一些可选GUI编译工具:

  1. koala(Win/Mac/Linux)

    国人开发的LESSCSS/SASS编译工具。下载地址:http://koala-app.com/index-zh.html

  2. Codekit(Mac)

    一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具,含语法检查、图片优化、自动刷新等附加功能。下载地址http://incident57.com/codekit/

  3. WinLess(Win)

    一款LESS编译软件。下载地址http://winless.org/

  4. SimpleLess(Win/Mac/Linux)

    一款LESS编译软件。下载地址http://wearekiss.com/simpless

Node.js库

LESSCSS官方有一款基于Node.js的库,用于编译.less文件。

使用时,首先全局安装less(部分系统下可能需要在前面加上sudo切换为超级管理员权限):

npm install -g less

接下来就可以使用lessc来编译.less文件了:

lessc example/example.less example/example.css

更多选项可以直接运行lessc查看说明。

浏览器端使用

LESSCSS也可以不经编译,直接在浏览器端使用。

使用方法:

  1. 下载LESSCSS的.js文件,例如lesscss-1.4.0.min.js。
  2. 在页面中引入.less文件

    <link rel="stylesheet/less" href="example.less" />

    需要注意rel属性的值是stylesheet/less,而不是stylesheet

  3. 引入第1步下载的.js文件

    <script src="lesscss-1.4.0.min.js"></script>

需要特别注意的是,由于浏览器端使用时是使用ajax来拉取.less文件,因此直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下会拉取不到.less文件,导致样式无法生效。

还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css(具体方法请搜索)。或者还有一种更简单的方法,即是直接将.less文件改名为.css文件即可。

less.js下载

LESS 1.5已经放出稳定版本,支持source map等新特性,欢迎尝鲜。详细变更请见更新日志

如果您需要在IE6、7、8中使用,请先在引入less.js前先引入es5-shim

Less 简介的更多相关文章

  1. ASP.NET Core 1.1 简介

    ASP.NET Core 1.1 于2016年11月16日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强.这个版本包含了多个新的中间件组件.针对Windows的WebListener服 ...

  2. MVVM模式和在WPF中的实现(一)MVVM模式简介

    MVVM模式解析和在WPF中的实现(一) MVVM模式简介 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...

  3. Cassandra简介

    在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了一种非常流行的图形数据库Neo4J的使用方法.而在本文中,我们将对另外一种类型的NoSQL数据库——Cassandra进行简单地介 ...

  4. REST简介

    一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...

  5. Microservice架构模式简介

    在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...

  6. const,static,extern 简介

    const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...

  7. HTTPS简介

    一.简单总结 1.HTTPS概念总结 HTTPS 就是对HTTP进行了TLS或SSL加密. 应用层的HTTP协议通过传输层的TCP协议来传输,HTTPS 在 HTTP和 TCP中间加了一层TLS/SS ...

  8. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  9. Cesium简介以及离线部署运行

    Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库.cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区 ...

  10. 1.Hibernate简介

    1.框架简介: 定义:基于java语言开发的一套ORM框架: 优点:a.方便开发;           b.大大减少代码量;           c.性能稍高(不能与数据库高手相比,较一般数据库使用者 ...

随机推荐

  1. jqueryDateTable.js排序

    {% block js %} <script type="text/javascript"> $('#datatable').dataTable( { "or ...

  2. linux USB HOST之EHCI和OHCI【转】

    转自:http://blog.csdn.net/ljzcom/article/details/8186914 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 2 关键数据结 ...

  3. scrapy模拟知乎登录(无验证码机制)

    ---恢复内容开始--- spiders 文件夹下新建zhihu.py文件(从dos窗口中进入虚拟环境,再进入工程目录之后输入命令 scrapy genspider zhihu www.zhihu.c ...

  4. linux常用命令 查看文件

    Linux常用命令 查看文件 cat命令 cat命令的用途是连接文件或标准打印输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示. 命令格式: cat [ ...

  5. Selenium2+python自动化24-js处理富文本(带iframe)【转载】

    前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的 ...

  6. eclipse出现build path 错误

    右击本项目-build path-config build path-libraries-发现有选项是带错误符号,于是点击edit然后点击alternative jre选择安装了的jre就解决问题了

  7. 微信支付报错:app没有获取微信支付权限

    调试微信支付的时候报错: Array( [return_code] => FAIL [return_msg] => 您没有APP支付权限) 查询了,发现自己将之前的公众号支付的APPID一 ...

  8. Nodejs解决所有跨域请求

    Nodejs解决所有跨域请求 app.use(function(req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); ...

  9. tomcat中reloadable作用

    reloadable作用 reloadable:如果这个属性设为true,tomcat服务器在运行状态下会监视在WEB-INF/classes和WEB-INF/lib目录下class文件的改动,如果监 ...

  10. Docker发布镜像至Docker Hub

    第一步:Docker生成镜像 docker@default:~$ docker images REPOSITORY TAG IMAGE ID CREATED SIZE metal-workbench- ...