用sass画蜗牛

一.sass的好处

用css画图也算是简单的实战吧，虽然用到的东西还比较少。。用过之后，发现sass主要有以下优势：

1. 可维护性。最重要的一点，可维护性的很大一部分来自变量

   嗯，最简单的例子，画图总要有前景色背景色填涂色等等一堆色值吧，用css也可以完成，但如果要修改某个填涂色可能需要先审查元素找到具体色值，再对源码Ctrl + H全文替换一遍才行。用sass的话就不用这么麻烦了，简单地改下变量的值，轻松搞定，没错，根本不用审查元素找色值那么麻烦，因为好的变量名肯定是自解释的

2. 易用性。刚刚入门用起来都很顺手

   兼容css语法，在此基础上提供扩展功能，用起来非常顺手。比如嵌套结构表示后代选择器，使用方便，容易理解，还能避免一些书写错误

3. 灵活性。难以置信的灵活

   @mixin提供了极大的灵活性，无参、多参、可选参、任意多参要比很多编程语言更加灵活，入口灵活不仅有利于代码复用，还让接口变得更加易用（不需要记一堆功能相似的函数名）

   无意中发现了一个很灵活的用法，代码如下：

   // 如果只想简单地支持1参数和4参数形式，可以这样实现
   @mixin radius ($r1, $r2: $r1, $r3: $r1, $r4: $r1) { // 注意把默认值设置为了其它形参的值，这太灵活了
     // 作为例子就不考虑兼容性了
     border-radius: $r1 $r2 $r3 $r4;
   }
   
   // 如果想实现0冗余和支持1、2、3、4参数形式，可以这样实现
   @mixin radius2 ($r...) {    // 类似于c++的语法
     $argNum: length($r);
   
     @if ($argNum == 1) {      // 1参
       border-radius: nth($r, 1);
     }
     @else if ($argNum == 2) { // 2参
       border-radius: nth($r, 1) nth($r, 2);
     }
     @else if ($argNum == 3) { // 3参
       border-radius: nth($r, 1) nth($r, 2) nth($r, 3);
     }
     @else { // 4参，再多就只取前4个
       border-radius: nth($r, 1) nth($r, 2) nth($r, 3) nth($r, 4);
     }
   }
   
   // 测试
   h1 {
     @include radius(1px);
     @include radius(1px, 2px, 3px, 4px);
   
     @include radius2(1px);
     @include radius2(1px, 2px);
     @include radius2(1px, 2px, 3px);
     @include radius2(1px, 2px, 3px, 4px);
   }

   生成的css代码如下：

   h1 {
     border-radius: 1px 1px 1px 1px;
     border-radius: 1px 2px 3px 4px;
     border-radius: 1px;
     border-radius: 1px 2px;
     border-radius: 1px 2px 3px;
     border-radius: 1px 2px 3px 4px;
   }

4. 可复用性。画过蜗牛后，画青蛙什么的将会很快

   画蜗牛只是一个很简单很独立的“项目”（额，麻雀虽小。。），所以创建了很多工具函数（@mixin），而大多数工具函数都是可以复用的，用来画青蛙、画麻雀。。当然，肯定不会局限于画画，别的地方也能用

   比如，可以有一个自动添属性名前缀的@mixin：

   // 带浏览器前缀的属性设置
   @mixin attr ($name, $value) {
     #{$name}: $value; // 注意左边要添上#{}，否则就是赋值了
     /* Firefox */
     -moz-#{$name}: $value;
     /* IE */
     -ms-#{$name}: $value;
     /* Opera */
     -o-#{$name}: $value;
     /* WebKit */
     -webkit-#{$name}: $value;
   }

5. 自解释性。或者说是语义上的好处

   变量名、@mixin名、@function名都可以语义化，如果是css就不得不添加一堆注释去解释。自解释的东西，不仅对自己好，将来对别人也好

二.画图

小蜗原图：

很简单的小蜗牛，除了圈还是圈，以前用div角角的1px拼这个不现实，但有了border-radius后，曲线什么的，太容易了

1.分解线条

用css画图，第一步肯定是把图中的线条分解成div（div比span有更大的自由度，而且没有语义，正适合干这个），说白了就是写HTML

