SCSS nesting with ampersand not working as expected

Question

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?

Answer 1

您的嵌套很好，您在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;
  }
}