如何为Sass写出的代码增加更大的复杂度

Less与Sass在前年几乎是风头最猛的两种美工时髦玩具，它提供了一种所谓的变量与继承机制，二次过度定义了原本就有类似概念的CSS。但是，由于样式表本身带有标记语言的常见特征，这种类似语言转换编译器的内容无疑大大增加了开发成本，在新鲜的浪潮过去之后，留给当年大力推广的开发公司的是无尽的痛苦和混乱的管理，而仍然在狂热的美工似乎忘记了决定语言的重点之一就是语义，基于陈述性语义的样式表注定不需要Sass这种二次编译的产物。

但是，这又能否能说明Sass已经走到了末路，逐渐消亡了？大错特错，经过日常的改造，Sass的规则和诱导，几乎可以让我们写出最难以维护的样式表。

Sass有一种神器被称作!default，它拥有最高优先权，简单说与CSS 1.0就被提出的!important有异曲同工之妙，但是由于Sass的所有样式描述都是可以基于变量的，于是开发人员可以通过滥用这条语句，为开发增加更多的挑战。

比如我们先以美工最喜欢使用Sass的原因——方便颜色管理为由，少年A将下列代码文件保存为main.scss：

      $gray: #eee !default
      $dark-gray: #8d8d8d !default

接着，有一个倒霉蛋B哥参与了工作，经过了Sass基础的教育，B哥决定定义完变量，之后想起来应该要引入我们的基础样式文件：

      $gray: #8d8d8d
      @import 'main'

现在文件内的所有变量gray被错误替换成了#8d8d8d的颜色，但这并不算完，我们的源头开发者A君再次用Sass-lang更新了自己的代码，他将两个看起来差不多的变量合并成了一个list，并且为主站声明了一个这次开发常用到的文字阴影样式：

      $gray: #eee !default, #8d8d8d !default
      $formal_pixel: 1px, -1px
      @mixin text($value: red 0 1px 0) 
            text-shadow: $value
      
      @include text(text-shadow(nth($formal_pixel,2) nth($formal_pixel,2) 0 nth($gray,1), nth($formal_pixel,1) 2px 0 nth($gray,2)))

A君现在觉得自己非常有编程的感觉，被自己帅到了。而此时的B哥仍然不知道发生的事情，在阅读完文档之后，B哥也逐渐找到了感觉，将一个重复复制粘贴的样式写出了符合Sass风格的代码：

      @if lightness($color) > 30% 
            @for $i from 1 to 10 .border-#{$i border: #{$i}px solid $gray
      else
            background-color: $gray
      

我们可以看到，这时候$gray作为错误的源头，实际上已经几乎不重要了，原本简单粗暴的CSS样式，已经彻底升级为一种无交流结对编程的噩梦。即使毫无出错，拥有完善的约定俗成，在一个使用Sass的团队中，最后编译很可能经常可能要面对长达几百行以上类似这种风格的代码，重复的调试与修正让原本就被大括号占领的层级关系变得更加复杂，原本只是单调机械的美工有了更加编程一般的挑战（吃屎）与感觉（吃屎）。

现在，深吸一口气一起赞美Sass，保佑那些还在使用Sass的团队，God bless complex.