Comments (12)
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.
Related Issues (20)
- Bitters v2.0.0 is not published to RubyGems HOT 1
- Bourbon’s `modular-scale` function is still used
- Bourbon is still imported in the contributing site
- Button's have inaccessible text color
- Use font weight variables?
- Remove duplication of normalize.css styles
- Add support for ensuring the HTML hidden attribute hides content
- Swap the term “base” for “elements”
- Add normalize.css to contributing site
- In Safari, search inputs are a different height
- Replace gulp with Parcel
- Buttons, links styled as classes instead of elements HOT 1
- Add `height: auto` to `img`
- Deploy preview site to Netlify for deploy previews HOT 1
- Releasing command not working
- Improve testing
- Document browser support
- Add more post-publish steps to releasing documentation
- Netlify site not building HOT 1
- CI fails due to bundler version
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bitters.