Feature request: ability to prepend a selector
266 views
Skip to first unread message
wheresrhys
Oct 6, 2011, 5:12:52 AM10/6/11
to Sass
Given the current vogue for feature detection javascript libraries
which add classes to the <html> tag, I reckon the following might be a
useful (and maybe not too difficult to add) feature for SASS.
Imagine a scenario where you have some nested SASS rules for an
element, but want these changed if the browser doesn't support a
certain feature. With current SASS you would need to do something like
the following
#page {
//some rules
.video {
display: block;
}
}
html.no-html-video {
#page {
.video {
display: none;
}
}
}
But if sass had a "prepend to the selector string" operator (I'll use
^, though this may not be a sensible choice) you could do the
following
#page {
//some rules
.video {
display: block;
}
^html.no-html-video { // equivalent to html.no-html-video
#page .video
.video {
display: none;
}
}
}
In the example I've given the difference isn't very striking, but when
you get into several levels of nested rules it could be very useful
for keeping the CSS statements well-organised and more easily
maintainable as you only have to have one copy of the nested CSS
selectors.
which add classes to the <html> tag, I reckon the following might be a
useful (and maybe not too difficult to add) feature for SASS.
Imagine a scenario where you have some nested SASS rules for an
element, but want these changed if the browser doesn't support a
certain feature. With current SASS you would need to do something like
the following
#page {
//some rules
.video {
display: block;
}
}
html.no-html-video {
#page {
.video {
display: none;
}
}
}
But if sass had a "prepend to the selector string" operator (I'll use
^, though this may not be a sensible choice) you could do the
following
#page {
//some rules
.video {
display: block;
}
^html.no-html-video { // equivalent to html.no-html-video
#page .video
.video {
display: none;
}
}
}
In the example I've given the difference isn't very striking, but when
you get into several levels of nested rules it could be very useful
for keeping the CSS statements well-organised and more easily
maintainable as you only have to have one copy of the nested CSS
selectors.
Nathan Weizenbaum
Oct 6, 2011, 4:06:03 PM10/6/11
to sass...@googlegroups.com
You can do this using the parent selector; e.g. "html.no-html-video &".
--
You received this message because you are subscribed to the Google Groups "Sass" group.
To post to this group, send email to sass...@googlegroups.com.
To unsubscribe from this group, send email to sass-lang+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/sass-lang?hl=en.
wheresrhys
Oct 7, 2011, 4:32:22 AM10/7/11
to Sass
So you can - thanks for the pointing it out
wheresrhys
Oct 7, 2011, 5:21:54 AM10/7/11
to Sass
But here's an interesting case, when combining with @extend :
.full-height-carousel {
html.xlarge & { height:775px; }
html.large & { height:620px; }
html.medium & { height:493px; }
html.small & { height:432px; }
}
article#main #pages.generic-carousel {
div.carousel-wrap{
float:left;
width:100%;
position:relative;
@extend .full-height-carousel;
}
}
results in e.g.
html.xlarge .full-height-carousel,
html.xlarge article#main #pages.generic-carousel div.carousel-wrap,
article#main #pages.generic-carousel html.xlarge div.carousel-wrap {
height: 775px;
}
The last selector is unexpected. Again, is this a bug (with @extedn
rather than &)?
Rhys
.full-height-carousel {
html.xlarge & { height:775px; }
html.large & { height:620px; }
html.medium & { height:493px; }
html.small & { height:432px; }
}
article#main #pages.generic-carousel {
div.carousel-wrap{
float:left;
width:100%;
position:relative;
@extend .full-height-carousel;
}
}
results in e.g.
html.xlarge .full-height-carousel,
html.xlarge article#main #pages.generic-carousel div.carousel-wrap,
article#main #pages.generic-carousel html.xlarge div.carousel-wrap {
height: 775px;
}
The last selector is unexpected. Again, is this a bug (with @extedn
rather than &)?
Rhys
Reply all
Reply to author
Forward
0 new messages