interested in [official] SASS port of uikit

[m5o]

Hey uikit!

Are you guys interested in an SASS port for this project?

Originally I am a bootstrapper, but I like the style and structure of uikit.

I am not new to this, previously I was one of the contributor of the jlong/sass-bootstrap project. Did the translation for many bootstrap 2.x and 3.x versions.

I don't know, if a project-fork is the right decision, as the guys did for twbs/bootstrap-sass. Maybe a scss directory structure inside this repo would be fine. With some smart conversion scripts around. But that is to much detail for the moment.

What are your thoughts..?

Best,
m5o

[anotherZero]

I'd be interested in exactly this. I'd be willing to contribute if needed

[saschadube]

Hi, we also thought of doing a SASS port. What would you suggest?

[m5o]

I am new to grunt but I guess I would suggest grunt-text-replace with some smart replacement rules. This will fit most in with your current toolset and processing a uikit build.

Last days, Inside the scss branch of my uikit fork I've tested with a monkey-patched copy of converter.rb by the folks from twbs/boostrap-sass. This currently works. But it will include dependencies to lot ruby tools.

So my proposal would start fresh and begin with grunt-text-replace.

One side-note: The conversion from LESS to SCSS/SASS will not so heavy.
Guess it is all about this tasks:

• replace vars
• default flag for vars
• replace file imports
• create mixing syntax for .hook-* classes

In my fork I had some issues with variable loading and other minor stuff. So it could be possible that you also have to change sort order of variable declaration (e.g. variables.less) in the master less files.

[anotherZero]

in case anyone finds this helpful, it's a quick/general find/replace sequence for a text editor
http://stackoverflow.com/questions/14970224/anyone-know-of-a-good-way-to-convert-from-less-to-sass

1. replace @ with $
  Find: @
  Replace: $

2. replace mixins
  Find: \.([\w\-]*)\s*\((.*)\)\s*\{
  Replace: @mixin \1\(\2\)\n{

3. replace includes
  Find: \.([\w\-]*\(.*\)\s*;)
  Replace: @include \1

4. replace string literals
  Find: ~"(.*)"
  Replace: #{"\1"}

5. replace valid @ expressions
  Find: \$(media|font-face)
  Replace: @\1

[m5o]

@saschadube What do you think?

[saschadube]

Thanks guys! Please be a little patient. Currently we are a little limited in resources but we will take a look at it as soon as possible.

[waynoss]

uikit is great i would support a SASS port

[elcreativo]

i'm also looking forward to the SCSS port

[floriandotpy]

I've looked into this and started working on the work contributed by @anotherZero's pull request as this seemed to be an easily maintainable approch. Check out my fork if you want: https://github.com/florianletsch/uikit

However, there is a huge difference in variable semantics. Simply put, LESS will output the value a variable has last had while SCSS will output the value the variable has at its position in the script. Our theming approach is based on this system, as we are loading the core uikit files and then load the theme files that change variable values. In SCSS this would need to be the other way around.

As an illustration of this difference, check out this simple example: SCSS version versus LESS version.

We're open for input. How do others solve this without rearranging everything by hand?

[anotherZero]

@florianletsch
It seems like you'd need to have your theme variables loaded before outputting any CSS.
Know and load theme file before proceeding to generate the CSS.

[zslabs]

Would love to see a SASS port as well - only thing holding me back from using UiKit on some bigger projects.

[chogarcia]

@zslabs
Completely agree, in my case that's the only thing for not using it in big projects.

[RobertinoValue]

Even WordPress Core is adopting Sass apparently : http://wptavern.com/wordpress-core-adopts-sass-css-preprocessor
The last line of the article links to this : https://core.trac.wordpress.org/changeset/26137

[KeithMon]

Add my name to the list. I would greatly appreciate a Sass version.

[dokdeleon]

+1

[PixelT]

👍
@saschadube some infos about approximate date for support SASS?

[gangster]

+1

[CesarRotela]

+1

[tdgcummings]

+1

[tdgcummings]

Only thing from stopping me using UIKIT in all my projects.

[aaronchi]

+1

[mishantidev]

+1

[russback]

+1

[zslabs]

While this was teased a bit on the YooTheme blog recently, I honestly hope the approach that Bootstrap has taken will be done here (automatic ports to SASS based on a Grunt find/replace). LESS has silently become more powerful than SASS IMHO and I've become quite intrigued the project recently, so would love to see it continue to be developed on. Thanks!

[floriandotpy]

@zslabs That exactly is the plan. We've played around with the grunt tasks and simple search/replace works pretty well for the plain syntax differences.

However, because LESS has late/lazy binding of variable values and hooks and SASS does not, we need to restructure the complete code base.

Right now, one component can overwrite a value that is used above, even in the core components. This is why styling works so well. With SASS, we have to make sure that all values are set before they are being referenced for the first time and that nothing overwrites them throughout the CSS generation (because then it will use one value at first and then the second value for all later references).

This is the reason why a SASS port isn't as straight forward as I thought at first. But yes, it's on the roadmap. :)

[zslabs]

Awesome to hear. Appreciate the insight and always refreshing to hear you guys are always thinking ahead.

• Zach Schnackel

On Jun 13, 2014, at 7:59 AM, Florian Letsch notifications@github.com wrote:

@zslabs That exactly is the plan. We've played around with the grunt tasks and simple search/replace works pretty well for the plain syntax differences.

However, because LESS has late/lazy binding of variable values and hooks and SASS does not, we need to restructure the complete code base.

Right now, one component can overwrite a value that is used above, even in the core components. This is why styling works so well. With SASS, we have to make sure that all values are set before they are being referenced for the first time and that nothing overwrites them throughout the CSS generation (because then it will use one value at first and then the second value for all later references).

This is the reason why a SASS port isn't as straight forward as I thought at first. But yes, it's on the roadmap. :)

