CSS预处理器实践:Less安装

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控制面板:

启动NodeJs命令面板

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

$ npm install less

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

$ npm install [email protected]
时间: 2024-10-11 05:54:30

CSS预处理器实践:Less安装的相关文章

关于前端CSS预处理器Sass的小知识!

前面的话 ??"CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提 供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用 定义 ??Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能.Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式

CSS预处理器Sass(Scss)、Less、Stylus

CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如gulp转换成标准的CSS语法,从而在浏览器中运行.个人理解它是标准CSS语法的扩展及增强,能在一定程度上提高编码效率. 三种预处理器的对比: Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持:安装.编译依赖Ruby环境: Stylus早期服务器Node JS项目,在该

css预处理器(sass)

学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条件语句... 学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事. 很自然地,有人就开始为CSS加入编程

前端CSS预处理器Sass

前面的话 ??"CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用 定义 ??Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能.Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表

CSS 预处理器(框架)初探:Sass、LESS 和 Stylus

现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less输出为css文件.推荐使用后者. 最常用的less编译输出css工具:与node.js关联的npm,安装less模块,然后使用less test.less>test.css进行输出. 参考: http://www.cnblogs.com/shaomenghao/p/3984737.html http

css预处理器sass使用教程(多图预警)

css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可变.对于预处理器,广泛使用的有less和sass.在这不做对比,2者大同小异,sass基于Ruby语言编写,所以编译sass文件需要Ruby环境.我们使用sass并不需要过多了解Ruby语言,只需要安装Ruby环境即可,而less则主要是运行在node环境下,功能语法有类似之处.本文主要介绍Ruby

160907、CSS 预处理器-Less

CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护. 所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制.减少冗余代码,提高样式代码的可维护性.这不是锦上添花,而恰恰是雪中送炭. 网上已经有不少对比目前最主流的三个预处理器 Les

css预处理器sass入门学习

SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先安装ruby(ruby安装自行百度),执行下面命令安装: gem install sass 使用 sass就是普通的文本文件,后缀名为.scss.然后让我们用sass的语法写好文件之后,需要编译成.css文件才能供html文件使用(即通过link标签引入html文件),那么我们就可以使用命令行或是g

CSS 预处理器

在程序员眼里,css不像其他程序语言(例如PHP, Javascript等等),有自己的变量.常量.条件语句以及一些编程语法,它只是一行行单纯的属性描述,写起来相当费事,而且代码难以组织和维护.自然的有人开始想,能不能给css像其他程序语言一样,加入一些编程元素,让css能像其他程序语言一样可以做一些预定的处理,就这样,有了"css预处理器(css preprocessor)". 具体什么是css预处理器呢? css预处理器定义了一种新的语言,其基本思想是:用一种专门的编程语言,为cs