less使用

2018-03-14 本文已影响42人神秘者007

LESS 的介绍

学习网站：快速入门 | Less.js 中文文档
 LESS « 一种动态样式语言

image.png

Less的安装

参考链接：http://less.bootcss.com/#using-less

image.png

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

image.png

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

image.png

Less的应用

image.png

Example1

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

@color: #4D926F;

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

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

image.png

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

image.png

Example2

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

image.png

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

image.png

编辑文件

index.html

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

image.png

<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

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

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-cd892d-1521021527900)]

*   再在浏览器中访问 lesstest 目录这一次成功了，页面中的文字也有了颜色的变化

image.png

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

混合

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

image.png

然后再编辑 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>

image.png

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

image.png

嵌套规则

image.png

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

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 文件

image.png

刷新浏览器页面

image.png

函数 & 运算

image.png

编辑文件
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>