1. CSS3
CSS3 有很多特性，今天我要讲一个特性，就是 CSS3 中的变量。
在以往的 CSS 当中，我们定义颜色的时候，需要直接写 #ffffff 这样的格式，如果要定义的地方特别多，就会发现改风格非常的麻烦，大量的颜色值需要改，挨个调，两个字：心累。
有没有什么好方法？我们定义一些颜色，页面的控件都使用我们定义好的颜色？我只需要修改一处，全局都自动修改。
可以的， CSS3 就提供这种特性。
<style>
/* 定义全局的颜色变量 */
:root {
--dark: #111;
--light: #eee;
}
/* 使用颜色 */
body { background: var(--dark); color: var(--light); }
.card { background: var(--dark); }
</style>就是这么简单，在 Xiuno BBS 开发插件的时候，如果 class 无法满足需求，建议使用这种变量的方式定义自己的控件和页面。
2. SASS
一般说来，开发 Xiuno BBS 4.0 插件，用 CSS3 的 var() 就足够解决问题了。
但是如果要定义自己的整套模板风格，就需要了解下强大的 SASS 了。
SASS 是一个命令行的 CSS 制作工具，它跟 CSS3 类似，可以先定义一些变量颜色，定义的语法：
$white: #eee;
$red: #ee0000;
$green: #00ee00;
$blue: #0000ee;
然后根据变量颜色计算出其他颜色，比如：
lighten($red, 10%) 亮度提高 10%
darken($red, 10%) 亮度降低 10%
rgba($white, 0.5) 透明度一半（这个可以接受 #ffffff 格式哦）
需要简单的安装一下 nodejs 和 nodesass：
安装一下 nodejs ： https://nodejs.org/zh-cn/" target="_blank" title="https://nodejs.org/zh-cn/" style="background-color: rgb(255, 255, 255);">https://nodejs.org/zh-cn/
命令行安装 node-sass： npm install node-sass -g
接下来，就可以把这些编译成可以使用的 CSS 了。
比如新建文件：1.scss
$white: #eee;
$red: #ee0000;
$green: #00ee00;
$blue: #0000ee;
body { background: $green; }
.card { background: rgba($white,0.5); }编译一下：
node-sass 1.scss 1.css
打开 1.css
body { background: #00ee00; }
.card { background: rgba(238, 238, 238, 0.5); }是不是很简单？
三、Xiuno BBS 4.0 的风格修改。
Xiuno BBS 4.0 完全采用 Bootstrap 4.0 + SASS 来构建自己的风格。
来看看 Bootstrap 4.0 的 scss 文件，在 Xiuno BBS 4.0 的 view/bootstrap/scss/ 目录下：
生成的文件会自动覆盖到 view/css/bootstrap.css bootstrap-bbs.css， CTRL+F5 就可以看到效果了！
其实一共就两步，
第一步，修改 view/bootstrap/scss/_variables.scss
第二步：执行 view/bootstrap/auto.cmd
是不是很简单？
tenyet