如何在组件开发中使用Sass

安装方式

light plugin -a sass

详细说明

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

该插件会将所有的src/css目录下的sass文件编译处理生成同名的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.sass

//sass style
//-----------------------------------
$font-stack:    Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

project.json

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

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

编译结果：

dist/css/index.css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}