时间: 2019-07-06阅读: 383标签: sass

大家好,我是IT修真院郑州分院第05期学员,一枚正直纯洁善良的web程序员。今天给大家分享一下,修真院官网css任务11,如何使用less?

这篇文章主要解答以下几个问题,供前端开发者的新手参考。

1.背景介绍

什么是less

我们先提一下css

CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML
一道,被广泛应用于万维网(World Wide Web)中。HTML
主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。

作为一门标记性语言,CSS
的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS
需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少
CSS 编写经验而很难写出组织良好且易于维护的 CSS
代码,造成这些困难的很大原因源于 CSS
是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。

为了加入一些编程元素,让CSS能像其他程序语言一样可以做一些预定的处理,CSS预处理器应运而生。
CSS预处理器用一种专门的编程语言,进行样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,使用变量、简单的逻辑程序、函数等在编程语言中的一些基本特性,让CSS
更加简洁、适应性更强、可读性更佳,更易于代码的维护。

使用最为普遍的三款CSS预处理器框架分别是 SASS、LESS和Stylus。

1、SASS:最早、最成熟的CSS预处理器,拥有Ruby社区的支持和compass这一最强大的CSS框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。SASS使用.sass扩展名。

2、LESS:受SASS的影响较大,但又使用CSS的语法,更容易上手,在Ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,优点是简单和兼容CSS。LESS影响了SASS演变到SCSS,著名的Twitter
Bootstrap就是采用LESS做底层语言的。LESS使用.less扩展名。

3、Stylus:来自Node.js社区,主要用来给Node项目进行CSS预处理,在node.js社区内有一定支持者,但在广泛意义上人气还完全不如SASS和LESS。Stylus使用.styl扩展名。Stylus功能上更为强壮,和JavaScript联系更加紧密。

LESS是受SASS启发而开发的工具,为什么要开发SASS的替代品?

原因:语法。SASS支持老的缩进式的语法{不带花括号的语法),因此程序员需要学习一种新的语法;LESS能与CSS无缝地紧密结合在一起,能够让开发者从已有CSS文件平滑地过渡到LESS,而不需要像SASS那样将CSS文件转换成SASS格式。

目前受LESS影响,已经进化到了全面兼容CSS的SCSS。Sass 和 SCSS
其实是同一种东西,我们平时都称之为 Sass,SCSS 是 Sass 3引
入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。 不同点:

(1)文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS
是以“.scss”后缀为扩展名.

(2)语法书写方式不同,Sass
是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS
的语法书写和我们的 CSS 语法书写方式非常类似(SCSS 和 CSS
写法无差别)。简单点说,把你现有的“.css”文件直接修改成“.scss”即可使用。

js9905com金沙网站 1

1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?什么是Sass和Less?Sass和Less都属于CSS预处理器,那什么是
CSS 预处理器呢?CSS
预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS
增加了一些编程的特性,将 CSS
作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。

2.知识剖析

2.1如何使用LESS?

页面引入js代码文件解析

我们可以直接在客户端使用 .less(LESS 源文件),只需要从
less.js 文件,然后在我们需要引入 LESS 源文件的
HTML 中加入如下代码,也可以直接引入cdn. 首先引入less代码

link rel=”stylesheet/less” href=”example.less”

script src=””

服务器端编译less

安装完node.js之后,打开Node.js command prompt,通过npm install -d
less命令安装LESS包,然后新建一个demo.less文件,输入lessc demo.less >
test.css之后以后即可编译CSS文件。

使用工具进行编译

监测指定的less文件的变化,如果检测到变化,则自动将less文件输出成相应的css文件。并且大多数工具都提供一定的debug功能。

例如使用koala对less文件进行编译

转化成通俗易懂的话来说就是“用一种专门的编程语言,进行 Web
页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用
”。

3.常见问题

less包含了什么

为什么要使用CSS预处理器?

4.解决方案

Less在CSS语法的基础上进行了扩展,主要包含:
变量、嵌套、混合、操作符、函数等等.

变量(variables)

LESS
允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。我们可以从下面的代码了解变量的使用及作用:

less文件

js9905com金沙网站 2

经过编译生成的 CSS 文件如下:

js9905com金沙网站 3

