less及编译工具介绍

 

什么是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，若是无效，能够点击此处百度云盘下载。

选择koala的7大理由：

1. 多语言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
2. 实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操做。
3. 编译选项：既可统一设置文件的编译选项，也可单独设置某个文件的编译选项。
4. 强大的文件右键功能：右键文件元素，便可操做打开文件，打开文件目录，打开输出文件目录，设置输出文件目录，编译，删除六大经常使用功能。
5. 错误提示：在编译时若是遇到语法的错误，koala将在右下角弹出错误信息，方便开发者定位代码错误位置。
6. 跨平台：windows、linux、mac都能完美运行。
7. 免费且负责：koala彻底免费，并且做者很负责，有什么问题做者都会及时给予答复，意见什么的能够直接提交给做者，通常在下一个版本就能获得解决。

了解了它的优势以后，咱们来熟悉下它的界面，这个其实也是我选择它的一个缘由。

简洁美观的面板

 

上面四个数字分别对应四个区域：

第一区域：第一个按钮用于添加项目，第二个按钮打开编译文件的错误提示，第三个按钮设置koala，里面能够设置全部文件默认的编译输出方式，须要过滤的文件，界面语言（中文/英文）等。固然这里也包括目前koala的版本号及做者等信息。

第二区域：project区域，能够直接把项目拖进该区域

第三区域：需编译的文件列表，默认如下划线开头的文件不出现列表中，绿色表示动态编译的文件，灰色表示非动态编译。单击相应的文件，出现第四个区 块，设置文件编译的选项。若是你的文件是后添加的那么请点击上面的refresh按钮刷新须要编译的文件，固然也能够经过下面的几个all/less /sass/coffee来过滤本身要编译的文件。

第四区域：设置文件编译的选项，这个区域得选中第三个区域的某个须要编译的文件才会出现。以sass为例，第一个选项表示是否启用动态编译；第二组 表示是否启用这四个功能，我这边为了方便调试因此启用debug info，固然若是你使用compass那就得启用compass；第三组表示输出的css格式，分为四 种：nested，compressed，compact，expanded；最后一个compile按钮能够手动编译。

既然熟悉了界面，咱们就实际使用下吧，步骤走起：

简单的使用步骤

第一步：首先点击咱们第一区域的那个齿轮按钮，设置下默认文件的编译方式，并把界面语言设置为中文。

第二步：添加咱们要编译的项目文件，可经过第一区域的加号那个按钮添加，也能够直接将项目拖到第二个project区域。

第三步：单击咱们须要编译的文件，出现第四区域设置下该文件具体的编译方式，若是没什么特别的，直接用默认设置的就ok，若是不须要动态编译，直接勾掉“即时编译”那个checkbox，其他的按照上面说的操做。

第四步：右键单击须要编译的文件，出现咱们经常使用的几个操做：打开文件，打开文件目录，打开输出文件目录，设置输出文件目录，编译，删除。通常这里咱们须要设置下咱们输出文件的目录。

第五步：若是你的文件既有less，sass还有coffee，那么就最好有必须点击下面的过滤条件，选择你要动态编译的文件，否则一锅煮头都大了。

 

 

2.Codekit(Mac)

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

3.WinLess(Win)

一款LESS编译软件。下载地址http://winless.org/，若是无效，点击这儿百度云盘下载。

winless使用步骤：

a.下载工具 WinLess，而后点击安装.

b.创建一个文件夹，好比 MyLessTest，并在其中创建子文件夹 less 和 css

    MyLessTest
        --less
        --css

c.打开 WinLess，以下图，点击 Add folder 按钮，将刚才创建的 MyLessTest 添加进去（注意：不是添加 less 文件夹，而是它的上层目录 MyLessTest，方便将结果输出到 less 的同级目录 css）

d.WinLess 右侧会出现全部的 less 文件（若是没有出现，请点击“Refresh”按钮进行刷新），以及输出的路径(output file)。

e.选中须要编译的文件，好比 “bootstrap.less”（注意：请不要全选，在这里，其余一些文件只是被 bootstrap.less 引用而已），点击 “Compile” 按钮开始编译。而后，请打开 less 的同级目录 css 查看结果。

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文件便可。

参考地址：http://www.1024i.com/demo/less/

http://www.cnblogs.com/mrhgw/p/4535429.html

做者： 风雨后见彩虹

出处： http://www.cnblogs.com/moqiutao/

声明：若是您以为本文对您的学习有所帮助，请多关注支持与鼓励。

正在看本人博客的这位童鞋，我看你气度不凡，谈吐间隐隐有王者之气，往后必有一番做为！屏幕右下角有“推荐”二字，若是以为对你有帮助，你就顺手把它点了吧。