【修真院WEB小课堂】less如何使用

1.背景介绍

CSS不是一种编程语言,可以用它开发网页样式,但是没法用它编程,没有自己的变量、简单的逻辑程序、函数及其他编程语法,只是一行行单纯的属性描述,写起来相当费事,而且代码难以组织和维护。

CSS预处理器用一种专门的编程语言,进行样式设计,然后编译成CSS文件,以供项目使用。 CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,使用变量、简单的逻辑程序、函数等在编程语言中的一些基本特性,让CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护。

使用最为普遍的三款CSS预处理器框架分别是 SASS/SCSS(2006)、LESS(2009)和Stylus(2010)。

2.知识剖析

LESS 语法
1 变量

LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。

1
2
3
4
5
@border-color : #b5bcc7;
 
.mythemes tableBorder{
  border : 1px solid @border-color;
}
编译后

1
2
3
.mythemes tableBorder {
  border: 1px solid #b5bcc7;
}

变量是 VALUE(值)级别的复用,可以将相同的值定义成变量统一管理起来。 该特性适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。

LESS 中的变量也有生命周期,也就是 Scope(变量范围,开发人员惯称之为作用域),简单的讲就是局部变量还是全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。

1
2
3
4
5
6
7
8
9
10
11
@width : 20px;
#homeDiv {
  @width : 30px;
  #centerDiv{
      width : @width;// 此处应该取最近定义的变量 width 的值 30px
             }
}
#leftDiv {
    width : @width; // 此处应该取最上面定义的变量 width 的值 20px
 
}
编译后

1
2
3
4
5
6
#homeDiv #centerDiv {
  width: 30px;
}
#leftDiv {
  width: 20px;
}

2 Mixins

Mixins(混入)功能多重继承的一种实现,在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 定义一个样式选择器
  .roundedCorners(@radius:5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
  }
  // 在另外的样式选择器中使用
  #header {
  .roundedCorners;
  }
  #footer {
  .roundedCorners(10px);
  }

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

1
2
3
4
5
6
7
8
9
10
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

Mixins 其实是一种嵌套,它允许将一个类嵌入到另外一个类中使用,被嵌入的类也可以称作变量,简单的讲,Mixins 其实是规则级别的复用。

Mixins 是 LESS 中很重要的特性之一。当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?LESS 采用了命名空间的方法来避免重名问题,在 mixins 的基础上扩展了一下,看下面这样一段代码:

1
2
3
4
#mynamespace {
.home {...}
.user {...}
}

这样我们就定义了一个名为 mynamespace 的命名空间,如果我们要复用 user 这个选择器的时候,我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。

3 嵌套规则

在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写:

1
2
3
4
5
6
7
< div id = "home" >
< div id = "top" >top</ div >
< div id = "center" >
< div id = "left" >left</ div >
< div id = "right" >right</ div >
</ div >
</ div >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#home{
   color : blue;
   width : 600px;
   height : 500px;
   border:outset;
   #top{
        border:outset;
        width : 90%;
   }
   #center{
        border:outset;
        height : 300px;
        width : 90%;
        #left{
          border:outset;
          float : left;
  width : 40%;
        }
        #right{
          border:outset;
          float : left;
  width : 40%;
        }
    }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#home {
  color: blue;
  width: 600px;
  height: 500px;
  border: outset;
}
#home #top {
  border: outset;
  width: 90%;
}
#home #center {
  border: outset;
  height: 300px;
  width: 90%;
}
#home #center #left {
  border: outset;
  float: left;
  width: 40%;
}
#home #center #right {
  border: outset;
  float: left;
  width: 40%;
}

从上面的代码中我们可以看出,LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的,这样使我们的样式表书写更加简洁和更好的可读性。同时,嵌套规则使得对伪元素的操作更为方便。

1
2
3
4
5
6
7
8
a {
  color: red;
  text-decoration: none;
  &:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素
   color: black;
   text-decoration: underline;
  }
  }

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

1
2
3
4
5
6
7
8
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
对于嵌套要特别注意层级过多的问题,嵌套太深导致生成css文件的选择器层级过多,影响选择器匹配速度。
4 运算及函数

