CODEWITHSUNDEEP
csssassbulma
user7342807
user7342807

Reputation: 313

How to generate CSS from Sass in Bulma

This is my first time working with Scss, although I have run the command in terminal to convert a simple input.sass to output.css in the case of other libraries, it seems a little bit difficult, since it's new to me.

I have a profile with index.html which should require a style.css, but I need this style.css to be generated from Bulma directory which is currently in this format:

index.html 
vendors
    bulma
       css
          bulma.css
          bulma.css.map
        sass
            base
              _all.sass
              generic.sass
              helpers.sass
              minireset.sass
            components
            elements
            grid
            layout
            utitlities
            bulma.sass

The problem here is that, unlike the sass input.scss output.css example which converts Scss files to CSS, the above seems complicated.

I don't know which file to convert, or if I should alter the Sass file and modify them but do I save the output in individual CSS file or one master style...

Upvotes: 0

Views: 1893

Answers (1)

ivan marchenko
ivan marchenko

Reputation: 421

in every sass directory such as base, components and so on, they all have _all.sass file. which include all of the files in that directory. So, all you need is to include one _all.sass file from every folder within sass folder.

So in your sass file, that you will watch with sass gem, make includes for all fo the _all.sass. Something like this would work.

@import "utilities/_all"
@import "base/_all"
@import "elements/_all"
@import "components/_all"
@import "grid/_all"
@import "ayout/_all"

Also, I am not 100% sure, but I think it is a bad idea to mix sass with scss, so my advice would be to do something like this:

In your sass folder of your project create a sass file and name it styles.sass. In that file write imports to all the _all.sass files.

And then just go do this in the terminal: sass --watch sass:css

Upvotes: 2

Related Questions