一般规则从上到下、从左向右分解，每条线对应一个div就好了，这样分解可以很大程度上避免出现margin-left: -30px;之类的东西，让代码更具可读性

分解结果：

<!-- HTML结构 -->
<div class="wrapper">
    <!-- 小蜗整体 -->
    <div class="xiaowo">
        <!-- 头部 -->
        <div class="head">
            <!-- 眼睛-->
            <div class="eyes">
                <!-- 左眼 -->
                <div class="eye left">
                    <!--眼珠-->
                    <div class="black bleft"></div>
                </div>

                <!-- 短横线 -->
                <div class="shortHLine">
                </div>

                <!-- 右眼 -->
                <div class="eye right">
                    <div class="black bright"></div>
                </div>

                <!-- 短斜线 -->
                <div class="shortSlash">
                </div>

                <!-- 嘴巴 -->
                <div class="mouth">
                </div>
            </div>
        </div>

        <!-- 壳儿 -->
        <div class="shell">
            <!-- 内圈 -->
            <div class="innerCircle">
                <!-- 最内圈 -->
                <div class="innerinnerCircle">
                </div>
            </div>
        </div>

        <!-- 右边身体 -->
        <div class="rbody">
        </div>

        <!-- 底部身体 -->
        <div class="bbody">
            <!-- 左边短弧线 -->
            <div class="shortArc">
            </div>

            <!-- 底部长弧线 -->
            <div class="longArc">
            </div>
        </div>
    </div>
</div>

P.S.具体怎么分解，并没有太大关系，一个线条对应一个div，肯定只多不少，不妨先这样做，到时候如果发现多余了再删掉就好

2.写sass

有了HTML结构就可以直接开始写样式了，规则是从外到内、从左向右一点一点写

很简单，只是需要些耐心，1个像素1个像素、一遍一遍地调试

成品sass代码如下：

/*!
 * 小蜗 - sass
 */

// 变量
$fc: #2b2b2b;
$bc: #fafafa;
$bWidth: 7px;
$bStyle: solid;
$bColor: #2b2b2b;
// 此处透明色不考虑IE兼容，因为IE6下很难画出曲线边框，透明也没什么意义
$hidden: transparent;
$border: $bWidth $bStyle $bColor;
$_border: $bWidth $bStyle $hidden;

// 混合
// 0 ~ 无，1 ~ borderStyle，-1 ~ transparent
@mixin border($t, $r, $b, $l) {
  @if ($t == 1) {
    border-top: $border;
  }
  @else if ($t == -1) {
    border-top: $_border;
  }

  @if ($r == 1) {
    border-right: $border;
  }
  @else if ($r == -1) {
    border-right: $_border;
  }

  @if ($b == 1) {
    border-bottom: $border;
  }
  @else if ($b == -1) {
    border-bottom: $_border;
  }

  @if ($l == 1) {
    border-left: $border;
  }
  @else if ($l == -1) {
    border-left: $_border;
  }
}

// 简单起见，只支持1个参数或者4个参数形式
@mixin radius ($r...) {
  @if (length($r) == 1) {
    border-radius: nth($r, 1);
    /* Firefox */
    -moz-border-radius : nth($r, 1);
    /* IE */
    -ms-border-radius : nth($r, 1);
    /* Opera */
    -o-border-radius : nth($r, 1);
    /* WebKit */
    -webkit-border-radius : nth($r, 1);
  }
  @else {
    $r1: nth($r, 1);
    $r2: nth($r, 2);
    $r3: nth($r, 3);
    $r4: nth($r, 4);
    border-radius: $r1 $r2 $r3 $r4;
    /* Firefox */
    -moz-border-radius : $r1 $r2 $r3 $r4;
    /* IE */
    -ms-border-radius : $r1 $r2 $r3 $r4;
    /* Opera */
    -o-border-radius : $r1 $r2 $r3 $r4;
    /* WebKit */
    -webkit-border-radius : $r1 $r2 $r3 $r4;
  }
}

