less 初探
官方文档
## Less 中文网 http://lesscss.cn/
## Less 官网 http://lesscss.org/
使用
1. Use with Node.js:
npm install -g less
lessc styles.less styles.css
2. browser:
<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>
主要(常用):
变量（Variables）
混合（Mixins）
嵌套（Nesting）
运算（Operations）
导入（Importing）
作用域（Scope）
Maps
Escaping
注释（Comments）
插件：npm install less-plugin-clean-css
//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" >
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识 Less</title>
<style>
@import "./main.min.css"
</style>
<!-- <link href="./main.min.css" rel="stylesheet"> -->
</head>
<body>
<div class="container">1</div>
<div class="container2">
2
<span>haha</span>
</div>
<div class="container3">3</div>
<div class="naim">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ex aspernatur nobis ipsa quia neque ad corporis deleniti,
necessitatibus quam voluptatem est rerum numquam doloribus!
Quo ducimus aperiam accusamus velit sequi!
</div>
</body>
</html>
main.less
@width: 100%;
@height: 100%;
@color: red;
@white: #fff;
@borderH: 1px;
@left: 15px;
@max768: ~"(max-width: 768px)";
@min320: ~"(min-width: 320px)";
.border-radius (@radius:4px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
.bordered {
border-top: dotted 10px black;
border-bottom: solid 2px black;
}
.container{
color: @white;
width: @width;
height: @height;
background: @color;
margin-bottom: 15px;
.bordered();
}
.container2{
width: @width;
height: @height;
background: @white;
margin-bottom: 5px;
span {
font-size: 24px;
color: @color;
&:before {
content: '';
display: inline-block;
width: 6px;
height: 20px;
margin-right: @left;
background: yellow;
}
@media @max768 {
color: blue;
}
@media @min320 {
color: yellow;
}
}
border-top: @borderH+2 solid black;
}
.container3{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
border: 1px solid @color;
.border-radius(10px);
}
