初见 Less

1. 什么是 Less

Less 它是一个 css 的预编译器,它可以扩展 css 语言添加功能,比如变量、混合函数以及一些其他的技术,可以让你的 css 更具维护性主题性扩展性

在编程语言里面我们可以定义变量,而 css 它就不能,那么通过 Less,就可以实现给 css 使用这些变量,或者是混合,还是还有这些函数这样的一些技术。

所以说使用 Less 来维护 css 是非常的方便的。

2. 官方网站

那么我们来看一下 Less 的官方网站,那么这里有两个,第一个是英文http://www.lesscss.org/ 。如果同学英文不是太好,那么我通常就会选择 Less 的中文网站进行浏览,那么我们可以看一下 Less 的中文网站。其实就是后缀不一样,后缀改为这个 .net 就可以了 http://www.lesscss.net/ 。大家可以去了解一下,看一下。

3. 与 Less 的第一次碰面

我们来看一段代码,那么这一段代码是定义了一个列表的样式。那么前面是一个容器,里面有个 ul ,还有一个无序列表,那么我们可以来写一下这样的一个代码来进行一个演示。

新建一个项目放到 G 盘下面的 less。这是一个空白的项目,然后新建一个网页文档 index.html 。接下来首先来看一下 html 的结构:

初见 Less

3.1 css 的写法

如果我们要用传统的 css 方式给它定义,那么需要在 head 标签中写一个 style。去掉无序列表这个点,使用一张图片来代替这个刚刚的小的黑点。再给这个列表一个高度,比如说 25 个像素,然后行高也为 25 个像素,然后添加背景图片:

初见 Less

3.2 等效的 less 写法

less 的写法如下:

初见 Less

分析一下这 3 个样式,那么它们都包含什么?

都包含 conten ,对吧?那么我们可不可以只让 conten 写一次?在 Less 中是可以这样来写的。我们可以把 conten 单独提出来。然后将其他内容放到 conten 里面去,这样就是形成了一个父子关系了。其中, ul 它的父级就是 conten。而 li 也是 conten 下面的对吧?我们同样的也可以把它放到 conten 里面去。同样对于 a 也可以把它放到里面去。这样一段代码它和我们上面这样的一段代码它的效果是一样的:

初见 Less

那么我们还可以怎样写呢?还可以把 ul 直接放到外层这样来写,但是这样它在生成子子类的时候,它的选择器就会多一层。这会导致 ul 下面的 li 下面的 a , 就无形的又增加了一些负担,对吧?

初见 Less

4. Less 文件的编译

那么 Less 到底写在哪里?其实它的文件的格式后缀是以 .less 结束的,比如说我们的样式都放在 style 目录下,之前我们将样式写在 style/style.css 文件中,但是学过 Less 之后就可以将样式写在 style/style.less 文件中。

之后我们就通可以通过编译工具,生成和我们上面写的 css 一样的代码。

5. Less 中的注释

在 Less 中有两种注释方式,第一种是以双斜线的这种形式来注释的,这一种注释不会被编译到 css 文件中。而第二种格式,以星号斜线这种格式来包裹的注释,则会被编译到 css 文件中。

6. 总结

以上就是本文介绍的 Less 入门的主要的知识点了,本文主要讲到了:

  1. 什么是 Less?Less 它是 css 的一个预编译器,可以支持一些变量混合函数。
  2. Less 的中文和英文的官方网站。
  3. 第一次使用 Less 写样式。
  4. Less 的编译和两种注释。

大家需要谨记的是 Less 只是给我们提供一种更方便的 css 的这种维护方式,它最后的结果依然是生成 css 才会被浏览器识别。

原文链接:https://juejin.cn/post/7352763168903938102 作者:垂慕容

(0)
上一篇 2024年4月2日 上午11:05
下一篇 2024年4月2日 上午11:15

相关推荐

发表评论

登录后才能评论