@mixin transform ($deg) {
  transform: rotate($deg);
  // IE 9
  -ms-transform:rotate($deg);
  // Firefox
  -moz-transform:rotate($deg);
  // Safari and Chrome
  -webkit-transform:rotate($deg);
  // Opera
  -o-transform:rotate($deg);
}

// 盒子
.wrapper{
  margin: 10px 0 0 30px;
}

// 小蜗
.xiaowo{
  position: relative;

  // 头部
  .head {
    position:relative;
    z-index: 100;
    margin-left: 200px;
    width: 232px;
    height: 125px;
    background-color: $bc;
  }

  // 眼睛
  .eyes{
    position: relative;
  }
  .eye{
    position: absolute;
    width: 100px;
    height: 105px;
    @include radius(57px);
    border: $border;
  }
  // 左眼
  .left{
    top: 10px;
    left: -3px;
  }
  // 眼珠
  .black{
    position: absolute;
    background-color: #000; // 炯炯有神的黑眼珠
    width: 30px;
    height: 32px;
    @include radius(15px);
  }
  // 左眼珠 */
  .bleft{
    top: 25px;
    left: 40px;
  }
  // 短横线
  .shortHLine{
    position: absolute;
    top: 60px;
    left: 110px;
    width: 12px;
    @include border(0, 0, 1, 0);
  }
  // 右眼
  .right{
    top: 7px;
    right: 0;
  }
  // 右眼珠
  .bright{
    top: 25px;
    left: 40px;
  }

  // 短斜线
  .shortSlash{
    position: absolute;
    top: 125px;
    left: 32px;
    width: 30px;
    height: 30px;
    border-left: 7px solid #2b2b2b;
    @include transform(20deg);
  }

  // 嘴巴
  .mouth{
    position: absolute;
    top: 130px;
    left: 92px;
    width: 50px;
    height: 24px;
    @include border(0, 1, 1, 1);
    @include radius(0, 0, 30px, 32px);
  }

  // 壳儿
  .shell{
    position: absolute;
    top: 75px;
    width: 300px;
    height: 300px;
    @include radius(157px);
    @include border(1, -1, 1, 1);
  }
  // 内圈
  .innerCircle{
    position: absolute;
    top: 55px;
    left: 50px;
    width: 230px;
    height: 230px;
    @include radius(122px);
    @include border(1, 1, -1, 1);
  }
  // 最内圈
  .innerinnerCircle{
    position: absolute;
    top: 55px;
    left: 75px;
    width: 80px;
    height: 80px;
    @include radius(47px);
    border: $border;
  }

  // 右边身体
  .rbody{
    position: absolute;
    top: 60px;
    left: 0px;
    width: 410px;
    height: 345px;
    @include border(-1, 1, -1, -1);
    @include radius(0, 170px, 137px, 0);
  }

  // 底部身体
  .bbody{
    position: absolute;
    top: 317px;
    left: 0;
    width: 300px;
    height: 100px;
  }
  // 左边短弧线
  .shortArc{
    position: absolute;
    top: 30px;
    left: 27px;
    width: 36px;
    height: 36px;
    @include border(1, -1, -1, 1);
    @include radius(25px);
  }
  // 底部长弧线
  .longArc{
    position: absolute;
    top: -248px;
    left: -5px;
    width: 415px;
    height: 345px;
    @include border(-1, 1, 1, -1);
    @include radius(900px, 630px, 605px, 527px);
  }
}

3.修缮

具体工作是：

1. 去除多余线条

   用类似于border-bottom: 5px solid transparent;的代码去掉多余线条，注意不能用border-bottom: 0;来消除，因为底边宽度为0会影响其它边（border-radius是连边框宽度一起算的）

2. 拼接曲线

   去掉多余线条后肯定会出现断开的线条，需要重新定位让曲线完美地接起来

3. 微调

   接好后再调调比例、宽高、弯曲程度什么的，就更完美了

三.运行结果

P.S.可能你也发现了，其实sass并不适合干这个，画图时的调试是直接针对css的，把sass扯进来反而更麻烦了。。这都没关系，拿到把新锤子总想用用，现在如愿了

参考资料

• 博客园：使用CSS3画出一个叮当猫

• 黯羽轻扬：我们一起学SASS