problem with list rendering about bitters HOT 12 CLOSED

It's a SASS extend-only selector. See docs

ul.default {
  @extend %default-ul;
}

ol.default {
  @extend %default-ol;
}

becomes:

ul.default {
  list-style-type: disc;
  margin-bottom: 0.75em;
  padding-left: 1.5em;
}
ol.default {
  list-style-type: decimal;
  margin-bottom: 0.75em;
  padding-left: 1.5em;
}

from bitters.

Okay, so &%default-ul is shorthand for @extend %default-ul, is that correct?

I installed bourbon, neat and bitters, created a page with the source code from and the resulting page is missing the styling (see screen shot below).

When the page renders and inspect the resulting css I get the code

/* line 1, /home/gcman105/.middleman/middleman-neat/source/stylesheets/base/_lists.scss */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none; }

My sass file is just

@charset "utf-8"

@import "normalize"

$visual-grid: true
$visual-grid-color: yellow
$visual-grid-index: front
$visual-grid-opacity: 0.1

@import "bourbon/bourbon"
@import "base/grid-settings"
@import "neat/neat"
@import "base/base"

@import "_partials/footer"

body
  /* background: #d4d4d4 url("../images/background.png")

#wrap
  @include outer-container

.welcome
  @include span-columns(8)

Html of page in this Gist

I'm not sure where things are going wrong.

from bitters.

Please take a look at this Sassmeister Gist

from bitters.

@gcman105 The &% scopes those extends styles just to ol and ul so that they can only be used on those elements. See your example updated: http://sassmeister.com/gist/374928d982b576135084

from bitters.

@kylefiedler Okay cool, however my original code was taken directly from this and the html clipped from part of this page source so am I still missing something? Please take a look at an update of your code which add in a bit more from the html source http://sassmeister.com/gist/4ed2d1088205a4844dc1 Now the numbering and bullets show up on all lists, not as in the Bitters example page

from bitters.

@gcman105 that is because you are extending those styles on all lists. You can specify to something like:

ul.default {
@extend %default-ul;
}

ol.default {
@extend %default-ol;
}

We do this on the example page here: https://github.com/thoughtbot/bitters/blob/gh-pages/_sass/_example.scss#L5

from bitters.

@kylefiedler thanks the penny is finally dropping!

from bitters.

@gcman105 So, all good? Can this be closed?

from bitters.

This is confusing me too.

My assumption (which I'm starting to think is wrong) based on the biitters example page is that

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0  $base-spacing;
  &%default-ul {
    list-style-type: disc;
    margin-bottom: $small-spacing;
    padding-left: $base-spacing;
  }

  &%default-ol {
    list-style-type: decimal;
    margin-bottom: $small-spacing;
    padding-left: $base-spacing;
  }
}

would compile to

ul,ol {
  margin: 0;
  padding: 0;
  list-style-type: none
}

ul.default {
  list-style-type: disc;
  margin-bottom: 0.75em;
  padding-left: 1.5em
}

ol.default {
  list-style-type: decimal;
  margin-bottom: 0.75em;
  padding-left: 1.5em
}

That CSS is what is in the example page's style sheet, but not what I'm getting from bitters which is just

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 1.5em; }

I'm guessing the SCSS for the example page actually looks like this, not what's in the repo:

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0  $base-spacing;
  &%default-ul {
    list-style-type: disc;
    margin-bottom: $small-spacing;
    padding-left: $base-spacing;
  }

  &%default-ol {
    list-style-type: decimal;
    margin-bottom: $small-spacing;
    padding-left: $base-spacing;
  }
}

ul.default {
  @extend %default-ul;
}

ol.default {
  @extend %default-ol;
}

Yes?

Like so: http://sassmeister.com/gist/d516b9292ebac09dee94

from bitters.

For newbies it'd help if this was better explained, or if bitters _lists.scss was actually what was used on the example page.

from bitters.

@jb510 The Bitters _lists.scss is what is being used on the example page. When using a placeholder selector, selectors that start with % Sass won't compile the styles till it is extended to another non-placeholder selector. So in this case until you extend %default-ul and %default-ol there will be no added CSS output. You can look at the example page scss that was linked above here: https://github.com/thoughtbot/bitters/blob/gh-pages/_sass/_example.scss#L5 In order to show those styles we need to add those selectors otherwise they would look just like the other non-styled lists.

I would encourage you to read the documentation on placeholder selectors here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_

from bitters.

Kyle. Thanks. I fully understand how it works. I didn't initially, but as you can see in the sassmeister link above I figured it out. Do you understand why it is confusing to newbies though?

I, and I suspect many, would assume the example page just used _lists.scss. The output shown on the example page it clearly doesn't. It uses those extensions (see my sassmeister link above demonstrating the scss that is likely being used on the example page).

from bitters.