SASS implementation

[hackur]

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Other... Please describe:

What is the current behavior? (You can also link to an open issue here)
We use LESS for stylesheets.

What is the new behavior?
I've changed it to use SASS for our stylesheets since that's what the latest Laravel uses.

Does this PR introduce a breaking change?

• Yes
• No

Other information:

There are a few small little cleanup optimizations to the basic CSS.

I also changed the way we import files into the component *.scss files to use different relative paths (@import "../../../material/project"; instead of @import "./angular/material/project";). I did this mostly because it resolves properly in my IDE. I tested the gulp && gulp watch and it still seems to function properly.

[hackur]

I also have a second branch I'm using to build my website with that I merged with your feature-pwa branch. So it uses service workers and has all of my SASS changes.

Also, I have a branch of laravelangular/generators that uses SCSS that I will be creating a pull request for soon. That's assuming you're even interested in switching from LESS to SASS.

If not, feel free to close this :). Thanks for the awesome project!

[odyright]

Yes it would be great for those who want to use SASS/SCSS. Release date?

[jadjoubran]

@hackur Thanks for this! Yes indeed SASS is always a better alternative
I'm going to highlight a few CSS changes in the diffs that shouldn't go through, I think they were committed by mistake
And then I'll be able to merge this one and the generators'
@odyright it'll be released with the next version which will release a beta very soon 😄

[jadjoubran]

here

[hackur]

I looked around for text-transform: box-shadow and it does nothing. I thought maybe I was wrong but I looked it up again and there is no "box-shadow" value for text-transform.

All I could guess was that the original designer intended to use transition since there is a 250ms in the line.

See:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transition
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform

[jadjoubran]

You're absolutely right.. I have no idea how I skipped that 😛
Thanks!

[jadjoubran]

I just noticed that since this breaks a backward compatibility issue, it's better to send it against feature-pwa unless you can suggest a better way to handle it

[hackur]

How do you test backwards compatibility @jadjoubran? By merging this into one of your existing projects? We can always add the less mixes back in (supporting both for now, but generating scss from this point on) or I can create a pull request for your PWA branch. I'm currently using that one with service workers to create my site. Let me know - we can also do both :)

---

Also, is there a way for you to retry or re-run this failed Travis CI build? I'm not sure how that works with Travis CI. The error seems to be related to some kind of server timeout error that only happened with the HHVM build.

https://travis-ci.org/jadjoubran/laravel5-angular-material-starter/jobs/141021483#L686

npm ERR! network read ECONNRESET
npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.

[jadjoubran]

Refreshed it and it works now.. it happens frequently on travis
For backwards compatibility: how easy is it for users who already started using this starter to upgrade?
We're switching between LESS and SASS.. Although they're almost the same, some people might not be able to easily switch
3.3.0beta will be tagged soon (after merging feature-pwa) so there's no need to merge this on master before
Thanks!

[hackur]

They would need to:

1. Change any references to variables from @variable_name to $variable_name.
2. Rename their *.less files to *.scss. I used this little ZSH shortcut:

autoload -U zmv
cd YOUR-PROJECT-DIRECTORY/angular
zmv '(**/)(*).less' '$1$2.scss'

That's pretty much it. There isn't much advanced LESS or SASS used in the default styles so it makes it pretty easy.

However... if we just left in the less mixes... then nothing would break at all. But our gulp task would be doing extra work for no reason if we were only using SASS.

[jadjoubran]

That's a nice script, I'll add it to the docs!
Yes indeed the default styles are barely using functionality from LESS, but what if people who started with version 3.2 are already using LESS and some other features.. wouldn't it break?

[flick36]

But Again, not useful for windows user

This one will do for windows users
forfiles /S /M *.less /C "cmd /c rename @file @fname.scss"

[hackur]

Always forget about those dang windows users...

I use to use this on my work PC:
https://github.com/babun/babun
With ConEmu: babun/babun#381
With Cmder: https://github.com/cmderdev/cmder

Then you can use Oh My ZSH on windows.

[jadjoubran]

I'm going to merge this to master now since I'm merging feature-pwa very soon for the beta