Bulma: PLEASE! - use SCSS by default on bulma or implement 2 filetypes...

[leandroluk]

Is it about Bulma

Overview of the problem

I'm using Bulma version [0.6.1]

Description

Hello, I'm starting to study the bulma to apply in a project but I'm having difficulties to use only the SASS framework. is there any way to create it for SCSS? I think it would be interesting to convert since the build API already keeps this native ...

[jgthms]

Is there a particular reason why you would need Scss?

[leandroluk]

Hello, first of all I'm sorry for my English, Google Translator is helping me ...

I have been working with other frameworks for a long time and to this day I have not found any that use (still) SASS files ... and also I have not found any viable and functional solution to import SASS into SCSS. So far, the only solution I have is to use this package:

https://github.com/CyCoreSystems/bulma

That is no more than a copy of the original project but already transformed into SCSS ... I believe it is not so difficult to natively implement in the project files in SCSS since it is possible to compile the file from SASS to SCSS ...

[jgthms]

You can import sass files into your scss files. It’s the same engine, just a different syntax.

[feute]

As @jgthms states, you can import sass files into scss. If you just want to convert them to scss for learning purposes and study Bulma with that syntax you can convert every sass file with sass-convert -T scss bulma.sass (or whatever file you want), and it will print out the result.

[oleksiipotiekhin]

If you ask me, I prefer to use SCSS because of the C# background and because i think SCSS is more readable than SASS. But in the same time the SASS is not that different. @leandroluk you have a chance to learn not only _Bulma_ but SASS in the same time.

[leandroluk]

not really, I use SASS because I need to put this inside a project with the webpack and unfortunately I can not find any plugin that allows me to read SASS within SCSS.

I'm sure that to implement this in the original bulma project is not at all difficult, it is only necessary to add 1 new step in the deploy process to execute the command that the @feute showed

[oleksiipotiekhin]

@leandroluk I'm using Angular CLI with SCSS most of the time and it's using webpack behind the scene and I do not have any problem with importing Bulma.

[leandroluk]

Hello, I created a fork of the master project and inserted the implementations necessary for the project to automatically create the SCSS files when the project build is done. I hope it's accepted!

https://github.com/leandroluk/bulma

=D

[Joev-]

I'm attempting to use this within an ASP MVC project with WebCompiler. I'd love to use SCSS as my preferred syntax, unfortunately it seems I cannot mix SCSS and SASS files.

My test is a simple "Main.scss" as follows:

@import "bulma/utilities/_all"; @import "bulma/base/_all"; @import "bulma/elements/_all"; @import "bulma/components/_all"; @import "bulma/grid/_all"; @import "bulma/layout/_all";

The resultant css file seems to be missing a lot of declarations and is not correct. I'd personally appreciate an easy method of getting accesss to scss versions of these files without jumping through hoops of installing NPM, Gulp, Grunt or whatever in order to convert them. Perhaps you could have the conversion done as part of a build process for each version?

[leandroluk]

If you see my project forked today, you will see that there have been corrections regarding these relationship issues. I'm sure there are no more problems and the same can be integrated with the original project @Joev-.

[feute]

@Joev- why are you importing Bulma like that? You should import the main bulma.sass file (like @import "bulma") and it will import the necessary files. Also, you seem to be missing utilities, the current order (the import order is important) is:

@import "sass/utilities/_all";
@import "sass/base/_all";
@import "sass/elements/_all";
@import "sass/components/_all";
@import "sass/grid/_all";
@import "sass/layout/_all";

[Joev-]

@feute - I wanted more control over the imports, but you're right, I missed the utilities import which is what was missing from the css. Thanks for pointing that out. I'm still fairly new to all of this.

Edit: I just checked again actually and I do have the utilities import in there. Must've missed it when copying into GitHub. I just took a look through the files and they mostly seem to be Sass variables, so I can understand why nothing other than the animation is compiled into the css. :-)

[volnei]

Java scss compilers are compatible with SCSS and poor support on SASS. I'm migrating to bootstrap again.
:(

[Kryten0807]

Seconding what @volnei said... I am finding that tools (not just Java) tend to support SCSS better than SASS.

I recognize that it's the same engine under the hood (libsass) but I am encountering real differences between SASS & SCSS in tools that use this engine. In my own experience, I'm attempting to extract variables from the Bulma files for use in a Javascript project using a couple of different tools. They all seem to handle SCSS well but have difficulties with the Bulma SASS files.

I know that SASS format has not been (and apparently will not be) deprecated and I understand that there are many people out there who prefer it, but it seems to me like there's a slow de facto deprecation underway.

[volnei]

https://github.com/CyCoreSystems/bulma

[neysofu]

Hello everyone, Bulma newbie here. SASS files as opposed to SCSS are a huge pain to deal with... I just spent many hours debugging a Gulp build that didn't work just because libsass has poor support for .sass files. This is most definitely libsass's fault and not Bulma's, yet libsass is the future of Sass and the community consensus is to drop the old syntax in favor of SCSS.

[grofit]

Same sort of issue here when trying to use in an electron app, it seems the electron compiler poops out when I try to include sass from within scss files, given scss is sass version 3, I can see no downside to updating the sass scripts to scss other than someone has to do the work.

[LucyI]

Same issue with various Gulp builds utilizing libsass; they choke on the SASS but just work with SCSS. I am waiting/hoping for the day this wonderful framework converts to SCSS.

[techbusker]

I agree, it would be nice if there's an option. sass or scss. I also hope and wait, it's pain in the ass for me as a newbie that's why i use css when working with bulma and vue.

[PayteR]

I can google some converted bulma packages into scss, but they are not updated regularly. Maybe you could provide scss packages alongside sass packages converted before publishing on github/npm? It's not that hard and many people will benefit from it. Something like this:

[rdewell]

0.7.1: https://github.com/j1mc/bulma-scss

[PayteR]

@rdewell please can you add it on NPM? i can see there just this https://www.npmjs.com/package/bulma_scss and i don't know, if it's trustable

[j1mc]

@PayteR - I'm the person who's been maintaining the SCSS files at https://github.com/j1mc/bulma-scss.

In that repo I link to the script used to convert the files to SCSS syntax (you can see the link in the README), so you can trust what I've done, or (with the help of ruby) you can do the conversion yourself (either way is okay).

[Deblandero]

@rdewell Thanks

[Deblandero]

@j1mc Thanks for your job ;) :)

[Deblandero]

I have a little question for compiling ....
i use it's comand -> (after instaled Sass) : sass --watch scss:css

it's a nice way or not ?

Sorry for my bad english :/

[tanin47]

I am using Playframework with https://github.com/irundaia/sbt-sassify (the defacto SASS compiler for Play). Unfortunately, one of its limitations is that it can't mix SASS with SCSS.

Only one Sass syntax style can be used at the same time. So when compiling a .scss file, one cannot include a .sass file. (Well, you can, but it won't compile.)

So, it would be great if Bulma can offer SCSS.

https://github.com/j1mc/bulma-scss solves this issue in the mean time. However, in the long run, I'd prefer something from the official Bulma repo.

[tr1s]

Running into this issue as well.. it just makes way more sense to use SCSS since it's valid CSS. I can't compile/import .sass files with CodeKit, but it works fine if I take the minified file and change it to .scss and then import it.

It would be nice if we had both options in the bulma package. Why not? Right?

[AshleyPothecary]

@jgthms could make life easier for Bulma fans by running the ruby command: sass-convert -R scss --from sass --to scss to convert everything to SCSS and then just upload as alternative repo