less
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数.
0.使用方式
浏览器引入
node 编译
1. 浏览器方式
1.1 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet/less" type="text/css" href="less.less">
</head>
<body>
<header id="header">
<h2>hello h2 </h2>
header
<p> something about header for <a href="https://www.baidu.com">the link</a> </p>
</header>
<footer id="footer"> footer </footer>
<script src="less.js"></script>
</body>
</html>
1.2 less
// LESS // 1.变量 定义一系列通用的样式，然后在需要的时候去调用 ( 比如规模性项目自定义主题 )
// 变量作用于等同 js // @color: #4D926F;
// #header {
// @color: #f00;
// color: @color;
// } // change to
// #header {
// color: #4D926F;
// } // 2.混合 将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。
// 也可以带参数地调用，就像使用函数一样 // .rounded-corners (@radius: 5px) {
// border-radius: @radius;
// -webkit-border-radius: @radius;
// -moz-border-radius: @radius;
// }
// #header {
// .rounded-corners;
// border: 1px solid red;
// }
// #footer {
// .rounded-corners(50px);
// border: 1px solid red;
// } // change to
// #header {
// border-radius: 5px;
// -webkit-border-radius: 5px;
// -moz-border-radius: 5px;
// border: 1px solid red;
// }
// #footer {
// border-radius: 50px;
// -webkit-border-radius: 50px;
// -moz-border-radius: 50px;
// border: 1px solid red;
// } // 3.嵌套 在一个选择器中嵌套另一个选择器来实现继承 // #header {
// h2 {
// font-size: 26px;
// font-weight: bold;
// }
// p { font-size: 12px;
// a { text-decoration: none;
// &:hover { border: 1px solid red; }
// }
// }
// } // change to
// #header h2 {
// font-size: 26px;
// font-weight: bold;
// }
// #header p {
// font-size: 12px;
// }
// #header p a {
// text-decoration: none;
// }
// #header p a:hover {
// border: 1px solid red;
// } // 4. 函数 & 运算 实现属性值和颜色的运算，处理复杂关系 // @the-border: 1px;
// @base-color: #111;
// @red: #842210; // #header {
// margin: 20px;
// width: 50%;
// border: 1px solid red;
// color: @base-color * 3;
// border-left-width: @the-border*10;
// border-right-width: @the-border * 20;
// }
// #footer {
// margin: 10px;
// border: 1px solid red;
// color: @base-color + #003300;
// border-color: desaturate(@red, 10%);
// } // change to
// #header {
// margin: 20px;
// width: 50%;
// border: 1px solid red;
// color: #333333;
// border-left-width: 10px;
// border-right-width: 20px;
// }
// #footer {
// margin: 10px;
// border: 1px solid red;
// color: #114411;
// border-color: #7d2717;
// }
1.2.1 less 监视模式
在URL后面加上'#!watch'
/ 在终端运行less.watch()来启动监视模式
1.2.2 less 常用包装方式
在#bundle中定义一些属性集之后可以重复使用:
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
只需要在 #header a中像这样引入 .button:
#header a {
color: orange;
#bundle > .button;
}
2. node less 文件转 css
2.1 安装 npm install less -g
2.2 转换 lessc less.less css/less.css 如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了
3.扩展 淘宝 rem 方案布局 相关
经典 less 代码
//定义一个变量和一个mixin
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
.px2rem(height, 240);
}
//less翻译结果：
.container {
height: 3.2rem;
}
相关文章
参考链接：