CSS

CSS 是一套样式语言，用于描述 HTML 的组件样式。

操作元素的 class 和 style 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 bind : 处理它们：只需要通过表达式计算出字符串结果即可.

:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

更多用法可以参考 Vue Class 与 Style 绑定。

示例代码

<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>

<div :class="[activeClass, errorClass]"></div>

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

// pages/home/index.js
Page({
  data() {
     isActive: true,
     hasError: false,
     activeClass: 'active',
     errorClass: 'text-danger',
     activeColor: 'red',
     fontSize: 30
  }
})

CSS 文件

小程序样式，需要统一写入到小程序页面对应的样式文件内。例如 home 页面内，样式统一写在home/index.css 文件内。

--home
  |--index.js
  |--index.json
  |--index.css

同时，小程序支持 Less 和 Sass 预处理器，使用方法如下：

--home
  |--index.less

或

--home
  |--index.scss