I have a JSFiddle, https://jsfiddle.net/khpeek/3gh0r931/43/, in which I'd like to toggle the visibility of up/down Materialize arrow icons based on the class of the parent element (which is set to asc
or desc
by a jQuery plugin, list.js
).
I've noticed that the following nesting pattern doesn't work:
.sort.asc > i.material-icons {
&.upper::after {
content: "arrow_drop_up";
}
&.lower::after {
content: "";
}
}
.sort.desc > i.material-icons {
&.upper::after {
content: "";
}
&.lower::after {
content: "arrow_drop_down";
}
}
However, if I 'write out' the nesting like so,
.sort.asc > i.material-icons.upper::after {
content: "arrow_drop_up";
}
.sort.asc > i.material-icons.lower::after {
content: "";
}
.sort.desc > i.material-icons.upper::after {
content: "";
}
.sort.desc > i.material-icons.lower::after {
content: "arrow_drop_down";
}
Then I get the intended behavior. (This code is commented-out in the JSFiddle). (I still want to position the icons on top of each other to make a 'diamond' similar to https://www.datatables.net/, but that's a separate issue).
What is wrong with the 'nested' form of this SCSS expression?
答案 0 :(得分:2)
您的嵌套很好,您在mystring = 'hello new york foo'
locations = ['new york', 'dallas']
for location in locations:
if location in mystring:
print(location)
>new york
行之后只有语法错误:
font-size
你可能意味着这个:
i.material-icons {
position: relative;
font-size: $th-font-size * 2;
{
&.upper: margin-top: -$th-font-size/2;
&.lower: margin-bottom: -$th-font-size/2;
}
}