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; }
相关文章
参考链接：