1模块化

  • 每个模块必须是一个独立的样式文件，文件名与模块名一致；
  • 模块样式的选择器必须以模块名开头以作范围约定；

假定有一个模块如前文 HTML模块化，那么 m-detail.scss 的写法大致如下：

  1. .m-detail {
  2.     background: #fff;
  3.     color: #333;
  4.     &-hd {
  5.         padding: 5px 10px;
  6.         background: #eee;
  7.         .title {
  8.             background: #eee;
  9.         }
  10.     }
  11.     &-bd {
  12.         padding: 10px;
  13.         .info {
  14.             font-size: 14px;
  15.             text-indent: 2em;
  16.         }
  17.     }
  18.     &-ft {
  19.         text-align: center;
  20.         .more {
  21.             color: blue;
  22.         }
  23.     }
  24. }

编译之后代码如下：

  1. .m-detail {
  2.     background: #fff;
  3.     color: #333;
  4. }
  5. .m-detail-hd {
  6.     padding: 5px 10px;
  7.     background: #eee;
  8. }
  9. .m-detail-hd .title {
  10.     background: #eee;
  11. }
  12. .m-detail-bd {
  13.     padding: 10px;
  14. }
  15. .m-detail-bd .info {
  16.     font-size: 14px;
  17.     text-indent: 2em;
  18. }
  19. .m-detail-ft {
  20.     text-align: center;
  21. }
  22. .m-detail-ft .more {
  23.     color: blue;
  24. }

任何超过3级的选择器，需要思考是否必要，是否有无歧义的，能唯一命中的更简短的写法