Port pubcss from LESS to Sass

[0xadada]

With the industry moving away from LESS and closer to Sass (Bootstrap v4 coming out in Sass), it looks like the industry heavyweights are placing their bets on Sass.

I'd be interested in issuing a PR for release 0.3.0 with the following.

1. Porting code from LESS to Sass
2. Implementing a build system (Grunt, Gulp, etc)
   • Reduce vendor-prefixes with autoprefixer
3. Publishing pubcss in the bower package registry.

🚀

[thomaspark]

Totally cool with moving to Sass. A build system would make things much more user-friendly, and Gulp would be my preference as well. Would be a great contribution! 👍

[cbleslie]

Hey @thomaspark, I am not sure if you have abandoned this project, but I have a preliminary version of PubCSS ported to SASS, at https://github.com/cbleslie/pubcss, It's in a good state as far as having gulp build and watch, but I need help with counters, as you do some tricky Less variable authoring in recursion. Sass doesn't handle fun stuff like variable concatenation so well, so it might be best to generate it using maps.

As of this moment:

• code is mostly ported
• build system is done in gulp, we just need to add autoprefixer... easy to do
• Bower is deprecated, but we can set it up so the css is digestible via NPM if needed.

[thomaspark]

Hi @cbleslie, nice work on the sass port and build system! I'll dig in and see how counters could be done.

[cbleslie]

@thomaspark , one way would be to just make an array and use nth($array, $i) https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass

[thomaspark]

@cbleslie, that looks like the way to go. In fact it should be cleaner than the old recursive approach.

Are you able to get .generate-counter-content working with it? That's probably the most complex mixin to deal with.

[cbleslie]

@thomaspark ,
I sort of got it working. My biggest concern with doing it myself is:

• I don't want to mess up the formatting. I am not entirely familiar with all the formats.
• I'm not super current on counters, and this mixin provides support for, I guess, the multi level counters.

It might take me a while. I can push what I have now. but it's pretty butchered, or at least, it's not perfect. I might be better off pushing what I have and letting you, if you're willing, taking a look at it.

[cbleslie]

@thomaspark,
In my fork, on branch feature/counters, you'll find my broken attempt. Full disclosure, it's bad.
https://github.com/cbleslie/pubcss/blob/feature/counters/src/tools/_counter.scss#L24
https://github.com/cbleslie/pubcss/blob/feature/counters/src/settings/_acm-sig.scss#L74

[thomaspark]

@cbleslie, made some progress with it. The unquote function and a second map for counter ids were helpful. $counter-ids can also be used in counter resets etc.

In _acm-sig.css:

$counter-ids:
  'section',
  'subsection',
  'subsubsection',
  'subsubsection',
  'subsubsubsection',
  'subsubsubsubsection';

$counter-styles:
  'decimal', //h1
  'decimal', //h2
  'decimal', //h3
  'decimal', //h4
  'decimal', //h5
  'decimal'; //h6

And then in _counter.scss:

@mixin generate-counter-content($i: 1, $s: '', $p: '') {
  @if $i < 7 {
    $parent: $p;
    $counter: unquote(nth($counter-ids, $i));
    $counter-style: unquote(nth($counter-styles, $i));
    $string: $s counter($counter, $counter-style) $counter-header-separator;
    $content: $counter-header-prefix $s counter($counter, $counter-style) $counter-header-suffix;

    #{$parent} h#{$i}:not(.counter-skip)::before {
      content: $content;
    }

    @include generate-counter-content($i + 1, $string, $parent);

  }
}

Output:

h1:not(.counter-skip)::before {
  content: "" "" counter(section, decimal) ""; }

h2:not(.counter-skip)::before {
  content: "" "" counter(section, decimal) "." counter(subsection, decimal) ""; }

h3:not(.counter-skip)::before {
  content: "" "" counter(section, decimal) "." counter(subsection, decimal) "." counter(subsubsection, decimal) ""; }

h4:not(.counter-skip)::before {
  content: "" "" counter(section, decimal) "." counter(subsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsection, decimal) ""; }

h5:not(.counter-skip)::before {
  content: "" "" counter(section, decimal) "." counter(subsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsubsection, decimal) ""; }

h6:not(.counter-skip)::before {
  content: "" "" counter(section, decimal) "." counter(subsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsubsection, decimal) "." counter(subsubsubsubsection, decimal) ""; }

[cbleslie]

@thomaspark I've implemented your fix, rendering wise, it looks good! But for some reason, the counters are not counting :(

[thomaspark]

@cbleslie, using your nth() approach for generate-counter-increments() and generate-counter-resets() did the trick:

@mixin generate-counter-increments($i: 1) {
  @if $i < 7 {
    h#{$i}:not(.counter-skip) {
      counter-increment: unquote(nth($counter-ids, $i));
    }

    @include generate-counter-increments($i + 1);
  }
}

@mixin generate-counter-resets($i: 1) {
  @if $i < 7 {
    h#{$i}.counter-reset {
      counter-increment: unquote(nth($counter-ids, $i));
    }

    @include generate-counter-resets($i + 1);
  }
}

[thomaspark]

Done in #10!

[0xadada]

great work everyone! 🎉