less-简介|学习笔记

简介: 快速学习 less-简介

开发者学堂课程【移动 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 可以用更少的代码做更多的事情。

相关文章
|
XML 监控 Devops
CUNIT简介
CUNIT简介
468 0
CUNIT简介
|
并行计算 API 调度
TOPI 简介
TOPI 简介
177 0
|
XML 数据格式 开发者
XPATH 简介| 学习笔记
快速学习 XPATH 简介。
XPATH 简介| 学习笔记
|
NoSQL Java Redis
简介|学习笔记
快速学习简介
|
设计模式 Java 数据库连接
10.0简介|学习笔记
快速学习10.0简介
|
缓存 网络架构 开发者
简介1 | 学习笔记
快速学习简介1
|
监控 网络协议 Java
简介2 | 学习笔记
快速学习简介2
|
索引 容器
NSIndexSet 简介
NSIndexSet (以及它的可修改子类, NSMutableIndexSet) 是一个排好序的,无重复元素的整数集合。它看上去有点像 支持离散整数的 NSRange .它能用于快速查找特定范围的值的索引,也能用于快速计算交集, 同时,Foundation collection class 提供了很多好用的方法,方便你使用 NSIndexSet.
385 0
NSIndexSet 简介
|
开发框架 算法 Java
类集框架简介|学习笔记
快速学习类集框架简介
109 0
|
存储 数据安全/隐私保护
TrueLicense简介
原文 TrueLicense是一个开源的证书管理引擎,官网 使用场景:当项目交付给客户之后用签名来保证客户不能随意使用项目 默认校验了开始结束时间,可扩展增加mac地址校验等。 其中还有ftp的校验没有尝试,本文详细介绍的是本地校验 license授权机制的原理: 生成密钥对,方法有很多。
8712 0