I'm trying to overwrite the color of text in my Bulma navbar, it works if I'm using an !important tag in my regular SCSS files but I'm trying to use as few !important tags as possible.
The Bulma docs tell me that I can overwrite the Bulma color variables, but all my attempts have been futile.
What I've tried so far:
Created a _bulmaTheme.scss file
Tried to overwrite the colors in this file
The colors do not get overwritten in the front end, I can see them further down my console as overwritten by the inital value Bulma sets, see attached screenshot of my Chrome console
I got a bit desperate so I've tried to set many variables, according to my brain I should only need to overwrite the $navbar-link variable. The content of my _bulmaTheme.scss currently looks like this
#import "bulma/sass/utilities/initial-variables.sass";
$navLinkColor: rgba(156, 2, 2, 0.7);
$navbar-item-color: rgba(156, 2, 2, 0.7);
$navbar-background-colo: $navLinkColor;
$navbar-item: $navLinkColor;
$navbar-item-active-color: $navLinkColor;
$navbar-item-hover-color: $navLinkColor;
$navbar-item-color: rgba(156, 2, 2, 0.7);
$nav-link: $navLinkColor;
$navbar-link: rgba(156, 2, 2, 0.7);
$navbar: $navLinkColor;
$navbar-item-color: $navLinkColor;
$navbar-item-hover-color: $navLinkColor ;
$navbar-item-hover-background-color: $navLinkColor ;
$navbar-item-active-color: $navLinkColor ;
$navbar-item-active-background-color: $navLinkColor ;
#media screen and (min-width: 1024px) {
$navLinkColor: rgba(156, 2, 2, 0.7);
$navbar-item-color: $navLinkColor;
$navbar-background-colo: $navLinkColor;
$navbar-item: $navLinkColor;
$navbar-item-active-color: $navLinkColor;
$navbar-item-hover-color: $navLinkColor;
$navbar-item-color: $navLinkColor;
$nav-link: $navLinkColor;
$navbar-link: rgba(156, 2, 2, 0.7);
$navbar-item-color: rgba(156, 2, 2, 0.7);
$navbar: $navLinkColor;
}
#import "bulma/bulma.sass";
For some reason none of the overwrites do anything, I tested if the scss file works by setting a different color on my body tag and that worked just fine. I import the Bulma theme code in my main app.scss file like so
#charset "utf-8";
#import "./theme.scss";
#import "./typography.scss";
#import "./bulmaTheme.scss";
...SCSS (and no extra imports) underneath
I'm using Bulma in a Gatsby project running Bulma version 0.8.1, any ideas on what I'm doing wrong
You have a typo there, mate:
$navbar-background-colo -> $navbar-background-color
Related
I have been trying to implement additional spacing increments to Bootstrap, however the SASS map-merge seems to have no impact of the available classes.
I have followed the Boostrap 5.2 documentation on how the $spacers map should be formatted, and I have added a map-merge to my SASS file:
#import "../../src/bootstrap/scss/functions";
#import "../../src/bootstrap/scss/variables";
#import "../../src/bootstrap/scss/mixins";
#import "../../src/bootstrap/scss/_maps.scss";
#import "../../src/bootstrap/scss/_utilities.scss";
$spacer: 1rem;
$custom-spacers: ( 6: $spacer * 4, 7: $spacer * 5, 8: $spacer * 6,);
$spacers: map-merge($spacers, $custom-spacers);
#import "../../src/bootstrap/scss/bootstrap.scss";
I have then been checking the resulting .css file once compiled with gulp and it has no instance of any -6 spacing elements.
What am I missing?
I have the following SASS code in a SASS file which is imported to my Vue component in Nuxt 3:
.page {
background-color: rgba(0, 0, 0, 0.87);
}
I convert this to CSS using nuxt generate (with 3.0.0-rc.8), I get the following output:
.page {
background-color: #000000de;
}
This is wrong, because there is no opacity anymore. The output should be:
.page {
background-color: rgba(0, 0, 0, 0.87);
}
What causes this problem?
Side note: I could use opacity property instead of rgba, but it cannot always replace rgba, for example if I have box-shadow: 0 -0.1rem 0.4rem rgba(0, 0, 0, 0.5) inset;
Both the RGBA and hex values are the same.
Hex using 6 digits for regular RBG channels, the 2 last ones (if provided) are used for the alpha channel.
You can find an online converter here: https://rgbacolorpicker.com/rgba-to-hex
Otherwise, you can also try those directly into the browser.
I've used an alpha of 0.15 because 0.87 is quite hard to see (1 being totally opaque as a reminder), but it is totally equal for all the values as you can expect.
For that example, pick the sidebar on the right and apply both properties, toggle them back and forth and you'll notice no difference as expected.
Moreover, the devtools can provide you the convertion directly, click on the color icon (just on the right side of background-color and before the actual value), then click on the arrows on the bottom right of the popup.
So, if something is not working, it may come from somewhere else but both are totally equal from a CSS point of view.
I have two separate SASS files among many, on a ReactJS repository, such as _main.sass and _partials.sass. They are combined using #use on a separate file named index.css.
The SASS package as a dependency is just sass via npm.
_main.sass and all of its variables can be accessed by _partials.sass, thanks to #use "./main" as *.
I have the following code on _main.sass which detects OS preference for dark mode:
#media (prefers-color-scheme: light)
body
background-color: $white
color: $black
#media (prefers-color-scheme: dark)
body
background-color: $dark
color: $light
All of these color variables are defined and they're working well.
But the problem is that I need to use complement() function on the background-color which is currently active, in _partials.sass.
The main issue seems to me that when I assign a variable e.g. $accent on both ends of the media queries, the variable does not get picked up by the remote file. I could not wrap my head around to do it in such way, since I'm only a beginner at coding SASS.
Unfortunately, I need the plain CSS #media query implementations for automatically detecting the preference. But any suggestion is appreciated in case it is impossible to keep it like that and achieve what I wanted.
Thank you!
I've found the solution myself.
So, I was trying to make a light/dark theme compliant SASS implementation.
What complement function does is that it rotates the color in the input for 180deg on the RGB hue. I needed this to get corresponding inverted-like colors for each color, for better dark-mode contrast. The difference between invert and complement are listed here.
But, I realized that I did not need that. Here is the code for my theme implementation using SASS.
// rainbow
$blue: #00a4ef
$yellow: #f4b400
$red: #db4437
$green: #61b500
$purple: #6e14ef
$pink: #ff0090
$carmine: #c6004b
// monochroma
$white: #fff
$light: #f5f5f5
$lgray: #c2c2c2
$dgray: #6e6e6e
$ldark: #363636
$dark: #232323
$black: #000
$themes: (light: (logo: url("../static/logo-light.svg"), bg: $white, card-bg: $light, text: $black, link: $red, hover: $pink, active: $carmine, border: $lgray, button: $yellow), dark: (logo: url("../static/logo-dark.svg"), bg: $dark, card-bg: $ldark, text: $light, link: $red, hover: $pink, active: $carmine, border: $dgray, button: $purple))
#mixin themeProperty($theme, $property, $color, $additionalProperties)
#if $additionalProperties
#{$property}: unquote(map-get($theme, $color) + " " + $additionalProperties)
#else
#{$property}: unquote(map-get($theme, $color))
#mixin theme($property, $color, $additionalProperties: "")
$light: map-get($themes, light)
$dark: map-get($themes, dark)
#media (prefers-color-scheme: light)
#include themeProperty($light, $property, $color, $additionalProperties)
#media (prefers-color-scheme: dark)
#include themeProperty($dark, $property, $color, $additionalProperties)
There is a color map named "themes" which lists each color for light and dark themes for different use cases.
Furthermore, the mixins match the exact color for exact usage for the desired theme mode, whichever is being used by the client-side (browser or OS), thanks to #media queries.
For example, if you'd like to color a background-color using the button preset on the theme mapping, the usage is as follows:
#include theme("background-color", button)
I am using SASS for styling with Neat
But the tutorial is based on SCSS.
Both are quite new to me.
I don't really know how to convert the SCSS code below to SASS.
$my-custom-grid: (
columns: 12,
gutter: 20px,
media: 1200px,
color: rgba(#00d4ff, 0.25),
direction: ltr,
);
Per your example, the SASS version would be like this
$my-custom-grid: (columns: 12, gutter: 20px, media: 1200px, color: rgba(#00d4ff, 0.25), direction: ltr)
All on one line and no ; at the end
A good way to convert is to go to Sassmeister and start out with the options saying its SCSS, then select SASS in the options
I've been introduced to the gridlover tool. It provides SASS variables like:
$scale0: (
fontSize: 1em,
line: 1.5em,
autoLineCount: 1,
autoLineHeight: 1.5em
);
But I can't figure out what all the values correspond to.
I understand that I can use each one using map-get. fontSize is obviously used to set font-size and line looks like line-height.
.some-class {
font-size: map-get($scale0, fontSize);
line-height: map-get($scale0, line);
}
But what are autoLineCount and autoLineHeight? Are these SASS keywords? What am I suppose to do with them?