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

是不是很简单？