LESS 的介绍
image.png
image.png
Less的安装
image.png
image.png
//全局安装 less
cnpm install -g less
image.png
//查看 less 命令是否可用--查看所有的命令
less --help
//之后退出
q
image.png
image.png
image.png
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
image.png
image.png
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>
- 在控制台中编译 index.less 文件
lessc index.less > index.css
- 之后再刷新浏览器页面
image.png
监视模式
image.png
image.png
other
image.png
image.png
image.png
image.png
http://www.bootcss.com/p/lesscss/#docs LESS 详细语法
