开发者学堂课程【移动 Web 前端开发:less-简介】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8480
less-简介
内容介绍
一、什么是 LESSCSS
二、CSS
一、什么是 LESSCSS
LESSCSS 是种动态样式语言, 属于 CSS 预处理语言的一种,它使用类似 CSS 的语法,为 CSS 的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便 CSS 的编写和维护。
编译less文件成css命令:lessc test.less test.css。
LESSCSS 可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。语言特性快速预览:
变量:
变量允许单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候可能只需要修改几行代码就可以了。
二、CSS
CSS (层叠样式表)是一门历史悠久的标记性语言,其实不应该把他归纳为标记性语言,应该是标记性标签,因为他是不需要编译的,css 直接就可以用,js 还要浏览器解析运行,不需要编译同 HTML 一道,被广泛应用于万维网 (World Wide Web)中,也就是网络开发。
HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。
作为一门标记性语言,CSS 的语法相对简单,所见即所得,写个内容就能看见,不需要运行,对使用者的要求较低,相对也能体会到,从CSS过来的作为html入门阶段要求也是比较低的,但同时也带来一些问题:
可能很多人都会写,后台的也会写,所有作为前端专业角度来说,有很多规范在里面,但没有专业学习过的开发人员就可能会对 CSS 了解比较少,写出的代码可能就会没有逻辑,或者杂乱,对比自己以前写的 CSS 代码来说现在写的 CSS 代码更专业。
CSS 需要书写大量看似没有逻辑的代码,而且不方便维护及发展,不利于复用,像一些案例中就会有很多冗余的代码,比如a中经常有 display:block;
说明这个代码已经在 CSS 中用过很多次了,如果在JS中会将使用很多次的东西提升方法或者封装,但 CSS 中没有,所以代码就会看起来非常乱,虽然写代码会按照一些规范,像模块前缀,层级关系等考虑的很多,看起来好一点。
但是对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于CSS无法提升变量,无法提升样式,无法复用,CSS 是一门非程序式语言,没有变量、函数、SCOPE (作用域)等概念,只是一门标记性语言。
所以LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,增强语法,引入了变量,Mixin (混入),运算以及函数等功能,让其编写没有逻辑的语言时赋有了逻辑,大大简化了 CSS 的编写,并且更容易维护,降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以用更少的代码做更多的事情。