用sass畫蝸牛

時間  2019-12-11
標籤 sass 蝸牛 简体版
原文   原文鏈接

一.sass的好處

用css畫圖也算是簡單的實戰吧，雖然用到的東西還比較少。。用過以後，發現sass主要有如下優點：css

  1. 可維護性。最重要的一點，可維護性的很大一部分來自變量html

    嗯，最簡單的例子，畫圖總要有前景色背景色填塗色等等一堆色值吧，用css也能夠完成，但若是要修改某個填塗色可能須要先審查元素找到具體色值，再對源碼Ctrl + H全文替換一遍才行。用sass的話就不用這麼麻煩了，簡單地改下變量的值，輕鬆搞定，沒錯，根本不用審查元素找色值那麼麻煩，由於好的變量名確定是自解釋的c++

  2. 易用性。剛剛入門用起來都很順手web

    兼容css語法，在此基礎上提供擴展功能，用起來很是順手。好比嵌套結構表示後代選擇器，使用方便，容易理解，還能避免一些書寫錯誤shell

  3. 靈活性。難以置信的靈活編程

    @mixin提供了極大的靈活性，無參、多參、可選參、任意多參要比不少編程語言更加靈活，入口靈活不只有利於代碼複用，還讓接口變得更加易用（不須要記一堆功能類似的函數名）瀏覽器

    無心中發現了一個很靈活的用法，代碼以下：sass

    // 若是隻想簡單地支持1參數和4參數形式，能夠這樣實現
@mixin radius ($r1, $r2: $r1, $r3: $r1, $r4: $r1) { // 注意把默認值設置爲了其它形參的值，這太靈活了
  // 做爲例子就不考慮兼容性了
  border-radius: $r1 $r2 $r3 $r4;
}

// 若是想實現0冗餘和支持一、二、三、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代碼以下：app

    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扯進來反而更麻煩了。。這都不要緊，拿到把新錘子總想用用，如今如願了

參考資料

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程