LESS简介

简介: LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

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

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

快速上手

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

GUI编译工具

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

  1. koala(Win/Mac/Linux)

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

  1. Codekit(Mac)

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

  1. WinLess(Win)

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

  1. 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" type="text/css" href="styles.less" />

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

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

<script src="less.js" type="text/javascript"></script>

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

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

提示:

1.务必确保在 less.js 之前加载你的样式表。

2.如果加载多个 .less 样式表文件,每个文件都会被单独编译。因此,一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问 。

在 <script src="less.js"></script> 之前 定义全局的 less 对象就可以为 Less.js 设置参数:

<script> less = {

env: "development",

 async: false,

 fileAsync: false,

 poll: 1000, functions: {},

 dumpLineNumbers: "comments",

relativeUrls: false, rootpath: ":/a.com/" };

</script>

<script src="less.js"></script>

 

相关文章
|
1天前
|
XML 数据格式
XLink 和 XPointer 简介
XLink 和 XPointer 简介
12 5
|
6月前
|
编译器 程序员 C语言
C++系列一: C++简介
C++系列一: C++简介
|
监控 Oracle 关系型数据库
oratop的使用简介
oratop是采用类似top命令的方式实时监控oracle数据库,包括rac和non-rac数据库
116 0
|
并行计算 API 调度
TOPI 简介
TOPI 简介
172 0
|
存储 编解码
H264简介
H.264 原始码流(又称为裸流),是有一个接一个的 NALU 组成的,而它的功能分为两层:视频编码层(VCL, Video Coding Layer)和网络提取层(NAL, Network Abstraction Layer),其中,前者负责有效表示视频数据的内容,而后者则负责格式化数据并提供头信息,以保证数据适合各种信道和存储介质上的传输。
H264简介
|
网络协议 开发工具 Android开发
AndroidDevTools简介
来源:http://www.androiddevtools.cn/ Android SDK在线更新镜像服务器 中国科学院开源协会镜像站地址: IPV4/IPV6: http://mirrors.
2900 0
|
Android开发 API 测试技术
[译] WorkManager 简介
这篇文章是 WorkManager 系列中的第一篇。我们将探讨 WorkManager 的基础知识,如何以及何时使用它,以及幕后发生了什么。然后我们将深入研究更复杂的用例。
737 0
|
数据安全/隐私保护
叶帆密码箱简介
叶帆密码箱一个纯绿色软件,小巧实用,可以保存各种网络账号,银号帐户,Email信息 等等,此外还可以直接打开链接网址,直接通过热键发送登录信息,方便简洁
735 0
|
缓存 Shell 开发工具
antigen简介
在Linux下经常需要进行终端操作,一个好的shell解释器可以帮助我们极大提高工作效率。有些同学可能听说过zshell和oh-my-zsh,前者是一个shell程序,由于功能比较强大,所以叫做z shell,意为终极shell;而后者是一个模板化的zshell配置脚本,通过它我们可以快速配置一个好用的zsh。
1581 0
hcatalog简介和使用
转自:http://blog.csdn.net/lalaguozhe/article/details/9083905 转自:https://yq.aliyun.com/articles/37442
984 0