如何在组件开发中使用Less

安装方式

light plugin -a less

详细说明

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

该插件会将所有的src/css目录下的less文件编译处理生成同名的css文件，所以在src/html/page/index.html文件中引用资源的时候，应该引用同名的css文件。

示例

src/html/page/index.html

<!DOCTYPE html>
<html>
<head>
  <snippet id="header" />
  <!-- build:css css/style.css -->
  <link rel="stylesheet" href="css/index.css" />
  <!-- endbuild -->
  <title>light-less-Just For Fun</title>
</head>
<body>
  <div id="main">
    <view id="light" home="true" />
  </div>
  <snippet id="footer" />
  <script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
  <script type="text/javascript" src="config.js"></script>
  <!-- build:js js/app.js -->
  <!--<script src="vue-components.js"></script>-->
  <!--<script type="text/javascript" src="js/lib/underscore.js"></script>-->
  <!-- inject:view -->
  <!-- endinject -->
  <!-- endbuild -->
  <script type="text/javascript">
    Light.start();
  </script>
</body>
</html>

src/css/index.less

//引用
@import "./style.css"; 
@import "./var.less";
#main{
  width: @content-width;
  height: @content-height;
  text-align:center;
  margin:auto;
}
//变量
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #666;
#header {
  color: @light-blue;
}
//混合(Mixin)
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}
//嵌套
#header {
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    background-color: @light-blue;
    margin:auto;
    padding:30px;
    text-align:center;
  }
}

project.json

{
  "project":"demo",
  "version":"0.0.1",
  "desc":"Just For Fun",
  "type":"light-1.0",
  "plugins":["less"]  
}

打包编译时可以使用指令： light release -e(plugins项配置有less的情况下) 或者 light release -e less

编译结果：

dist/css/index.css

//编译生成后的样式文件
@import "style.css";
#main {
  width: 800px;
  height: 600px;
  text-align: center;
  margin: auto;
}
#header {
  color: #c1e9ff;
}
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
  background-color: #c1e9ff;
  margin: auto;
  padding: 30px;
  text-align: center;
}