How to use default $ variables from Bulma

user_8722631 0
Viewed 6717

I literally started my coding journey 3 days ago, so this is a whole new dimension for me. I'm starting to get the hang of html and css, on the website I'm trying to design.

I'm using the Bulma CSS framework on my site, and I'm having trouble using their variables: http://bulma.io/documentation/overview/variables/

Are these variables only accessible in SASS? I got SASS set up, so my scss file updates my css file, but my scss file isn't associated with Bulma in any way, so I'll get "Variable is undefined", which kinda makes sense. So I'm assuming I will have to import the Bulma variables in to the scss file, but how?

This is how I got my css setup in the "head" of the html.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/testing.css">

The only thing I'm trying to accomplish right now is to get a black background with the preset variable $black. This is from the .css file, and obviously not the way to do it, you can't use $ variables in css, right?

html, body {
font-family: Calibri, sans-serif;
font-size: 16px;
color: #dfdfdf;
background-color: $black; }

I guess I'm missing something basic here, help a beginner out please.

Recap: How to use preset framework (Bulma, in this case) variables?

Thanks

bulma import css html variables
2 Answers

Sounds like you just need to import the Bulma initial-variables.scss file into your testing.scss file. 

@import 'path/to/initial-variables';

and then you'll have access to variables like $black.

Remember to change the path so it's correct for your setup.

user_4385810

Not sure if this is the "right" way to do it, but this is how I made it work:

npm install bulma

then inserting this at the top of my testing.scss : 

@import "C:/Users/username/node_modules/bulma/sass/utilities/_all";

I can now use Bulma's variables in testing.scss, and they translate to vanilla css when saved/compiled to testing.css. Couldn't find any instructions for this, just something I stumbled upon. Is it like, too basic, so they assume everyone knows how to do this?

user_87226310
Related