SASS如何选中类的所有直接子元素及存在前置相邻兄弟的元素

你给出的原生CSS逻辑可以直接在SASS中运行，借助SASS的父选择器&可以优化嵌套写法，避免重复书写父类名，更符合SASS的开发规范，优化后代码如下：

.split {
  flex-direction: row;
  // 选中所有直接子元素
  & > * {
    flex-basis: 100%;
  }
  // 选中所有前面存在相邻兄弟元素的同级直接子元素
  & > * + * {
    margin-left: 2em;
  }
}

选择器说明 #

• & > *：其中&代表父选择器.split，>表示仅匹配直接子元素，*是通配符，组合后完全匹配.split的所有直接子元素
• & > * + *：+是相邻兄弟选择符，要求当前元素前面紧挨着一个同级元素，组合后即匹配除第一个直接子元素之外的所有同级直接子元素，用来实现同级元素的左侧间隙效果

搭配你给出的HTML结构使用时，所有.split下的li元素都会被设置flex-basis: 100%，第二个及后续的li元素会自动增加2em的左侧外边距，实现横向排列的均匀分隔效果。

内容的提问来源于stack exchange，提问作者ksantos