本文旨在加深对 LESS 的理解和记忆,供自己开发时参考。相信对没有接触过 LESS 的程序员还是有用的,大佬绕路。

一、 安装和使用 LESS

  1.1 安装

  使用命令行安装 LESS 

npm install -g less

  1.2 使用

  less 有多种的使用方法,在这里我向大家介绍最常用的俩种方法。

  第一种是直接在浏览器中使用:

  • 去下载一个你要的 less.js  脚本;
  • 创建一个文件来放置你的样式,比如说style.less
  • 添加下面的代码到你的 HTML<head> 中。 
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

  请注意“link”的“rel”属性。你需要在属性值后面使用“/less”,LESS才起作用。你也需要在“link”样式表后面引入"script"。如果你正在使用“HTML5”语法,我无法想像为什么你不会用呢?你可以少去“type=‘text/css’”和“type='text/javascript'”。

  第二种就是在命令行中使用: 

lessc style.less style.css 

  然后会在项目目录生成 style.css 文件在 html 中引入即可。如果在编译过程中出现错误,将会在命令行中提示你。

  Less 是用 JavaScript 写的,所以需要额外的 Node.js 或者网页浏览器才能够运行它。你可以在你的网站中引入 less.js ,这样在真正的运行环境下它就可以自动编译,但这个过程非常缓慢,所以不建议这么使用。 推荐的方式是提前编译成 CSS 代码并且将一个正常的发展版本备份在线上。当然还有很多可视化的的程序帮助你编译 less 文件,但是在本篇文章中我们将使用 node.js

二、基本用法

  2.1 变量

  Less 的一个主要功能就是可以让你像在其它高级语言中一样声明变量,这样你就可以存储你经常使用的任何类型的值 : 颜色,尺寸,选择器,字体名称和 URL 等。less 的哲学是在可能的情况下重用CSS语法。

  这里,我们声明了两个变量,一个是背景颜色,一个是文本颜色,它们都是十六进制的值。less 代码如下:

@background-color: #ffffff;
@text-color: #1A237E; .box{
width: 500px;
height: 500px;
background-color: @background-color;
}
p{
color: @text-color;
}

  编译后的 css 代码如下: 

.box {
width: 500px;
height: 500px;
background-color: #ffffff;
}
p {
color: #1A237E;
}

  在上面的例子当中,背景颜色是白色,文本颜色是黑色。比方说,现在我们要切换二者的值,也就是黑色的背景和白色的文本,我们只需要修改两个变量的值就可以了,而不是手动的去修改每个值。

  阅读更多有关 Less 变量的内容,请看这里

  2.2 Mixins

  Less 允许我们将已有的 class 和 id 的样式应用到另一个不同的选择器上。 下面这个例子可以清楚地说明这一点。 

#circle{
background-color: #4CAF50;
border-radius: 100%;
} #small-circle{
width: 50px;
height: 50px;
#circle
} #big-circle{
width: 100px;
height: 100px;
#circle
}

  转换成 css 代码如下: 

#circle {
background-color: #4CAF50;
border-radius: 100%;
}
#small-circle {
width: 50px;
height: 50px;
background-color: #4CAF50;
border-radius: 100%;
}
#big-circle {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: 100%;
}

  如果你不想 mixin 也以一种规则的形式出现在 CSS 代码中,那么你可以在它的后面加上括号:

#circle(){
background-color: #4CAF50;
border-radius: 100%;
} #small-circle{
width: 50px;
height: 50px;
#circle
} #big-circle{
width: 100px;
height: 100px;
#circle
}

  此时编译成 CSS : 

#small-circle {
width: 50px;
height: 50px;
background-color: #4CAF50;
border-radius: 100%;
}
#big-circle {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: 100%;
}

  Mixin 另一个比较酷的功能就是它支持传入参数,下面这个例子就为 circle 传入一个指定宽高的参数,默认是 25px。 这将创建一个 25×25的小圆和一个 100×100 的大圆。

#circle(@size: 25px){
background-color: #4CAF50;
border-radius: 100%; width: @size;
height: @size;
} #small-circle{
#circle
} #big-circle{
#circle(100px)
}

  转换成 CSS :

#small-circle {
background-color: #4CAF50;
border-radius: 100%;
width: 25px;
height: 25px;
}
#big-circle {
background-color: #4CAF50;
border-radius: 100%;
width: 100px;
height: 100px;
}

  在 官方文档 了解更多关于 mixin 的知识。

  2.3 嵌套

  嵌套可用于以与页面的HTML结构相匹配的方式构造样式表,同时减少了冲突的机会。下面是一个无序列表的例子。

