LESS 用法入门

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

一、 安装和使用 LESS

  1.1 安装

  使用命令行安装 LESS 

npm install -g less

  1.2 使用网址:yii666.com

  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 代码如下:文章来源地址https://www.yii666.com/article/332395.html

@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 的知识。文章来源地址:https://www.yii666.com/article/332395.html

  2.3 嵌套网址:yii666.com<

  嵌套可用于以与页面的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 标签,第二个标签是第一个标签的两倍宽并且拥有不同的背景色。文章地址https://www.yii666.com/article/332395.html

@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. IasS,CasS,PasS,SasS的区别

    IasS: (Infrastructure-as-a-Service(基础设施即服务))租用的是硬件,服务器,物理机等CasS: (container as a Service) 容器服务租用的是容器,以docker技术为代表PasS:(Platform-as-a-Service(平台即服务))租用的是平台,阿里云,腾讯云等SasS:(Software-as-a-Service(软件即服务))租用的是云服务,比如小

  2. varnish pipe 和pass的区别分析

    这两天在学习varnish,在学到vcl时,不理解pipe和pass的区别以及如何区分加以应用。通过两天的搜索,总算是理清了概念。现在记录在博客上跟大家分享。当 vcl_recv 函数接收到请求时,它要判断如何处理这个请求。有三种情况 :在这里,我就有几个疑惑:在理解这几个问题前,

  3. iass,pass,cass,sass,vm,container

    分布式存储hdfs 大文件,swift 对象存贮。为七牛的CDN系统目前大部分还不是自建的,采用的是整合其它CDN的方式做的。也就是说出了七牛的文件分发使用的是网宿和蓝汛的老牌CDN的分发节点,自身只做技术。 虚拟机和容器不是服务提供商提供的唯一服务。他们通常还会提供防

  4. python的continue和pass的区别

    结果:结论:continue表示跳过后面的程序,重新循环,而pass表示站位,后面的代码(else之前)还是会执行。

  5. AWS re:Invent 2014回顾

    亚马逊在2014年11月11-14日的拉斯维加斯举行了一年一度的re:Invent大会。在今年的大会上,亚马逊一股脑发布和更新了很多服务。现在就由我来带领大家了解一下这些新服务。安全及规范相关AWS Key Management Service该服务可用于管理数据加密秘钥,以及使用硬件设备来保护秘钥。它

  6. Invent 2014回顾

    AWS re:Invent 2014回顾 亚马逊在2014年11月11-14日的拉斯维加斯举行了一年一度的re:Invent大会。在今年的大会上,亚马逊一股脑发布和更新了很多服务。现在就由我来带领大家了解一下这些新服务。安全及规范相关AWS Key Management Service该服务可用于管理数据加密秘钥,以及使用硬件

  7. Iass、Pass、SasS三种云服务区别?

    Iass、Pass、SasS三种云服务区别我们可以把云计算理解成一栋大楼,而这栋楼又可以分为顶楼、中间、低层三大块。那么我们就可以把Iass(基础设施)、Pass(平台)、Sass(软件)理解成这栋楼的三部分。基础设施在最下端,平台在中间,软件在顶端。别的一些“软”的层可以在这些层

  8. 5分钟理解iaas paas saas三种云服务区别

    随着云计算的大热,向我咨询云计算相关问题的童鞋也越来越多,其中最近问的比较多的一个问题便是云计算中的pass是什么意思?整好今天有空,统一给大家解释下pass是什么意思?和Iass、Sass之间有什么区别呢?其实搞懂这个问题也不难,我们可以把云计算理解成一栋大楼,

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png