码迷,mamicode.com
首页 > Web开发 > 详细

CSS预处理器实践:Less安装

时间:2014-11-28 11:37:58      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   使用   sp   

CSS不是一种编程语言。

你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。

很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。

什么是Less

LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。

Mixins,此处我译成了混合,也有很多同行朋友将其译成混入,不管是混合也好,还是混入也罢。其主要意思是将一个定义好的class A引入到另一个class B中,从而简单实现class B继承了class A的所有属性。
Parametric,带参数混合,像函数一样在class A中定义一个参数的默认值、或者参数属性集合,还可以是@arguments蛮量,然后将定义好的class A引入class B中
Nested Rules译成嵌套规则,指的是在一个选择器中嵌套另一个选择器来实现继承。从而减少了代码量,并且增加了代码的可读性。
Operations运算,在CSS中使用加、减、乘、除进行数学运算,主要运用于属性值和颜色的运算,可以轻松实现属性值之间的复杂关系。
Color function颜色功能,颜色的函数运算,颜色会先被转化成HSL色彩空间,然后在通道级别操作。
Namespaces命名空间,将一些变量或者混合模块打包封装,更好的组织CSS和属性集的重复使用;
Scope作用域,先从本地查找变量或者混合模块,如果没有找到的话就会去父级作用域中查找,直到找到为止,这一点和其他程序语言的作域非常的相似;
Javascript evaluation,javascript的表达式,在Less或sass文件中可以使用js的表达式,用来赋值。
——大漠
转自:http://www.cn-sass.com/译文/an-introduction-to-less-and-comparison-to-sass.html

安装

LESS的安装和Sass安装有所不同,他不需要依赖于Ruby环境,就能直接安装使用。不过LESS安装分为两种:客户端和服务器端安装。

客户端安装

  1. 去下载一个你要的less.js脚本;
  2. 创建一个文件来放置你的样式,比如说style.less
  3. 添加下面的代码到你的HTML的<head>中。
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

 请注意<link>rel属性。你需要在属性值后面使用/less,LESS才起作用。你也需要在<link>样式表后面引入<script>。如果你正在使用“HTML5”语法,我无法想像为什么你不会用呢?你可以少去type="text/css"type="text/javascript"

安装LESS有两个细节需要特别强调,往往很多人就是这里出错:
调用LESS样式表时,<link>标签的rel属性一定是stylesheet/less,其中/less不可缺少;
less.js脚本只能放在加载LESS样式的<link>后面,才能生效。
——大漠

服务器端安装

LESS在服务器端的使用主要是借助于LESS的编译器,将LESS源文件编译生成最终的CSS文件,目前常用的方式是利用node的包管理器(npm)安装LESS,安装成功后就可以在Node环境中对LESS文件进行编译。如此一来,LESS在服务器的安装和Sass的安装有点相似,不同之处是他们需依赖的环境不一样,LESS需要的是Node JS环境,而Sass需要的是Ruby环境,为了让大家能更清晰的知道如何在服务器端安装LESS,此处简单的过一下安装过程(本文演示的是在Window7下的安装方法)。

首先到Node Js的官网下载一个适合Windows系统的安装文件.

安装文件下载后,按正常应用程序方法一样安装。安装完成后在开始菜单中启用Node js的Command控制面板:

bubuko.com,布布扣启动NodeJs命令面板

在启动的Node Js的Command控制面板直接输入下面的命令:

$ npm install less

这样就安装完LESS的编译命令,可以在本地正常编译LESS源文件。如果您想下载最新稳定版本的LESS,还可以尝试在Node JS的Command控制面板输入:

$ npm install less@latest

 

CSS预处理器实践:Less安装

标签:style   blog   http   io   ar   color   os   使用   sp   

原文地址:http://www.cnblogs.com/hedgerow/p/4128055.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!