ul{
background-color: #03A9F4;
padding: 10px;
list-style: none; li{
background-color: #fff;
border-radius: 3px;
margin: 10px 0;
}
}

  编译成 CSS 代码:

ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
background-color: #fff;
border-radius: 3px;
margin: 10px 0;
}  

  就像在其它高级语言中一样, Less 的变量根据范围接受它们的值。如果在指定范围内没有关于变量值的声明, less 会一直往上查找,直至找到离它最近的声明。

  回到 CSS 中来,我们的 li 标签将有白色的文本,如果我们在 ul 标签中声明 @text-color 规则。

@text-color: #000000;

ul{
@text-color: #fff;
background-color: #03A9F4;
padding: 10px;
list-style: none; li{
color: @text-color;
border-radius: 3px;
margin: 10px 0;
}
}

  编译生成的 CSS 代码如下:

ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
color: #ffffff;
border-radius: 3px;
margin: 10px 0;
}

  在 这里 了解更多关于作用域的知识。

  2.4 运算

  你可以对数值和颜色进行基本的数学运算。比如说我们想要两个紧邻的 div 标签,第二个标签是第一个标签的两倍宽并且拥有不同的背景色。

@div-width: 100px;
@color: #03A9F4; div{
height: 50px;
display: inline-block;
} #left{
width: @div-width;
background-color: @color - 100;
} #right{
width: @div-width * 2;
background-color: @color;
}

  编译成 CSS 如下:

div {
height: 50px;
display: inline-block;
}
#left {
width: 100px;
background-color: #004590;
}
#right {
width: 200px;
background-color: #03a9f4;
}

  2.5 函数 

  Less 中有函数,这让它看起来像一门编程语言了,不是吗?

  让我们来看一下 fadeout, 一个降低颜色透明度的函数。 

@var: #004590;

div{
height: 50px;
width: 50px;
background-color: @var; &:hover{
background-color: fadeout(@var, 50%)
}
}

  编译成 CSS 如下所示:

div {
height: 50px;
width: 50px;
background-color: #004590;
}
div:hover {
background-color: rgba(0, 69, 144, 0.5);
}

  通过上述代码,当我们将鼠标悬浮在 div 上时,就可以获取半透明度的动画效果,这比之前自己手动设置要简单的多了。还有很多有用的函数去操纵颜色,检测图像的大小,甚至将资源作为 data-uri 嵌入样式表,在 这里 查看这些函数的列表。

  2.6 作用域(scope)

  作用域是程序中的一个标准,LESS中也是。如果你在你样式表的root级声明一个变量,它在整个文档中都是可以调用的。然而,如果你在一个选择器,比如id或者class中,重新定义了这个变量,那么,它就只能在这个选择器中可用了——当然是重新定义后的新值

@color: #00c; /* 蓝色 */

#header {
@color: #c00; /* 红色 */
border: 1px solid @color; /* 红色边框 */
} #footer {
border: 1px solid @color; /*蓝色边框 */
}

  因为我们在 #header 中重新定义了 color 变量,变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方,如果没有被重新定义,都会保持那个原始的值。

   2.7 注解

  LESS 中允许两种注释写法。标准的CSS注释,/* comment */,是有效的,而且能够通过处理并正确输出。当行注释,// comment,同样可以用但是不能够通过处理也不能被输出。

  2.8 导入

  导入也相当符合标准。标准的 @import ‘classes.less’; 处理的很好。然而,如果你想要导入其它的 LESS 文件,那么文件的扩展名是可选的,所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS 处理的内容,你可以使用 .css 扩展 (比如, @import ‘reset.css’;)。

三、LESS 和 SASS 区别

  之前写过一篇 sass 的入门,所以肯定有不少人会问这俩的区别。在这我说一下我的见解,可能不全。

  LESS和Sass之间的主要区别是他们的实现方式不同,LESS是基于JavaScript运行,所以LESS是在客户端处理。Sass是基于 Ruby 的,是在服务器端处理的。很多开发者不选择LESS是因为LESS输出修改过的CSS到浏览器需要依赖于Javascript引擎,而Javascript引擎需要额外的时间来处理代码。当然在其它方面也是有一点小差别,例如; 在变量上LESS使用@,而Sass使用$,同时还有一些作用域上的差别。输出格式上sass 提供4种输出选项:nested, compact, compressed 和 expanded,然而 less 并没有输出设置................

