Bulma CSS 瓦尔斯
布尔马CSS 宽度 布玛 用于使用 CSS 变量,可以在网站运行时设置为任意值,并为没有 CSS 变量能力的浏览器安装倒置.
这是一个扩展和一种"sass-pre-president-processioner",它试图尽可能少地侵入Bulma,同时使bulma色彩计划中的任意色彩变化自动化,尽可能容易.
有一些设置和配置需要完成,但一旦设置,它的工作就像一个魅力。 读取部分 有什么困难,以了解为什么需要这种设置.
使用量
npm i -S bulma bulma-css-vars
npm i -D sass
node ./node_modules/.bin/bulma-css-vars --init
要使用这个软件包, 你必须使用飞镖执行 sass, the sass 软件包, 版本 1.23 或更高级。 如果你使用网络包装和 sass-loader你必须确保你没有 node-sass 安装或配置 options: { implementation: require('sass') } 联 合 国 sass-loader。 。 。 .
// bulma-css-vars.config.js
import { hsl, rgb } from 'bulma-css-vars'
// color names have to match bulma's $variable-name, without '$'
// values will be used for initial colors and fallback
const appColors = {
black: hsl(0, 0, 4),
'scheme-main': rgb(200, 105, 84),
red: { r: 255, b: 0, g: 0}
primary: '#663423',
blue: 'blue',
}
// reuse variable colors
appColors['text'] = appColors['primary']
export default {
sassEntryFile: './src/style/main-sass-file.sass',
jsOutputFile: './src/bulma-generated/bulma-colors.js',
sassOutputFile: './src/bulma-generated/generated-vars.sass',
cssFallbackOutputFile: './src/bulma-generated/generated-fallbacks.css',
colorDefs: appColors,
globalWebVar: false,
transition: '0.5s ease',
}
您需要配置 bulma-css-vars 来描述您的 sass 设置, 特别是您的 sass 条目文件, 您想要修改的变量, 以及生成的 bulma 文件应放在哪里 .
| 配置密钥 | |
|---|---|
sassEntryFile | 您的 Sass 条目文件 应用程序 - 相对路径表配置文件 |
jsOutputFile | 生成的 js 文件的全名,也可以是 <a-typescript-file>.ts |
sassOutputFile | 生成 sass 文件的全名, 应当包含在您的应用程序样式中 |
cssFallbackOutputFile | 生成的 css 文件的全名, 应当包含在您的 sass app 样式中 (可选) |
colorDefs | 颜色定义,名称必须匹配 bulma 颜色名称(见上文实例) |
globalWebVar | 如果您直接在浏览器中导入 js 文件, 您需要 true,参见 直接网络设置,默认为 false |
transition | 将创建 CSS 过渡 用于所有彩色 CSS 变量的短手字,应该由 [ <duration> [ <timing-function> [ <time-delay> ] ] ] |
有些文件需要设置, 可用 node ./node_modules/.bin/bulma-css-vars --init。 。 。 .
// main.scss
@import './bulma-generated/generated-fallback.css'; // import fallbacks first, so they are overridden
@import './bulma-generated/generated-vars.sass';
@import '../node_modules/bulma-css-vars/bulma-cv-lib';
而不是使用 bulma-cv-lib.sass您也可以使用您喜欢的 bulma 包。 看着里面 bulma-cv-lib.sass 理解更多,特别是导入 functions.sass 在原件之后 functions.sass 已装入.
// package.json
scripts: {
"update-bulma-colors": "bulma-css-vars",
}
剧本 ./node_modules/.bin/bulma-css-vars 修改颜色时必须运行 bulma-css-vars.config.js 它也会更新三个输出文件.
// in-the-web-app.js
import { ColorUpdater } from 'bulma-css-vars'
import { bulmaCssVariablesDefs } from './bulma-generated/bulma-colors'
const updater = new ColorUpdater(bulmaCssVariablesDefs)
// do the update manually
const updated = colorUpdater.getUpdatedVars(colorName, value)
updated.forEach(({ name, value }) =>
document.documentElement.style.setProperty(name, value)
)
// or let it do the updater
colorUpdater.updateVarsInDocument(colorName, value)
您也可以使用类型脚本
// in-the-web-app.ts
import { ColorUpdater } from 'bulma-css-vars'
import { bulmaCssVariablesDefs } from './bulma-generated/bulma-colors'
// the updater do the style change
const colorUpdater = new ColorUpdater(bulmaCssVariablesDefs)
colorUpdater.updateVarsInDocument(colorName, value)
令人惊讶的是,色彩更新器需要了解当前变量,所以 bulmaCssVariablesDefs 从生成的 js 文件必须包含在您的应用程序中 . colorName 必须在 bulma-css-vars.config.js。 。 。 .
洞穴
- 需要节点.js 和 Dart Sass
- 设置的复杂性
有什么困难? 为什么是这个圈套?
问题是 Bulma 严重依赖 sass 预处理,所以如果设置一个颜色变量用于 $primary,此颜色将被修改,用于按键上悬浮 / 聚焦阴影,计算出按键上文本的倒置等.
如果我们输入一个 CSS 变量 var(--my-dynamic-primary-color) 在此, 不仅 sass 失败 , 并且如果您要在运行时更改此颜色, 仍然会保留所有计算出的阴影 .
解决办法——如何运作
首先从此库补丁原始 sass 函数, 例如 darken, (中文(简体) ), lighten,以及 bulma 帮助器的功能,如 findColorInvert。这只能归功于飞镖的力量 sass 软件包,比 node-sass 软件包。 补丁功能可以处理 var(--variablename) 变量,并决定是否将原函数调用,或者是否添加所输入变量中新的、衍生的变量.
譬如说, darken(var(--primary), 10%) 将变成 var(--primary--10--darken),然后向 ccs 样式表添加一个衍生变量.
这个库将这个过程自动化,所以对于每个实际使用和衍生的变量,都会生成一个新的css变量. 为了发挥这一技术的杠杆作用,库然后会编译出cs并获得一个总览,其中哪些衍生变量都在实际使用的样式表中.
这一技术的优点是,只有实际需要的变量才会被生成并添加到样式表上. 缺点是,当您决定在应用程序中添加一个附加变量时,您需要运行此命令 .
从基变量和衍生变量列表中,此库可以创建初始 sass 文件,您应该在 sass 汇编中包含该文件 。 它使用 js 版本计算样式 darken, (中文(简体) ), lighten, (中文(简体) ), findColorInvert举例来说, --primary--10--darken: #532949; 将由 bulma-css-vars 还有,旁边 --primary: #694392;。 。 。 .
您的入学申请中也应包含该课程。 每当您想要更改 bulma 颜色变量时, 例如 : $blue,色彩更新器知道需要调整哪些衍生变量,并允许您更新所有受影响的变量.
这样你就可以继续使用 完整的布玛色彩丰富。 尝试演示并查看按钮的字体在深/ 亮颜色上的变化 !
直接网络设置
如果不使用任何捆绑或网络框架,也可以直接包括burma-css-vars. 你还需要Node.js和sass.
// app.sass
@import './bulma-vars.sass'
@import './node_modules/bulma-css-vars/bulma-cv-lib.sass'
确定设置 globalWebVars 以真实的方式 bulma-css-vars.config.js运行 ./node_modules/.bin/bulma-css-vars 财务报告和审定财务报表 sass app.sass > app.css。 。 。 .
在您的html中:
<head>
<link res="stylesheet" src="./app.css">
</head>
<body>
<!-- [your webpage] -->
<!-- loads window.BulmaColorUpdater -->
<script src="./node_modules/bulma-css-vars/dist/bulma-css-vars.web-bundle.js"></script>
<!-- loads window.bulmaCssVarsDef with your variable definitions -->
<script src="./bulma-colors.js"></script>
<script>
const updater = new BulmaColorUpdater(bulmaCssVarsDef)
updater.updateVarsInDocument('black', '#553292')
</script>
</body>
新特性
欢迎公关!
如果您想要构建此仓库并尝试演示, 请确保您使用 yarn 财务报告和审定财务报表 yarn install 以安装软件包 demo 文件夹. npm 将创建符号链接而不是真实文件副本,这可能会给相对 bulma 文件的引用造成问题.