如何在Rails中自定义布尔变量 [英] How to customize bulma variables in rails
问题描述
我使用的是bulma rails gem,我想自定义其使用的一些变量,特别是字体颜色。
I'm using the bulma rails gem and I Want to customize some of the variables it uses, specifically the font color.
根据bulma文档 http:// bulma.io/documentation/overview/customize/ 我应该这样做:
According to the bulma docs http://bulma.io/documentation/overview/customize/ I should do something like this:
// 1. Import the initial variables
@import "../sass/utilities/initial-variables"
// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink and its invert
$pink: #ffb3b3
$pink-invert: #fff
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
$family-primary: $family-serif
// 4. Import the rest of Bulma
@import "../bulma"
但是我不确定如何进行这项工作
However I'm not sure how to make that work with the rails gem I'm using.
当前,我的application.css文件如下:
Currently my application.css file looks like this:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
@import "bulma";
这很好用。但是,如果我将其更改为类似于bulma文档中的示例,即使将 @import ../ bulma
更改为 @,它也将不再起作用导入 bulma
和 @import ../sass/utilities/initial-variables
到
@import sass / utilities / initial-variables
which works fine. However if I change it to be like the example in the bulma docs it no longer works even when changing @import "../bulma"
to @import "bulma"
and @import "../sass/utilities/initial-variables"
to @import "sass/utilities/initial-variables"
我想这里的问题是第一次导入变量但我不知道如何导入。这是gem中的文件: https://github.com/joshuajansen/bulma-rails/blob/master/app/assets/stylesheets/sass/utilities/variables.sass
I guess the problem here is with that first import of the variables but I can't figure out how to import it. Here's the file in the gem: https://github.com/joshuajansen/bulma-rails/blob/master/app/assets/stylesheets/sass/utilities/variables.sass
谢谢!
推荐答案
确定成功了。
I在 app / assets / stylesheets
目录中创建了一个名为 application.css.scss
的文件,并添加了以下内容:
I created a file called application.css.scss
in the app/assets/stylesheets
directory and added the following:
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;
@import "bulma";
这很好用。但是,添加初始import语句会导致失败,并对其进行了一些尝试,试图使路径正确,但是对我而言,它始终失败。不知道这有什么意义我看不到,但无论如何现在对我有用。
This works just fine. Adding the initial import statement causes to fail though, played around with it a bit trying to get the path correct but it always failed for me. Not sure if this has any significance I'm not seeing but works for me now anyways.
这篇关于如何在Rails中自定义布尔变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!