LESS 用法入门的更多相关文章

  1. 精通awk系列(4):awk用法入门

    回到: Linux系列文章 Shell系列文章 Awk系列文章 awk用法入门 awk 'awk_program' a.txt awk示例: # 输出a.txt中的每一行 awk '{print $0 ...

  2. [转帖]PG语法解剖--基本sql语句用法入门

    PG语法解剖--基本sql语句用法入门 https://www.toutiao.com/i6710897833953722894/ COPY 命令挺好的 需要学习一下. 原创 波波说运维 2019-0 ...

  3. Go之Logrus用法入门

    Go之Logrus用法入门 Logrus是Go (golang)的结构化日志程序,完全兼容标准库的API日志程序. Logrus is a structured logger for Go (gola ...

  4. AWK用法入门详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  5. MongoDB 用法入门(windows)①

    概述 大家对数据库肯定不陌生,肯定也有很多人用过MySQL,但是在用MySQL的时候各种建表,写表之间的关联让人非常头疼. MongoDB也是一种数据库,但是它不是用表,而是用集合来装数据的,我对这种 ...

  6. PriorityQueue优先队列用法入门

    PriorityQueue是队列的一种,它叫做优先队列,该类实现了Queue接口. 之所以叫做优先队列,是因为PriorityQueue实现了Comparator这个比较接口,也就是PriorityQ ...

  7. jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...

  8. Swing-JComboBox用法-入门

    JComboBox是Swing中的下拉菜单控件.它永远只能选中一个项目,然而比单选按钮节省空间.如果使用setEditable设置为true则内部选项的文本可以编辑,因此这种组件被称为组合框.注意,对 ...

  9. Swing-setBorder()用法-入门

    注:本文内容转自:Swing编程边框(Border)的用法总结.内容根据笔者理解稍有整理. 函数说明: public void setBorder(Border border) 设置此组件的边框.Bo ...

随机推荐

  1. 【题解】P4137 Rmq Problem(莫队)

    [题解]P4137 Rmq Problem(莫队) 其实这道题根本就不用离散化! 因为显然有\(mex\)值是\(\le 2\times 10^5\)的,所以对于大于\(2\times 10^5\)的 ...

  2. 15 道 Spring Boot 高频面试题,看完直接当面霸【入门实用】

    前言 本文转自松哥(网名:江南一点雨)的一篇实用入门文章,写的挺好的,希望对各位有所帮助. 什么是面霸?就是在面试中,神挡杀神佛挡杀佛,见招拆招,面到面试官自惭形秽自叹不如!松哥希望本文能成为你面霸路 ...

  3. web前端安全——常见的web攻击方法

    面试题:你所了解的web攻击? 1.xss攻击 2.CSRF攻击 3.网络劫持攻击 4.控制台注入代码 5.钓鱼 6.DDoS攻击 7.SQL注入攻击 8.点击劫持 一.xss攻击 XSS攻击:跨站脚 ...

  4. kubernetes-dashboard部署

    参考资料: kubernetes官方文档 官方GitHub 创建访问用户 解决chrome无法访问dashboard 官方部署方法如下: kubectl apply -f https://raw.gi ...

  5. NSOperationQueue队列依赖相关思考

    添加依赖后,队列中网络请求任务有依赖关系时,任务结束判定以数据返回为准还是以发起请求为准? waitUntilFinished方法容易误解. 依赖关系 // // ViewController.m / ...

  6. OBS Studio 完全开源免费录屏软件

    OBS是Open Broadcaster Software的简称,它是一款永久免费的直播软件.OBS直播软件相比XSplit,占用资源相对较少,对配置要求相对要低一点,相同点就是录制格式MP4,不用再 ...

  7. Java集合概述(上)

    Java集合概述(上) 前言 先说说,为什么要写这么一篇博客(我总是喜欢写原因).因为最近到年底了,正好又要准备面试,所以在做各方面的技术总结.而Java集合是Java非常重要的一部分,自己前前后后也 ...

  8. 利用SSH桥接访问服务器的Docker运行的MySql服务

    前情提要 docker的运用越来广泛,许多IT公司都已经将自己的服务跑在Docker上面.在安全性方面又做了一层防护.比如:跑在Docker上的Mysql不做外网端口映射,只能在linux服务器上或进 ...

  9. .gitignore 文件配置

    git 使用过程中,有许多文件或者文件夹是不希望更新到远程仓库了,因为他们比较占地方,这个时候我们可以利用 .gitignore 文件忽略文件. 按项目进行忽略 .gitignore 文件用于忽略文件 ...

  10. C# 删除指定文件

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;us ...