• 技术文章 >web前端 >html教程

    初步认识 LESS_html/css_WEB-ITnose

    2016-06-21 08:57:24原创699
    前几天讲过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,我将大量的录制视频课程。希望大家帮忙多多宣传。

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:初步认识 LESS
    上一篇:HTML中文乱码问题_html/css_WEB-ITnose 下一篇:css 清除浮动的两种常用方式_html/css_WEB-ITnose
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• HTML中meta标签作用及属性总结_html/css_WEB-ITnose• HTML meta refresh 刷新与跳转(重定向)页面_html/css_WEB-ITnose• CSS 浮动_html/css_WEB-ITnose• Codeforces Round #FF (Div. 2)E(线段树成段更新)_html/css_WEB-ITnose• 不容错过的20段CSS代码_html/css_WEB-ITnose
    1/1

    PHP中文网