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 可以用更少的代码做更多的事情。

相关文章
|
编译器 C++
C++入门必知
C++入门必知
变分法入门介绍
读完这篇博文你可以了解变分的基本概念,以及使用变分法求解最简泛函的极值。本文没有严密的数学证明,只是感性地对变分法做一个初步了解。
126 0
|
8月前
|
存储 安全 编译器
c++入门
c++入门
90 0
|
8月前
|
存储 安全 编译器
【C++】C++入门(下)
【C++】C++入门(下)
|
8月前
|
Linux 编译器 开发工具
【c++】入门2
【c++】入门2
57 2
|
8月前
|
编译器 C语言 C++
【c++】入门1
【c++】入门1
52 2
|
8月前
|
存储 自然语言处理 编译器
C++入门(1)
C++入门(1)
48 0
|
Linux 编译器 C语言
|
Web App开发 移动开发 IDE
laya入门,这一篇应该够了
laya入门,这一篇应该够了
5192 1
|
Linux Shell C语言
【C++】C++入门(二)
【C++】C++入门(二)
123 0

相关实验场景

更多