从上面的代码中我们可以看出,可以将相同的值定义成变量统一管理起来。该特性适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。less
变量以@作为前缀,不能以数字开头, 不能包含特殊字符。

Less中的变量还具有计算功能,如:

less文件 css文件

js9905com金沙网站 4

在Less中的变量实际上就是一个“常量”,因为它们只能被定义一次。

less文件 @dawa:#29b078; @dawa:white; .siwa{ color: @dawa; }

css文件 .siwa { color: #ffffff; }

上面代码很明显说明了后的@dawa覆盖了前面的@dawa。

作为前端开发人员,大家都知道,Js中可以自定义变量,而CSS仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。

Mixins(混入)

如图所示less文件 css文件

js9905com金沙网站 5

从上面的代码我们可以看出:
什么是混入,这个是在bootstrap中经常看到的一个东西。混入可以将定义好的class
A轻松的引 入到classB ,从而简单实现class B继承所有class
A的属性。定义的时候前面要加点。

而在引用之前,这段代码都不会出现在编译文件中,也就是不会生成任何内容。这也是非常重要的一个特性。

混入(Mixin)有一个名词叫“混入参数(Parametric Mixins)”

js9905com金沙网站 6

我们的默认值是原谅绿我们可以改为自己想要的颜色比如红色或者更绿

CSS有具体以下几个缺点:

嵌套规则(Nested Rules)

嵌套可以增强代码的层级关系,我们也可以通过嵌套来实现继承,这样很大程度减少了代码量,代码量看起来更加清晰。

js9905com金沙网站 7

有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素

语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

函数

LESS中的函数 –
映射了JavaScript函数代码,如果你愿意的话,可以操纵属性值。这一块我还没整明白,大家知道less里有函数,可以自己找一下。

js9905com金沙网站 8

LESS
还拥有一些很有趣的特性有助于我们的开发,例如模式匹配、条件表达式、命名空间和作用域,以及
JavaScript 赋值等等。

具体参考:

LESS使用参考1

LESS使用参考2

LESS使用参考3

js9905com金沙网站,可以了解:

值得参考的 10 个 LESS CSS
实例

5.编码实战

6.扩展思考

less和sass选哪个用?

less和sass现状

7.参考文献

参考一:博客园sass的学习笔记

参考二:CSS
预处理语言的模块化实践

参考三:LESS CSS
框架简介

参考四:学会如何使用LESS(一)—-变量和混合

参考五:初步认识
LESS

参考六:less的配置安装及语法使用

参考七:CSS——LESS

8.更多讨论

1、国内互联网前端用LESS的还是SASS的多一些?

前一段看一个微博做了一个粗略的统计,喜欢LESS的同学多于喜欢Sass的同学。

(1)LESS环境较Sass简单

(2)有同学说LESS使用较Sass简单

(3)相对而言,国内前端团队使用LESS的同学会略多于Sass

2、less的三种引入方式有什么优缺点?

页面引入js代码文件解析

优点:不必安装less编译环境,同样可以使用less文件

缺点:在页面上解析代码,效率较低,受机器、网络影响较大
,影响了页面加载速度

服务器端预编译

优点:服务器端预编译,效率高,避免客户端解析延时。

缺点:消耗服务器资源,编译出错的话,你可能要自己写一个处理error的函数,何时编译less文件成为一个问题,每次有客户请求就编译一次less文件显然效率比较低,但是根据less文件的变化来编译又好像没有放在服务器上编译的必要。

使用工具编译

优点:实时编译,更快更方便。

缺点:要一直打开,每天要开始编写时就打开,不能忘。

3、你比较喜欢less还是sass?

你自己使用哪一种,不应该根据国内对哪一种使用的人多来做出发参考,而是哪种更适合自己的团队。

如何使用less?_腾讯视频

ppt链接

视频链接

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

我们下周再见!


技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

我的邀请链接:

这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器,提供 CSS
缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性大大提高了我们的开发效率。

但是,CSS预处理器也不是万金油,CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入,让我们开发工作流中多了一个环节,调试也变得更麻烦了。更大的问题在于,预编译很容易造成后代选择器的滥用。

所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,CSS预处理器有没有解决更大的麻烦。