This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
How can I modify the root element of the parent selector chain? (using sass 3.3.x) Something like...
=prepend($prefix)
#at-root .#{$prefix}#{&} // note there is no dot (.) separating it
#content
.foo
.bar
+prepend(baz)
background: red
and return
.baz.foo .bar {
background: red;
}
or even better... an explicit way to target the root element (or even the nth element)?
=prepend($prefix)
&.#{$prefix}
#content
.foo
+prepend("baz")
.bar
background: red
Returns this:
.foo.baz .bar {
background: red;
}
On the right track?
Related
This question already has an answer here:
Sass extend and parent selector
(1 answer)
Closed 1 year ago.
I'd like to generate the content of a %-class within a pseudo selector. #extend works rather unexpected here. Can someone tell me how I would get the expected CSS?
My SASS
%ext
&:aaa
color: red
button
&:bbb
#extend %ext // expected: .button:bbb:aaa
Actual Generated CSS
button:aaa:bbb {
color: red;
}
Expected CSS
button:bbb:aaa {
color: red;
}
The answer is: The order doesn't matter for the resulting CSS.
Therefore: Don't mind.
I need to output this:
#footer-widgets .container .row {
background-image: url("RANDOMLY PICKED");
background-position: right bottom;
background-repeat: no-repeat;
}
... and there should be a list with 4 or 5 links to the actual background-images (http://domain.com/blablabla/image.png) to pick from. How can I do this with SASS?
The most recent version of Sass (v3.3.0) adds a new random function. If you mix that with a list of images (and a wee bit of variable interpolation), you will have CSS with a randomly selected background image every time Sass is compiled. Example:
$imgKey: random(5);
$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);
body {
background-image: "/images/#{$nth}.jpg";
}
Live example: http://sassmeister.com/gist/8966210
As above, the random value will only change when the Sass is compiled, which won't necessarily be every time your page is visited.
This question already has an answer here:
Append the parent selector to the end with Sass
(1 answer)
Closed 7 years ago.
you surely know reverse nesting in sass. So i got an advanced question for you.
.profile{
.avatar{
color: blue;
.friends &{
color: grey;
}
}
}
Compiles to:
.friends .profile .avatar {
How to get a result like:
.profile.friends .avatar {
Is there a solution with out changing the structure of the sass.
No, you must change the structure of the Sass. The upcoming #at-root feature can partially unwind selectors, but it will not work in this instance.
This question already has an answer here:
cycling through a list of colors with sass
(1 answer)
Closed 7 years ago.
I have 4 list items that I each need a different background colour on.
I can put my 4 different colour variables in a Sass list and each through them as $color but in the content block of that loop I obviously need to specify which <li> I am talking about using :nth-of-type 1, 2, 3 or 4.
I'm not sure how to specify which <li> I need on each turn of the loop.
Any ideas?
This should do the trick:
$colors: (#000, #F00, #0F0, #00F);
#for $i from 1 through length($colors) {
li:nth-of-type(#{$i}) {
background: nth($colors, $i);
}
}
It produces:
li:nth-of-type(1) {
background: black; }
li:nth-of-type(2) {
background: red; }
li:nth-of-type(3) {
background: lime; }
li:nth-of-type(4) {
background: blue; }
Here is the SASS code part:
#main-nav{
>ul{
blahblah
}
}
So I want to know the exact mean of the string ">ul" means? I cannot find it in the SASS manual.
Furthermore, can it be translated to stylus?
This the CSS syntax to select the child of an element. See this reference for more on how it works:
This selector matches all elements that are the immediate children of
a specified element. The combinator in a child selector is a
greater-than sign (>). It may be surrounded by whitespace characters,
but if it is, Internet Explorer 5 on Windows will incorrectly treat it
as a descendant selector. So the best practice is to eschew whitespace
around this combinator.
#main-nav {
> ul {
color: red;
}
}
The same in CSS:
#main-nav > ul { color: red }
About > selector you can read here http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ (#8)