LESSCSS

  • LESSCSS应需求而生

CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。

  • LESSCSS新特征

LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。LESSCSS是一种动态样式语言,属于css预处理语言的一种,它的使用类似css的语法,它的重要特点是为css赋予了动态语言的特征,如变量、继承、运算、函数等,更方便css的编写和维护。

  • LESSCSS可以在多种语言、环境中使用,包括浏览器端,桌面客户端,服务器端。
  • 变量 LESSCSS变量允许单独定义一系列通用的样式,然后再需要的时候去调用。

  • 混合 可以将一个定义好的css类引入到另一个css中,从而实现继承。

  • 嵌套 可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

  • 函数运算 LESSCSS运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值

  • 编译LESS 如果使用node.js插件进行编译的话,首先全局安装less,在command命令栏输入:” npm install -g less”,如图

然后再相应的文件目录下编译css如图

如果想直接在浏览器中使用,我们需要使用js脚本插件,下载LESSCSS.js文件,然后再界面上引入lesscss文件,注意rel=“stylesheet/less”,如图

在将LESSCSS引入到界面上即可

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。