Sass 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

嵌套-选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。

在选择器嵌套中,可以使用&表示父元素选择器

Sass style

#top_nav{
  line-height: 40px;
  li{
    float:left;
  }
  a{
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

CSS style

#top_nav{
  line-height: 40px;
}
#top_nav li{
    float:left;
}
#top_nav a{
    padding: 0 10px;
    color: #fff;
}
#top_nav a:hover{
      color:#ddd;
}
请最终编译CSS是这样的 #top_nav a{ padding: 0 10px; color: #fff; } #top_nav a:hover{ color:#ddd; },用sass语法练习下。