用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. 微调

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

三.运行结果

sass小蜗

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

参考资料

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

code