How to implement this sticky footer in a modular way in sass?

Question

I'm using the James Dean of sticky footers. It requires styles to be applied to the <html>, <body> and <footer>. Now I'm using sass to write my css, and I'd like to implement this footer as modular as possible. Preferably like this for example:

footer {@extend %sticky-footer;}

However, if I do that I would still need to style the <html> and <body> tags. Scss does not have some sort of parent selector for that that I can use as far as I know. So is there a way to do this with sass (in scss) in a modular way, preferably with @extend? (there is an example on codepen)

To be clear: I'm not asking for a parent selector. I'm asking for a modular way to implement this footer with scss.

Related: http://stackoverflow.com/questions/16285561/is-there-a-way-to-use-scss-to-emulate-previous-sibling-selection and http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — cimmanon, Oct 10 '13 at 11:57
@cimmanon I don't think these are related. I'm not asking for a parent selector (quote: *Scss does not have some sort of parent selector for that that I can use as far as I know.*). Check my comment to your answer. — , Oct 10 '13 at 12:17

cimmanon · Accepted Answer · 2013-10-10T12:54:42.897

0

This is not possible. Sass is strictly a language that is compiled to CSS, it has no knowledge of the DOM and makes no assumptions about your markup. What you're asking for would have to be a function of CSS in order for this to work.

There is a parent selector in CSS, but it is not supported in any browser at this time.

The closest you can get is something like this:

html%sticky-footer {
    position: relative;
}

body%sticky-footer {
    margin: 0 0 100px 0;
}

footer%sticky-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

html, body, footer {
    @extend %sticky-footer;
}

edited Oct 10 '13 at 12:54

answered Oct 10 '13 at 12:01

cimmanon

67,211
17
165
171

You're misunderstanding me. It's not that I'm asking for a parent selector, I know that that isn't possible as of yet. What I'm asking for is a self contained (modular) way of adding styles to the html, body and footer. A mixin would do this for sure, but I was wondering if this would be possible with @extend. – Oct 10 '13 at 12:15
There's no good reason to do it with extends. Extend only works on the element you're extending from, you would have to use an extend in each and every selector that should have the styling you want. Extend also makes it a pain to reuse since you cannot pass it variables. Extend can also be inefficient (see: http://codereview.stackexchange.com/a/27910) – cimmanon Oct 10 '13 at 12:56
Ok, so the only way to do this with an extend is to make one that is applied to the html tag basically. Btw. I'm not worried about passing variables since I'll only use one sticky footer, and the efficiency isn't a problem either since it's a very small website. – Oct 10 '13 at 13:00
I guess that it isn't really necessary as well to abstract a class like this when I'm only using it in one spot. Anyway, thanks for the help! – Oct 10 '13 at 19:19

How to implement this sticky footer in a modular way in sass?

1 Answers1