31 ms·
> Or how about repeated blocks of styles that are used in various locations throughout the stylesheet? p { margin-bottom: 20px; font-size: 14px; line-heigh
by axblount 13y ago
> Or how about repeated blocks of styles that are used in various locations throughout the stylesheet?
p {
margin-bottom: 20px; font-size: 14px; line-height: 1.5;
}
footer {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
I don't know why this situation is a such a common example of the need for SASS & company. It's easily addressable with plain ol' CSS. No mixins required.
p, footer {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
- IceyEC 13y agoSo how would you reduce this version: p { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } footer { position: fixed; margin-bottom: 20px; font-size: 14px; line-height: 1.5; }
- shawabawa3 13y agop, footer { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } footer { position: fixed; } btw I'm totally pro less/sass, but that example sucked :p
- axblount 13y agop, footer { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } footer { position: fixed; }
- toggle 13y agoI think doing it with SASS makes it cleaner when there are some differences between p and footer. So, instead of this CSS: p, footer { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } p { text-align: justify; } footer { border: 1px solid black; } You could do this SASS: @mixin default-type { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } p { @include default-type; text-align: justify; } footer { @include default-type; border: 1px solid black; } I like that last one better. It's like everything that describes what the footer looks like can be contained in the single footer block, rather than having many parts of your stylesheet apply to the footer and saying "this applies to both p and footer."