Sass port?

[PopcornDesign]

I believe a SASS version would be better and have a higher adoption rate. Simply because SASS is more widely used right now and has major framework support like bootstrap etc.

please consider it

Thanks.

[brodybits]

I would actually favor using standard css with standard css variables, a couple nice writeups:

• https://www.hongkiat.com/blog/css-variables/
• https://medium.com/dev-channel/css-variables-no-really-76f8c91bd34e

From https://caniuse.com/#feat=css-variables css variables seems to be supported most of the modern browsers. We could use something like https://github.com/MadLittleMods/postcss-css-variables to support the older browsers.

[rhyneav]

I had no idea CSS variables were so well supported, thank you for the links @brodybits! The thing I would miss in a pure CSS implementation would be the looping and functions that a preprocessor gives.

As for a SASS version, what would be the advantages, other than it's widely used? In terms of contributing to PaperCSS, LESS and SASS are so similar that if you can use SASS, then you can use LESS and make contributions. For projects, PaperCSS can currently be downloaded as, good ole CSS rather than having to use LESS. For a quick SASS conversion/hack, it looks like there's a ruby gem, less2sass that'll do the job.

I'm curious to hear more of your thoughts on this @PopcornDesign

[rhyneav]

Going to close this for now. It looks like PaperCSS will stay a Less project :)

[MunifTanjim]

Did you take a look at SCSS?

SCSS is the new main syntax (as of Sass 3), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension .scss.

Using SCSS will enable the framework to be more approachable by the contributors. Even if somebody has no experience with CSS pre-processors, they can look at the code and understand it more easily than LESS/SASS.

The framework is still in its early stage, so a full conversion would not be a lot of work. I would really love to see PaperCSS adopting SCSS.

I'd request you to consider it @rhyneav

Thanks for this awesome framework anyway 😄

[rhyneav]

I'll do some homework on SCSS. It's not something I've used much of, but after a quick few Google searches, most recommend using it over LESS.

I'll definitely do some consideration on it. If a switch is made, it looks like there some tools to help facilitate the conversion process.

[PopcornDesign]

any update on this? sorry for the lack of response.
I meant SCSS (sass) specifically, it would work alongside my workflow much better and many others too. SCSS has a much higher adoption rate / bigger community.

[TotomInc]

An scss version of paper-css would be welcome, as @MunifTanjim said a lot of tools are using sass/scss instead of less. For example, in the vuejs-papercss repo I need an scss or css version (of each component), because if I wanted to include less files, this would increase the complexity of the installation of the framework.

If there is a way to convert the actual less project into a sass project, we should do it, especially in terms of compatibility with other tools. We should think about users that want an advanced usage of the framework.

[MunifTanjim]

It'll need a less2scss automated conversion followed by a major refactor. Yeah, it's a hassle. But in the long run, I think it's worth it.
Anyway, more the time passes more the hassle it'll be to convert the whole project from LESS to SCSS.

[tan-ahmed]

I can't use this project unless its converted to SASS/SCSS

[TotomInc]

If someone is interested about doing this, let us now. I reopen the issue since a SASS/SCSS version is highly possible, before the project become too big.

[MunifTanjim]

I can do it, @TotomInc.

What will be the workflow?

• Will the existing pull requests be on hold till this is done?
• From which branch should I start? master?

[TotomInc]

Thanks for taking care of this @MunifTanjim, you should start from the master branch. We will still continue to merge PR on develop then on master while you work on the SASS port. I'll be glad to help you once you setup the basic things, too.

If you worry in terms of versioning, we are going to release a 1.3.0 very soon witn @rhyneav which include a modularized version of papercss with a few features. Maybe you can wait for the 1.3.0 before starting to work on this.

[tan-ahmed]

Guys I just had a few questions:
What's the browser/device support of this framework?
I'm going to build a charity wordpress theme (personal project) - Can I use this framework (I'll have to wait for the SASS port)?

[MunifTanjim]

@TotomInc, I'll wait for modularized 1.3.0.

[rhyneav]

Hey @tan-ahmed, you should be good to download the latest release and link to the CSS file to your WordPress markup. That way you can start taking advantage of the PaperCSS styles in your project.

[koester]

I'd love to help refactoring for a SCSS port. I've rewritten less to scss before and since less2scss can only do 'the basics' we should manually take a look at every component (and the compiled css) to make sure that a) the compiled css will not change in a way that could break existing projects and b) use the refactoring to write scss code that's easily maintainable in the long run and to fix bugs like #73

@MunifTanjim
Do you want some help with porting the project to scss? I could take an indepth look at the scss files after the less2scss conversion and help with refactoring.

[TotomInc]

By the way, 1.3.1 is out @MunifTanjim. It includes modularized version and some new features.

[koester]

I think we should get the scss port out reasonably soon, as the code base is still pretty small and to reduce the work for new features. I can jump in to get the port on track. I should be able to get a working scss port by the end of the day, if that's okay with @MunifTanjim

[TotomInc]

I doubt @MunifTanjim started to work on the SCSS port. You can start it right now I think @koester.

[koester]

Alright 🎉 I will probably start at around 6pm CET. ☺️

[rhyneav]

Awesome! I'll hold off on merging in any PRs that touch the Less code,

[MunifTanjim]

@koester I haven't started working on it. If you want to do this, go forward. 😃 Let me know if you need any help.

[valerymelou]

I'll be glad to help to @koester . Let us know if you need any help on that.

[rhyneav]

Since we'll have a group working on this, it'd likely help to keep some organization. I've created a project to keep track of each LESS file in the source to keep track of progress. Issues can be opened for each card as needed!

Also, since changes will be made incrementally, I've created the branch scss-conversion for changes to be merged to. Once there's an initial SCSS build, I can create a sub-domain on Netlify to preview changes.

Hope this helps from an organization front, but let me know if there's any other way I can help out!

[koester]

I'll send a PR with the initial scss build later today. The refactoring takes a bit more time than I anticipated but I'll get it done.

@valerymelou @MunifTanjim you're welcome to review the code once I send the PR.

I think I will also take care of the gulp tasks and update the package, so there will be a bit to review here 😁

[koester]

@rhyneav how would we version this? Since this is a major refactor of the source (the css output will be the same). Do it the Angular way and jump straight from 1.3.1 to 2.0.0?

[TotomInc]

@koester we can jump straight to 1.4.0, not 2.0.0. IMO 2.0.0 is for a complete refactoring of the code, including a totally new style (and features), a bit like Bootstrap 3 vs Bootstrap 4. A refactor of the code with no visual change doesn't have have to jump straight to 2.0.0.

[koester]

Yea you're right. Just thought about making it clear that if you're using the less source files of the project and you want to update to 1.4.0 that things will break for you. But we can add that to the top of the Readme I guess.

[rhyneav]

This is now in develop and will be released as version 1.4.0! Exciting stuff, and thank you for everyone's contributions!