less 前端css利器 工程化、逻辑化 css 文件

less

LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数.

0.使用方式

koala

浏览器引入

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;
}

相关文章

手机端rem布局详解

lib-flexible  git 地址

淘宝经典demo

example less

参考链接:

Less 中文网

LESS « 一种动态样式语言

Less介绍及其与Sass的差异

上一篇:wpf 透明窗体中使用webbrowser


下一篇:Linux环境变量总结