如何玩转 CSS3、SASS、Xiuno 4.0 模板风格?

axiuno 27天前 2339

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 无法满足需求,建议使用这种变量的方式定义自己的控件和页面。来看看 Bootstrap 4 自带了哪些变量:


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/

命令行安装 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/ 目录下:

注意这个文件:_variables.scss

这个里面就定义了 BOOTSTRAP 的全局颜色,修改这个文件,然后编译一下就修改整个页面的风格了。

另外,还有一些少量的 BBS 相关的颜色定义在 _bootstrap_bbs.scss

如何编译?进入到命令行,执行 auto.cmd 就可以了:

生成的文件会自动覆盖到 view/css/bootstrap.css bootstrap-bbs.css, CTRL+F5 就可以看到效果了!


其实一共就两步,

第一步,修改 view/bootstrap/scss/_variables.scss

第二步:执行 view/bootstrap/auto.cmd

是不是很简单?


第四步:封装为 Xiuno BBS 4.0 的插件


1. 本地安装一个主题插件,比如 xn_theme_red


2. 新建一个文件夹:plugin/myname_theme_xxx


3. 将 xn_theme_red 中的文件拷贝进去,然后修改以下红色箭头指向的文件:

最关键的,修改 scss 下的 _variables.scss _bootstrap_bbs.scss 文件,然后编译 auto.cmd

打包成 myname_theme_xxx.zip 就是 Xiuno BBS 4.0 插件了,然后就可以去官方提交你的插件了:

http://plugin.xiuno.com/plugin-create.htm



如果觉得 SASS 麻烦,可以直接撸 CSS:

http://bbs.xiuno.com/thread-20050.htm

最新回复 (13)
返回
发新帖
HTTP/1.1 502 Bad Gateway Content-Type: text/html Connection: close Content-Length: 308 Date: Sat, 24 Feb 2018 06:11:33 GMT X-Via: 1.1 localhost.localdomain (random:472160 Fikker/Webcache/3.7.4) 502 Bad Gateway

502 Bad Gateway - Cann't Connect To Upstream Server By SSL Read

Server: localhost.localdomain
Date: 2018-02-24 06:11:33

Fikker/Webcache/3.7.4