Remove dependency on fourseven:scss

[nickw]

1. Remove dependency on fourseven:scss
2. Update README to include examples for fourseven:scss and arsnebula:sass

[lorensr]

+1 :)

[rizkysyazuli]

+1

i wanted to use the ruby sass so bad.

[dcsan]

i started converting to stylus but ran into a ton of errors on the autoconverted output

dcsan@0fc455b

not sure if this is one global errors, but fixing this amount of glitches on every upstream pull isn't manageable

[MacNCheeze]

I converted this package and the icon package to stylus:
-https://github.com/koolaid1551/ionic-stylus
-https://github.com/koolaid1551/ionicons-stylus

Thanks to @dcsan for the initial work.
Below are are some Issues/Caveats

Issues

• The stylus package is out of date and was causing some of the errors.
  • I put a pull request in to update them (Update the stylus package to the latest version meteor/meteor#3749)
  • Currently using s-jeet (https://github.com/juliancwirko/meteor-s-jeet)
• Default variables weren't converted properly, they should be $light ?= #fff not $light = #fff !default(which calculates to $light = #fff false)
• Stylus doesn't need the # in front of curly bracket variables i.e. #{$ionicons-prefix}
• I disabled the Transformation Mixins as they were causing infinite loops. I modified the code to not rely on these mixins
• Stylus doesn't like background-size: 100% 1px for some reason so i used background-size: '100% 1px'
  -@Keyframes doesn't convert properly for example @keyframes superScaleIn converts to @keyframe
• Multi-line selectors didn't maintain their indentation. Line 114 to 119 of you _bar.styl is a good example of this(https://github.com/dcsan/ionic-sass/blob/master/stylus/_bar.styl)

Incorrect conversion

    &.button-icon:before,
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before
      padding-right: 2px

Correct conversion

    &.button-icon:before,
    .icon:before,
    &.icon:before,
    &.icon-left:before,
    &.icon-right:before
      padding-right: 2px

Caveats

• The colors are not calculated to an exact match
• Some pixels are not calculated to an exact match (i.e. 9.5px vs 10px)
• Some browser prefixes aren't added

Although I tested this with the contacts demo and everything looked great.

[nickw]

Nice work @koolaid1551! This is a great alternative to the SCSS package(s), I'll add a note to the README.

[dcsan]

this is great @koolaid1551 !
the fixes you made above, is this something you had to do manually, or did you tweak the converter?

I was using sass2stylus
https://github.com/dcsan/ionic-sass/blob/master/bin/convert.sh
which has its own problems

doing manual conversions each time we want to pull upstream will be quite a hassle...

[MacNCheeze]

@dcsan

I did the fixes manually but I was looking into fixing the converter so there wouldn't be a manual conversion each time. At some point I was hoping to submit a pull request to the ionic framework itself. It seems that the Ionic Team might already has its own thoughts of doing this (http://forum.ionicframework.com/t/converting-scss-to-stylus/2277/3).

The odd part is that the major issues(i.e. the indent issues and the curly bracket variables) seem to work correctly when going to http://sass2stylus.com/ (https://github.com/paulcpederson/sass2stylus/ is an all ruby fork of https://github.com/mojotech/sass2stylus/). The rest of the issues seem pretty straight forward to fix. However there is going to have to be some code modifications around the Transformation Mixins piece. If ionic is really open to having a stylus port as well, I'm sure they would be open to a little bit of rework in that area.

Also I found out that the colors differences can be fixed by removing the percent in the darken and lighten functions, as Stylus has two was of calculating this(which is stated in the docs). Fortunately with or without the percent in sass compute to the same color.

Stylus

$dark?=#387ef5
body{
  color: darken($dark, 20) // Computes #0a4cbd, which matches sass
  color: darken($dark, 20%) // Computes #0c5ce5, which is the way that its written currently
}

SASS

$dark: #387ef5 !default;
body{
  color: darken($dark, 20); // Computes to #0a4cbd
  color: darken($dark, 20%); // Computes to #0a4cbd
}

[dcsan]

unfortunately seems they're set on scss
ionic-team/ionic-framework#3100 (comment)