在scss中注释模块结构

本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载

一般来说，有重构的团队，工作流程是这样的：设计师出稿 > 重构转静态页面 > jser拉取数据实现交互等 ...这样我们总是有静态页面在备份的，下次遇到修改什么的或者换一个人，还是可以由这个简单的静态页面熟悉下html结构。

而没有重构或一个人一条龙服务的，那就是：设计师出稿 > 边写页面边拉取数据实现交互...这种模式下，是不存在静态页面备份的，如果碰到修改什么或者换人，那看到的直接就是源代码中的各种逻辑判断，如果是你自己写的代码那恭喜你，如果不是的话要不就连猜带蒙要不就咬紧牙关啃吧，当然最后还是免不了各种bug。

最近因为改版一个模块，所以想去改善下这种方式，经过各种弯路，最后选择在scss文件中注释html结构。因为scss是按模块组织文件的，一个模块一个scss文件，所以这是非常合适的。

以腾讯课堂课程卡片模块为例：

可以看出这个模块存在几种逻辑判断，每种都有些小差异，如果另外一个地方要用到这个卡片或者略做修改，你要从线上扒html结构的话，要想扒出个齐全的逻辑还是比较困难的，而如果让你去阅读源码，里面各种判断输出也够头大的。

下面为我在scss文件中注释的结构：

是不是结构清晰明了，各种逻辑判断一目了然

简单说下该注释方法：

• 以emmet书写方法为骨架
• ()表示特殊化追加的class，[]表示需要的属性，｛｝表示标签内的文本内容
• 单行判断采用单行注释法，以if开头
• 多行判断采用if,else,end if

当然这中方法也有局限性，但是用在以模块化开发的scss文件中却是再好不过。