Customize Bulma Problem

[nknachiket]

This is about Bulma | the Docs.

Customize Bulma issue:

I'm very new to sass. I made a new .sass file with code below & when i try to compile this file using tools like CodeKit I get errors.
Note: I used the code for this file from Bulma Docs

// 1. Import the initial variables
@import "../sass/utilities/initial-variables"
@import "../sass/utilities/functions"

// 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. Setup your Custom Colors
$linkedin: #0077B5
$linkedin-invert: findColorInvert($linkedin)
$twitter: #1DA1F2
$twitter-invert: findColorInvert($twitter)
$github: #222222
$github-invert: findColorInvert($github)

// 5. Add new color variables to the color map.
@import "../sass/utilities/derived-variables.sass"
$addColors: (
"twitter":($twitter, $twitter-invert),
"linkedin": ($linkedin, $linkedin-invert),
"github": ($github, $github-invert)
)
$colors: map-merge($colors, $addColors)

// 6. Import the rest of Bulma
@import "../bulma"

This is error please if anyone have any idea on this.
Libsass: Error: unclosed parenthesis
on line 33 of Users/nachiketpatel/Documents/bulma-css/bulma-master/custom-bulma.sass

$addColors: ( {
------------^

[anderaus]

I'm not familiar with CodeKit, but using WebPack and sass-loader v 6.0.6 I had to drop all line breaks to get it working. So something like this (without line breaks):
$addColors: ( "twitter": ($twitter, $twitter-invert), "linkedin": ($linkedin, $linkedin-invert),"github": ($github, $github-invert) )

[jgthms]

Yes it’s a .sass vs .scss issue. We should have both on the website.

[victormongi]

Same issue here... I use .scss

[gabicava83]

Hi, having the same issue. As per Anderaus, my solution was to drop the line breaks > $addColors: ( "twitter": ($twitter, $twitter-invert), "linkedin": ($linkedin, $linkedin-invert),"github": ($github, $github-invert) )

I use codekit too.

Thanks,

[victormongi]

I have this in my laravel project and it works... use _variables.scss

// 1. Import the initial variables
@import "node_modules/bulma/sass/utilities/initial-variables";
@import "node_modules/bulma/sass/utilities/functions";
// 2. Set your own initial variables
// Update blue
$body-background-color: white;
// $family-serif: serif;
// 3. Set the derived variables
// Use the new serif family
// $family-primary: $family-serif;
// 4. Setup your Custom Colors
$linkedin: #0077B5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #1DA1F2;
$twitter-invert: findColorInvert($twitter);
$github: #222222;
$github-invert: findColorInvert($github);
// 5. Add new color variables to the color map.
@import "node_modules/bulma/sass/utilities/derived-variables.sass";
$addColors: ( "twitter":($twitter, $twitter-invert), "linkedin": ($linkedin, $linkedin-invert), "github": ($github, $github-invert)); $colors: map-merge($colors, $addColors);