LESS 入门

LESS 的介绍

Less的安装

//全局安装 less
cnpm install -g less

//查看 less 命令是否可用--查看所有的命令
less --help
//之后退出
q

Less的应用

Example1

在桌面新建一个 test.less 文件并进行编辑

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

在命令行中进入该目录下进行编译

cd Desktop
//这个命令是将 less 文件的源码进行编译，之后输出到命令行中  下图1
lessc test.less
//这个命令是将 less 文件的源码进行编译后在桌面生成一个 ok.css 的文件 下图2 & 3
lessc test.less > ok.css

Example2

桌面新建一个 lesstest 的文件夹，将之前下载的 less.min.js 文件复制到该文件夹下

将该文件夹拖拽至编辑器 sublime 中，新建一个 index.html 和 index.less 文件

编辑文件

index.html

<div class="test">Hello Less</div>

<link rel="stylesheet/less" type="text/css" href="index.less">
<script src="less.min.js" type="text/javascript"></script>
<div class="test">Hello Less</div>

index.less

@color: #4D926F;

.test {
  color: @color;
}

鼠标在 index.html 文件中右键选择在浏览器中打开

需要注意的是这里直接运行的时候并没有任何的效果

image.png
- 而且在控制台也爆出了错误：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
跨源请求只支持协议方案：HTTP、数据、Chrome、Chrome扩展、HTTPS、Chrome扩展资源。
- 报错原因：
image.png

修复上面的报错：将桌面的整个 lesstest 文件夹复制到了 xampp 软件的 \htdocs 文件夹下

image.png
- 之后启动 Apache
image.png
- 再在浏览器中访问 lesstest 目录这一次成功了，页面中的文字也有了颜色的变化
image.png

上面只是非常简单的示例，接下来深入了解

混合

接下来还是在 sublime 中编辑桌面上的 lesstest 文件夹中的文件，把文件中之前写的代码都给注释掉

编辑 index.less 文件

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}   
#footer {
  .rounded-corners(10px);
}
div{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 20px;
}

编辑 index.html 文件

<link rel="stylesheet/less" type="text/css" href="index.less">
<script src="less.min.js" type="text/javascript"></script>
<!-- <div class="test">Hello Less</div> -->
<div id="header">Hello Less--HEADER</div>
<div class="rounded-corners">Hello Less</div>
<div id="footer">Hello Less--FOOTER</div>

之后这里不再将文件夹放置到 htdocs 文件夹中，这次选择直接在命令行中将 index.less 文件编译成 css 文件

ls
lessc index.less > index.css

然后再编辑 index.html

<link rel="stylesheet" type="text/css" href="index.css">
<div id="header">Hello Less--HEADER</div>
<div class="rounded-corners">Hello Less</div>
<div id="footer">Hello Less--FOOTER</div>

之后再在浏览器中打开页面

嵌套规则

编辑文件，把文件中之前写的代码都给注释掉

index.less

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

index.html

<link rel="stylesheet" type="text/css" href="index.css">
<div id="header">
    <h1>SXC</h1>
    <p>
        you are very <a href="">happy</a>
    </p>
</div>

之后再在命令行中编译 index.less 文件

lessc index.less > index.css

查看 index.css 文件

刷新浏览器页面

函数 & 运算

编辑文件
index.less

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}
div{
    width: 100px;
    height: 100px;
    background: orange;
    margin: 20px;
    border: 1px solid red;
}

index.html 这里使用第二次的示例代码，将其解注释，将第三次修改的给注释掉

<link rel="stylesheet" type="text/css" href="index.css">
<div id="header">Hello Less--HEADER</div>
<div class="rounded-corners">Hello Less</div>
<div id="footer">Hello Less--FOOTER</div>