Search code examples
htmlcssvariablesimportbulma

How to use default $ variables from Bulma


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


Solution

  • 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.