初步认识 LESS_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 08:57:24
Original
1423 people have browsed it

前几天讲过SASS,作为前端开发,想让css编程化,还可以选择LESS。拥有css基础的学员,想要学习LESS和SASS,都是轻而易举的事情。SASS我已经介绍过了,这里我再带大家初步认识一下LESS。

其实LESS跟SASS有很多一样的地方,其最大的特点就是可以将CSS编程化,不再是单纯的描述型语言,而是可以加入很多逻辑的算法在里面。让CSS的编写拥有更大的乐趣,而不再是枯燥无味的重复相同的工作。

LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码,在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了,例如 Twitter 提供的 bootstrap 库就使用了 LESS。总的来说LESS其实还是受SASS的影响进行开发的,但它们俩有一点不同,SASS是用ruby写的,而less是用javascript写的。由于LESS也是属于CSS,用于编写CSS代码,所以LESS延用了CSS的语法,用括号来包含其代码。LESS 可以直接在客户端使用,也可以在服务器端使用。在实际项目开发中,我更推荐使用第三种方式,将 LESS 文件编译生成静态 CSS 文件,并在 HTML 文档中应用。

客户端使用

客户端使用的方法非常简单,直接将LESS的源文件引入网页即可,但是需要引入less.js的编译文件。如下:

这里有两个注意点:

(1)less.js一定要在LESS源文件后面引入,否则无法正确的识别。

(2)LESS的link里面的rel属性值是stylesheet/less,CSS却是stylesheet。

服务器端使用

LESS 在服务器端的使用主要是借助于 LESS 的编译器,将 LESS 源文件编译生成最终的 CSS 文件,目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS,安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

在项目开发初期,我们无论采用客户端还是服务器端的用法,我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中,LESS 提供了一个我们很熟悉的功能—import。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如:

@import “variables.less”;

.less 文件也可以省略后缀名,像这样:

@import “variables”;

引入 CSS 同 LESS 文件一样,只是 .css 后缀名不能省略。

使用编译生成的静态 CSS 文件

我们可以通过 LESS 的编译器,将 LESS 文件编译成为 CSS 文件,在 HTML 文章中引入使用。这里要强调的一点,LESS 是完全兼容 CSS 语法的,也就是说,我们可以将标准的 CSS 文件直接改成 .less 格式,LESS 编译器可以完全识别。

语法上也是非常简单的,与SASS基本类似,只不过SASS可以不需要括号,LESS需要像CSS一样添加括号。语法方面有如下几大特点:

一、变量

变量是一个极其方便的东西,像js一样,变量可以在全局样式中使用,变量使得样式修改起来更加简单。LESS 中的变量和其他编程语言一样,可以实现值的复用,既然是变量,就有局部变量和全局变量之分。局部变量和全局变量的区别,跟js中的局部变量和全局变量的区别是类似的。

二、混入

Mixins(混入)功能对用开发者来说并不陌生,很多动态语言都支持 Mixins(混入)特性,它是多重继承的一种实现,在 LESS 中,混入是指在一个 class 中引入另外一个已经定义的class,就像在当前class中增加一个属性一样。

三、运算

运算功能是CSS所不具备的,但是LESS可以很方便实现运算。

四、函数

LESS也可以像js一样定义函数,通过调用所定义的函数来实现部分功能。

五、嵌套

嵌套跟SASS一样,对于区分模块非常好。

不知您有没有对LESS有一个初步的认识?如果您对LESS感兴趣,不懂也没关系,不要着急,后面我会以视频授课的方式讲解大家所感兴趣的前端知识。粉丝超过1000,我将大量的录制视频课程。希望大家帮忙多多宣传。

如果您对我的文章感兴趣,可以多多关注,每天八点更新一篇文章。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template