[Docs] More detailed "Customizing with Sass" page at Start section

[ghost]

This is about the Bulma Docs --> Feature/question http://bulma.io/documentation/overview/start/

Description

Hello there, I just found Bulma and loved it. I implemented it already into my site, but I'm stuck now with getting variables working. Starting tutorial is not enough IMHO. I read Marksheet.io twice to get more knowledge about SASS but so many files in Bulma archive makes me confused. Can you make in-depth introduction guide?

I tried to create a file called mine.sass (look below) and compile it with SASS but got bugs.

@import "bulma/sass/utilities/variables.sass"

// Override initial variables here
// You can add new ones or update existing ones:

$blue: #72d0eb // Update blue
$pink: #ffb3b3 // Add pink
$family-serif: "Georgia", serif // Add a serif family

// Override generated variables here
// For example, by default, the $danger color is $red and the font is sans-serif
// You can change these values:

$danger: $orange // Use the existing orange
$family-primary: $family-serif // Use the new serif family

@import "bulma"

[ghost]

Compilation failed even with such file: my.css

@import "bulma/sass/utilities/variables.sass"
@import "bulma/bulma"

me@thinkpad ~/node_modules $ sass my.css my.sass
Error: $color: "findColorInvert(#00d1b2)" is not a color for `darken'
        on line 111 of bulma/sass/elements/button.sass
        from line 4 of bulma/sass/elements/_all.sass
        from line 6 of bulma/bulma.sass
        from line 2 of my.css
  Use --trace for backtrace.
me@thinkpad ~/node_modules $ 

@dontpanic reported same issue on Gitter

[ghost]

Figured it out. Importing variables makes all this mess. Idk why it is mentioned in docs.

edit: not really, i changed only $primary-color with a success :(

[rafaberaldo]

You should import the whole core to use the mixins and functions:

@import "bulma/sass/utilities/_all";

Edit: A full customized file is something like this:

// Import Bulma's core
@import "bulma/sass/utilities/_all";

// Set your colors
$primary: #8c67ef;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
$facebook: #4267B2;
$facebook-invert: findColorInvert($facebook);
$google-plus: #DB4437;
$google-plus-invert: findColorInvert($google-plus);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
    white: ($white, $black),
    black: ($black, $white),
    light: ($light, $light-invert),
    dark: ($dark, $dark-invert),
    primary: ($primary, $primary-invert),
    info: ($info, $info-invert),
    success: ($success, $success-invert),
    warning: ($warning, $warning-invert),
    danger: ($danger, $danger-invert),
    twitter: ($twitter, $twitter-invert),
    facebook: ($facebook, $facebook-invert),
    google-plus: ($google-plus, $google-plus-invert)
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

@import "bulma";

[ghost]

@rafaelpimpa This is bulma.sass, so you mean that I should put my stuff there?

/*! bulma.io v0.4.0 | MIT License | github.com/jgthms/bulma */
@charset "utf-8"

@import "sass/utilities/_all"
[here!!]
@import "sass/base/_all"
@import "sass/elements/_all"
@import "sass/components/_all"
@import "sass/grid/_all"
@import "sass/layout/_all"

[rafaberaldo]

Would work, but it's preferably on a separated file, like the example I gave.

[ghost]

@rafaelpimpa So I created file my.css and variables didn't take any effect (tho it compiles successfully)

@import "bulma/sass/utilities/_all"
$body-background: #55AA55
$primary: #55AA55
@import "bulma/bulma"

[rafaberaldo]

It must be .scss or .sass

[ghost]

@rafaelpimpa sorry I had in mind .sass Can you compile for your own please with above variables so I could check if this works?

[rafaberaldo]

Yep it does compile (v.0.4.0)

[ghost]

@rafaelpimpa could you share a css?

[ekhaled]

FWIW this also works:

@import "bulma/sass/utilities/functions";
@import "bulma/sass/utilities/variables";

// Set your colors
$primary: #8c67ef;
//................more overrides.......

The error is misleading, it occurs because of the usage of findColorInvert() in variables.sass

[jgelens]

Ran into the same issue, is this something what should be updated in the docs?

[gour]

@rafaelpimpa In regard to:

Would work, but it's preferably on a separated file, like the example I gave.

If I put my customization in my.sass, what is required to change in package.json file in order to be able to e.g. use:

npm start

to execute

npm run build-sass -- --watch

or there is another (recommended) way to do it?

[ghost]

Anyone have an idea why such file change font only of searchbox and primary color stays default?

@import "bulma/sass/utilities/_all"

$family-serif: "Georgia", serif // Add a serif family

$body-background: #55AA55
$primary: #55AA55
$turquoise: #55AA55

$family-primary: $family-serif // Use the new serif family

@import "bulma/bulma"

[ekhaled]

@tu5

I had to do this to get it working:

@import "bulma/sass/utilities/_all"

$family-serif: "Georgia", serif // Add a serif family

$body-background: #55AA55
$primary: #55AA55
$turquoise: #55AA55

$family-primary: $family-serif; // Use the new serif family

//Invert colors
$primary-invert: findColorInvert($primary);
$info-invert: findColorInvert($info);
$success-invert: findColorInvert($success);
$warning-invert: findColorInvert($warning);
$danger-invert: findColorInvert($danger);

//Link colors
$link: $primary;
$link-invert: $primary-invert;

//respecify colors map to use new variables
$colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert));

@import "bulma/bulma"

[rafaberaldo]

@gour I was thinking about importing bulma on another project to make the customizations. Working with a bulma's fork I don't actually know the recommended way :/

@tu5 You have to put the primary color inside the $colors list to work fully.

[ghost]

@ekhaled What are you using to convert SASS? I'm getting error because of ";"

Error: Invalid CSS after "$family-serif": expected expression (e.g. 1px, bold), was "; // Use the ne..."
        on line 9 of my.sass
  Use --trace for backtrace.

And after removing all ";" changes still doesn't apply the whole site. I'm using command line sass application.

[bmarkovic]

I think the easiest would be to copy the entire 1. Initial variables and 2. Primary colors blocks from variables.sass into some file, say, overrides.sass and then:

@import './overrides.sass';
@import 'bulma/bulma';

And you simply edit what you want in overrides.sass

It's also aligned to the intended use of the !default flag in SASS, though it might not be the cleanest if there are breaking changes in the future releases.

[ForsakenHarmony]

@jgthms $colors should not be in derived-variables, because it still requires you to copy the line

this doesn't really fix the problem at all

doing this properly would be like 3 files

and the invert colors for the variables should also use findColorInvert?

[ghost]

This worked for me when I wanted to change say btn background color:

@import "../node_modules/bulma/sass/utilities/_all";
@import "bulma/sass/elements/button.sass";

$button-background-color: #72d0eb;

@import '../node_modules/bulma/bulma.sass';