—
Reply to this email directly or view it on GitHub.

[abhishiv]

+1

just FYI, the reason a SASS version would be appreciated very much is because of smoother integration with rails (less-rails require theurbyracer gem which can have some overhead).

[dikaio]

+1

[nkpz]

Going to work on this in the coming days, as I'm building a UI toolkit for Angular that will depend on it. If I have to rearrange a billion things by hand I will 😃

Was planning on a hard fork for my project, but I'll base the Sass conversion on a soft fork, keep it decoupled from Angular, and if it works out I'll share here. If anyone is actively working on this and is closer than the last reported progress, let me know if you want to collaborate on it or if I should wait

[floriandotpy]

@nnjpp Why is that UI toolkit you're building not possible with LESS?

Current state is that we've started working on a SASS port which will come with the new UIkit 3.0. As the whole codebase will be restructured for that there will not be an official sass port for the 2.9 version. And also, there's no official timeframe announced at this point. Link to official announcement blog post: http://yootheme.com/blog/2014/08/08/whats-up-yootheme

[nkpz]

It could use LESS. Sass/Compass is a personal preference that I'm a lot more familiar with and it could potentially end up being implemented in a project with a large existing Sass codebase

3.0 looks like it's going to be awesome and I'll be keeping an eye on it. I think for now I'll base things off of 2.9 to get some momentum going on my end.

[dikaio]

+1 @nnjpp

[saschadube]

Hi guys, finally we have a Sass port!

[dokdeleon]

cool!

[waynoss]

Great work thanks

On 7 October 2014 01:35, saschadube notifications@github.com wrote:

Hi guys, finally we have a Sass port
https://github.com/uikit/bower-uikit/tree/master/scss!

—
Reply to this email directly or view it on GitHub
#260 (comment).

[chogarcia]

awesome!

[easingthemes]

Great news, thanks. Uikit is again no.1

[nick-bulll]

Hey guys, would be great if the Sass fork was more accessible - this is the only place I've found a project contributor link to an official Sass version of UIKit, and Googling "UIKit Sass | UIKit Scss", while this page is the second link, this page's title/the repo's name doesn't give much away.

Perhaps you could add a link in the markdown, would make it much easier to find!

[malles]

http://getuikit.com/docs/documentation_less-sass.html should do, I think. It appears to be the first hit on my Google..

[nick-bulll]

@malles ahaha... Yes i think a whole page is more than okay... my bad, no idea why that isn't the first result for me.

[malles]

My Google is UIkit biased, I have a history there

[vuchl]

@malles' Uikit google fu is strong :D

[yhaow]

+++1

[floriandotpy]

@yhaow +1 for what? The sass port is available already :) http://getuikit.com/docs/documentation_less-sass.html

[chogarcia]

+1 for the sass port and another +1 for you guys! : )