在我们的 CSS 中充斥着大量的数值型的 value,比如 color、padding、margin 等,这些数值之间在某些情况下是有着一定关系的,那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢?我们来看这段代码:

1
2
3
4
5
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}

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

1
2
3
.switchColor {
  color: #222222;
}

上面的例子中使用 LESS 的 operation 是 特性,其实简单的讲,就是对数值型的 value(数字、颜色、变量等)进行加减乘除四则运算。

下面是http://lesscss.cn/列出的less函数大类,颜色相关的函数占了大部分,剩下字符、类型判断都是一些基础函数,less的函数功能较弱。

图片来自http://lesscss.cn/functions/截图

5 Comments

适当的注释是保证代码可读性的必要手段,LESS 对注释也提供了支持,主要有两种方式:单行注释和多行注释,这与 JavaScript 中的注释方法一样,我们这里不做详细的说明,只强调一点:LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中,所以如果你的注释是针对样式说明的请使用多行注释。

6 Importing

LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如:

@import “variables.less”;

.less 文件也可以省略后缀名,像这样:

@import “variables”;

引入 CSS 同 LESS 文件一样,只是 .css 后缀名不能省略。


LESS 使用
1 浏览器端

我们可以直接在客户端使用 .less(LESS 源文件),只需要从 http://lesscss.org下载 less.js 文件,然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码:

1
< link rel = "stylesheet/less" type = "text/css" href = "styles.less" >

LESS 源文件的引入方式与标准 CSS 文件引入方式一样:

需要注意的是:在引入 .less 文件时,rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS 源文件一定要在 less.js 引入之前引入,这样才能保证 LESS 源文件正确编译解析。


2 服务器端
LESS 在服务器端的使用主要是借助于 LESS 的编译器,将 LESS 源文件编译生成最终的 CSS 文件,目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS,安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
3 编译成静态CSS文件

通过 LESS 的编译器,将 LESS 文件编译成为 CSS 文件,在 HTML 文章中引入使用。这里要强调的一点,LESS 是完全兼容 CSS 语法的,也就是说,我们可以将标准的 CSS 文件直接改成 .less 格式,LESS 编译器可以完全识别。

3.常见问题

less.js 在 chrome 中运行


1个警告,2个报错


[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

[弃用]在主线程上同步XMLHttpRequest已被弃用,由于它对终端用户体验的不利影响。 如需更多帮助,请查看https://xhr.spec.whatwg.org/。


Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

协议方案仅支持以下跨源请求:http,data,chrome,chrome-extension,https。


Uncaught (in promise) DOMException: Failed to execute 'send' on 'XMLHttpRequest'

(in promise)未捕获DOMException:无法执行'XMLHttpRequest'上的'发送':

4.解决方案

Stack Overflow

less.js的工作原理: 是内部先用Ajax请求less文件(遍历网页上的具有rel=stylesheet/less属性的文件),然后按照自己的语法解析,生成对应的CSS然后加在页面中。


问题原因


解决方案

5.编码实战

6.扩展思考

预处理器比较

再谈 CSS 预处理器

抛开语法,深度剖析CSS预处理器

7.参考文献

参考一 LESS CSS 框架简介

参考二 less中文网

8.更多讨论

问:less怎么编译?

答:它的编译器就是less.js  ,引入之后就可以编译。

less.js的工作原理: 是内部先用Ajax请求less文件(遍历网页上的具有rel=stylesheet/less属性的文件),然后按照自己的语法解析,生成对应的CSS然后加在页面中。

问:less文件可以直接使用?

答:可以在html文件中直接引入,需要设置 rel="stylesheet/less"

We recommend using less in the browser only for development or when you need to dynamically compile less and cannot do it serverside. This is because less is a large javascript file and compiling less before the user can see the page means a delay for the user.

我们推荐在浏览器使用less仅在以下情况:开发者或者在服务器侧不能实现,需要动态编译less时。这是因为less.js 是大型JavaScript文件,在用户看到页面之前编译less意味着对于用户的延迟。

问:less容易上手吗?

答:less的写法形式和css很相似,并没有太多的转换成本,了解基础语法之后就可以上手。



技能树.IT修真院 

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

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

快来与我一起学习吧~邀请链接 点击打开链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值