I want to customize Bulma.
I read the document https://bulma.io/documentation/overview/customize/
but I cannot understand.
npm install bulma
cd node_modules/bulma
mv bulma.sass bulma.sass.org
vi bulma.sass
pasted Set your variables code and save named bulma.sass
npm run build-sass
and build error.
please teach me how to ?
First, the best way is not to change the node_module's file content.
The simplest way is to create custom scss file and include Bulma SCSS into it.
#charset "utf-8";
// modify the bulma variables here
$primary: #404BFF;
$navbar-item-img-max-height: 5rem;
$card-header-background-color: $primary;
$card-header-color: white;
$footer-background-color: $primary;
$footer-color: white;
// Import Bulma and Buefy styles
#import "~bulma"; // or fallow the partial import example from docs.
// add custom css here.
Maybe this is the page you need.
Otherwise, if you've installed sass you might choose to follow this step: I'm no npm expert so I chose to download Bulma, create a custom .sass file and let sass generate my css. This path is explained here: https://bulma.io/documentation/customize/with-sass-cli/
This may be bad form but if you write your own css in the html file, you can add !important to override the bulma colors.
i.e. if there's a button color you don't like such as is-primary you can do background-color: blue !important.
Just try not to use !important all over the place.
The better solution would be to download sass -- but I can't help with that. The other answer should help?
I discover that if you set an id="for-example" for a div and then you go to your styles.scss you can create a new class for that id.div like this:
#for-example {
background-color: blue;
}
I don't know if is a bad practice but it works for me!
Related
I have the following 3 scss files:
// component.scss
#use 'componentFunctions' as componentFunctions;
/** Adding a default color theme to the component **/
#include componentFunctions.addColorTheme(...);
// componentFunctions.scss
#mixin addColorTheme($param) {
... mixin that creates a color theme for the component
}
// main.scss
#use 'component' as componentName;
/** I would also like to use the createColorTheme mixin in this file, to add a new color theme for this component, in case this module is loaded, how can I achieve this? **/
What I am trying to achieve, is to access the function defined in componentFunction.scss, in the main.scss file. The only way I've managed to do this, is to manually redefine the function in the component.scss file, but surely there has to be a better way around for this.
Strangely, if I am not re-namespacing my imports, everything works automatically. There is a possibility that I misunderstood how the #use functionality works in SCSS, could someone elaborate on how could I achieve the desired effect?
According to Sass docs:
Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.
So you can use #use again in your main.scss file as the code below:
#use 'component' as componentName;
#use 'componentFunctions' as componentFunctions;
$newVar: componentFunctions.myFunction();
In that way you don't need to redefine the function in the component.scss.
I'm migrating a Stylus library to SCSS since Angular 12 has deprecated Stylus and I'm in that impacted 0.3%. I've run into something we were doing that I'm not sure how to convert to SCSS—maybe it's impossible.
Let me lay this out simply: I work on several projects that all use loads of the same styles, so we put those styles together into one style sheet in its own NPM package. We can then just grab #import '#company/design/styles'; and suddenly we've got all of our regular styles and variables and mixins available in the project, or we can import #import '#company/package/styles/common'; for just the variables and mixins.
The thing is, our projects might need to configure the library before we import it. Suppose the library contains this bit:
// #company/package/styles/_forms.scss
input:invalid {
background: url('/assets/input-error.svg') no-repeat center right;
}
Not every project will have /assets/input-error.svg at that exact location. Maybe one of my projects has to use /subfolder/static/input-error.svg.
I could include this then overwrite input:invalid { background-image: url(...) } to supply it with the correct location, but there may be many references to this particular file and many other assets on top of that to correct. So we instead, in our Stylus library, we introduced an $asset-input-error variable that points to /assets/input-error.svg by default and did something like this:
// #company/package/styles/_forms.scss
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
// the local project
$asset-input-error: '/subfolder/static/input-error.svg';
#import '#company/package/styles';
The above is heavily simplified and isn't actually legitimate SCSS, but I hope it conveys what we're trying to do: we want to set up what are effectively environment variables in our SCSS, include the common style sheet, and have it use those variables.
The thing is, I'm not sure what the legitimate or idiomatic approach is to do this in SCSS. Unlike Stylus, which has a global scope for its variables, SCSS would have me #use '../config'; and reference config.$asset-input-error, and from outside the library there's no way I see to change the configuration to point that asset to a different location. I'm sure SCSS has a way for me to do this, but I'm not sure what it is. Do I convert the entire library into a giant mixin to which I pass optional configuration? Do I do something with global variables? Something else?
How can I provide variables to my SCSS style sheet to configure it as part of including it in a project?
Ultimately the end goal here is just to be able to say to the library things like: “the assets to reference are here” (very important) or “the error color is this in this particuilar project” (less important).
Using #import
You can use global variables declared before the #import as you stated.
SCSS Documentation for this method
#company/package/styles/_forms.scss
$asset-input-error: '/subfolder/static/input-error.svg' !default;
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
#company/package/styles/styles.scss
#import 'forms';
local.scss
$asset-input-error: '/different/path/input-error.svg';
#import '#company/package/styles';
CodeSandbox Demo
Using #use [...] with
You can also hop aboard the #use train if you prefer to future-proof your library.
SCSS Documentation for this method
SCSS Documentation for using mixins
SCSS Documentation for configuring forwards
#company/package/styles/_forms.scss
$asset-input-error: '/subfolder/static/input-error.svg' !default;
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
#company/package/styles/styles.scss
#forward 'forms';
local.scss
#use 'styles' with (
$asset-input-error: '/different/path/input-error.svg'
);
Sadly CodeSandbox and StackBlitz don't support dart-sass, so I don't have a live demo for this but I tested it on the latest version of sass from npm.
I've set up my project to use Bootstrap and scss with Webpacker, however, whenever I start my server locally I get this error:
ActionView::Template::Error (Error: Undefined variable: "$secondary-accent".
on line 76:23 of app/assets/stylesheets/_hero.scss
>> border: solid 0.5px $secondary-accent;
This error actually goes away locally if I do a hard refresh, but of course, Capistrano is not as forgiving and I want to figure out the issue anyway.
In my /app/javascscript/ folder I have a src/style.scss file which imports the required stylesheets.
#import '../../assets/stylesheets/_globals.scss'; //import globals first so the values propagate to Bootstrap
#import '~bootstrap/scss/bootstrap'; //import bootstrap
#import '../../assets/stylesheets/application.scss' //import everything else;
/assets/stylesheets/application.scss looks like:
#import '_navbar';
#import 'actiontext';
#import '_hero';
#import 'comments';
#import 'static_pages';
body {
font-family: $body-font;
font-size: $standard;
}
Of course, the easy way to get rid of this is to just add #import 'globals' to each of the partials but that does not seem to fit with the sass way. I don't really want to add #import 'globals' at the top of every single .scss file, not a big deal at the moment but as the project grows and the complexity of the styles increases maintainability could become a headache. I thought that Webpacker would take care of this, am I wrong? Am I missing something in the setup?
Ps. I realize this question has been asked dozens of times, but they all seem to be for older versions of Rails, or the solutions don't apply to me (such as removing the require tree from application.css
This was resolved by tightening my Webpacker set up a bit.
The biggest issue was installing scss I thought sass-rails in my gemfile was sufficient but I also needed yarn add scss. I didn't need to import the globals inside of src/style.scss just in application.scss.
I have a styles.scss and a partial that holds some color variables _colors.scss.
_colors.scss:
$primary: #009688;
$secondary: #4caf50;
styles.scss:
#import 'colors';
.blurred {
color: $primary;
filter: blur(2px);
}
This works, but I would like to be able to have intellisense for the $primary variable, just as if it was declared in styles.scss. Is there a feature/extension available for VS code that can do this?
Install SCSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss
Image source
There is no color preview though https://github.com/mrmlnc/vscode-scss/issues/13
because vscode doesn't support this yet and there is no plan to add it https://github.com/mrmlnc/vscode-scss/issues/29
It seems like my scss is turning off ordered list styles by default, which seems a little strange / annoying. Can anyone explain why it would do that?
This is the line that was mysteriously added to my css:
/* line 24, C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none;
}
A little splunking showed that was the result of these lines in the _utilities.scss file:
ol, ul {
#include reset-list-style; }
// Reset the list style of an element.
#mixin reset-list-style {
list-style: none; }
I'm fixing this issue by adding:
ol {
list-style-type: decimal;
}
to my scss file. Would it be better to modify the _utilities.scss file? It sounds like if I did that it might screw up how scss translates into css for ol, ul elements?
If you don't like this behavior, you can take out the reset that's included with Compass. When you start a new compass project, it generates screen.scss with the following:
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
#import "compass/reset";
Just remove or comment out the #import "compass/reset" and use a reset that's to your liking or use something like normalize.css to standardize styles.
Yes, Compass (as bootstrap) resets the list-style for lists as written here
compass utilities documentation
I think the best practice would be to add the "inverse" reset rule just to your stylesheet, instead of modifying the library, because, in case you are going to change (maybe) the version of your library and forget to patch it again, you will find unexplainable "errors". I would add it to my reset rules.