LESS 用法入门

时间 2019-11-10

标签用法入门繁體版

原文原文链接

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

1、安装和使用 LESScss

　　1.1 安装html

　　使用命令行安装 LESS　java

npm install -g less

　　1.2 使用node

　　less 有多种的使用方法，在这里我向你们介绍最经常使用的俩种方法。程序员

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

去下载一个你要的 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'”。npm

　　第二种就是在命令行中使用：　编程

lessc style.less style.css

　　而后会在项目目录生成 style.css 文件，在 html 中引入便可。若是在编译过程当中出现错误，将会在命令行中提示你。浏览器

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

2、基本用法

　　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’;)。

3、LESS 和 SASS 区别

　　以前写过一篇 sass 的入门，因此确定有很多人会问这俩的区别。在这我说一下个人看法，可能不全。

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

1. 关于less的一些入门用法
2. less入门
3. less快速入门
4. Less 总结——快速入门
5. LESS从入门到精通
6. Less入门与安装(转)
7. vue2 less less-loader 的用法
8. Less 的用法
9. 使用Less爬坑 less引入报错
10. LESS使用方法
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用