目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
什么是less?
是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。可以在多种语言环境中使用,包括浏览器端、桌面客户端、服务端。
如何使用less
可以通过npm在命令行上使用较少的内容,作为浏览器的脚本文件下载或用于各种第三方工具。请参阅使用部分以获取更多详细信息。
安装
在服务器上安装Less的最简单方法是通过node.js包管理器npm ,如下所示:
$ npm install -g less
命令行用法
安装完成后,您可以从命令行调用编译器,如下所示:
$ lessc styles.less
这将输出编译的CSS stdout。要将CSS结果保存到您选择的文件,请使用:
$ lessc styles.less styles.css
要输出缩小,你可以使用CSS clean-css插件。当安装插件时,缩小的CSS输出用--clean-css选项指定:
$ lessc --clean-css styles.less styles.min.css
要查看所有命令行选项,请运行lessc不带参数或查看用法。
使用工具进行编译 监测指定的less文件的变化,如果检测到变化,则自动将less文件输出成相应的css文件。并且大多数工具都提供一定的debug功能。 例如使用koala对less文件进行编译
LESS包含了什么
Less在CSS语法的基础上进行了扩展,主要包含: 变量、嵌套、混合、操作符、函数等等.
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
less和sass你会选哪个来使用?
1、LESS环境较Sass简单
2、有同学说LESS使用较Sass简单
3、相对而言,国内前端团队使用LESS的同学会略多于Sass
4、从功能出发,Sass较LESS略强大一些
1.less的三种引入方式有什么优缺点?
2.你比较喜欢less还是sass?
感谢大家观看
By 计翔于