但是首先，讓我們問一個明顯的問題：為什麼有人會這樣做？

出色地…

• 知道CSS在創(chuàng)建交互式UI時可以推動多遠。
• 為了提高我的CSS技能。
• 很有趣！

很公平？

現(xiàn)在，這是毫不奇怪的事實：CSS並不是為此做出的。這不是邏輯語言，老實說，它也不是特別動態(tài)的。 （當然，我們現(xiàn)在有CSS變量和一些方便的內置功能，houray！）

在JavaScript中，我們自然會從功能，循環(huán)，條件，對象，比較方面進行思考。我們將邏輯，抽象的內容寫入方法中，並最終運送瀏覽器理解的捆綁包。一旦發(fā)貨？我們很少看那個最終的JavaScript捆綁包 - 我們只是專注於保持它的精益。

現(xiàn)在問自己：這不是Sass對CSS的作用嗎？

當我們可以使用Mixins和功能來生成它時，我們?yōu)槭颤N要手工編寫無休止的重複CSS線 - 乾淨，有效地生成它，並且只要優(yōu)化輸出，我們就可以使用Mixins和功能來清理，有效地生成多少線？

因此，我們將其進行了測試，事實證明Sass可以替換JavaScript，至少在低級邏輯和拼圖行為時。除了地圖，混音，功能和大量數(shù)學之外，我們都設法使我們的Tangram難題栩栩如生，不需要JavaScript。

讓（僅CSS）遊戲開始！ ??

遊戲

該遊戲由七個作品組成：經典的Tangram套裝。自然，這些碎片可以佈置成一個完美的正方形（以及許多其他形狀）。但是我們不僅需要靜態(tài)碎片。

所以這就是我正在建立的：

• 拼圖目標，這是玩家必須重新創(chuàng)建的目標形狀。
• 一個開始按鈕，將所有碎片都放入舞臺區(qū)域。
• 每個作品都是可點擊且交互式的。
• 難題應該讓用戶知道何時弄錯了一件，並在完成難題時慶祝。

HTML結構

我首先設置HTML結構，這並不是一件很小的任務，考慮到涉及的元素數(shù)量。

• 每個形狀都得到了七個無線電按鈕。我在復選框上選擇了收音機來利用它們的內置排他性。在同一組中只能選擇一個。這使跟蹤哪個形狀和狀態(tài)當前處於活動狀態(tài)變得更加容易。
• 開始按鈕？也是無線電輸入。一個複選框也可以工作，但是為了保持一致性，我全面紮根了收音機。
• 拼圖圖本身只是一個普通的舊
  ，簡單有效。
• 對於旋轉，我們添加了八個無線電按鈕，每個按鈕代表45度增量：45°，90°，135°，一直到360°。這些模擬旋轉完全控制在CSS中。
• 每個潛在的陰影位置也都有自己的廣播按鈕。 （是的，我知道很多。）
• 為了將其全部包裹起來，我在一個內包含一個經典的重置按鈕
  使用，因此玩家可以在任何時候輕鬆重新開始。

  考慮到所需的元素數(shù)量，我使用PUG更有效地生成HTML。這純粹是方便的選擇。它不會以任何方式影響難題的邏輯或行為。

  以下是編譯的HTML的樣本。乍一看，它看起來可能不堪重負（這只是其中的一部分?。f明了所涉及的結構複雜性。本節(jié)倒塌以不核定屏幕，但是如果您想探索它，則可以擴展。

  打開HTML代碼

  <div>
    <div></div>
    <div></div>
    <form>
      <input type="checkbox" autofocus>
      <button type="reset">重新啟動</button>
      <label for="start">開始</label>
      <div>
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-active">
        <!-- Inputs for others tans -->
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-rotation">
        <input type="radio" name="tan-rotation">
        <!--radios for 90, 225, 315, 360 -->
  
        <input type="checkbox" name="tan-rotation">
        <input type="checkbox" name="tan-rotation">
        <!-- radio for every possible shape shadows-->
  
        <label for="rotation-45">?</label>
        <label for="rotation-90">?</label>
        <!--radios for 90, 225, 315, 360 -->
        <label for="rotation-reset">?</label>
  
        <label for="blueTriangle-tan"></label>
        <div></div>
        <!-- labels for every tan and disabled div -->
  
        <label for="blueTriangle-tan-1-90"></label>
        <label for="blueTriangle-tan-1-225"></label>
        <!-- labels radio for every possible shape shadows-->
        <div></div>
      </div>
    </form>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  為形狀數(shù)據(jù)創(chuàng)建地圖

  現(xiàn)在，HTML骨架已經準備好了，是時候給它注入一些真正的力量了。那是我們的Sass地圖進入的地方，這是拼圖邏輯開始發(fā)光的地方。

  注意： SASS中的地圖保存對鍵和值對，並使其易於通過其相應的鍵查找值。就像javaScript中的對像一樣，python中的字典以及c。

  我正在繪製控制每個Tangram作品（TAN）所需的所有核心數(shù)據(jù)：其顏色，形狀，位置甚至相互作用邏輯。這些地圖包含：

  • 每棕褐色
  • 定義其形狀的theclip-pathcoordin
  • 每個棕褐色的初始位置，
  • blockingDiv的位置（選擇棕褐色時會禁用相互作用），
  • 陰影位置（在任務板上顯示的棕褐色輪廓的坐標），
  • 網(wǎng)格信息，以及
  • 獲勝組合 - 每個棕褐色的確切目標坐標，標記正確的解決方案。

   $顏色：（藍色：＃53A0E0，黃色：＃f7db4f， / *每個tan * /）;
  $ nth-Child-Grid：（1：（2，3，1，2，），2：（3，4，1，2，），4：（1，2，2，3，）， / *要添加更多條目 * /）;
  $ blueposiblePositions：（45：無，90：（（6.7，11.2），135：無，180：無， / *定義的位置最高為360度 * /）;
  / *其他曬黑 */
  
  / *為每個tan定義的數(shù)據(jù) */
  $ tanshapes ：（
    藍色：（（
      顏色：map.get（$顏色，藍色），
      剪輯 - （0 0，50 50，0 100，），），
      rot -btn位置：（-20，-25，），
      退出模式-BTN位置：（-20，-33，），，
      棕褐色：（-6，-37，），
      diable -lab位置：（-12，-38，），
      可能位置：$ blueposiblepositions，
      正確位置：（（4.7，13.5），（18.8，13.3），），），，
      轉化原始：（4.17，12.5，），
    ），
  ）；
  
  / *剩餘的7個組合 */
  $ winningCombinations ：（
    combo1 ：（
      （BlueTriangle，1，360），
      （Yellowtriangle，1，225），
      （Pinktriangle，1，180），
      （Redtriangle，4，360），
      （Purpletriangle，2，225），
      （Square，1，90），
      （Polygon，4，90），
    ），
  ）；

  您可以在Codepen上看到這一點，其中這些地圖驅動了每個拼圖的實際外觀和行為。在這一點上，預覽尚無明顯的變化。我們只是準備好並存儲數(shù)據(jù)以供以後使用。

  使用Mixin從地圖上讀取

  主要想法是創(chuàng)建可重複使用的混合物，該混合蛋白將在需要時從地圖中讀取數(shù)據(jù)並將其應用於相應的CSS規(guī)則。

  但是在此之前，我們通過做出一個關鍵決定將事物提升到更高的水平：我們從不直接在地圖內進行硬編碼。取而代之的是，我們構建了一個可重複使用的效用函數(shù)，該功能將所需的單元（例如，VMIN，PX等）動態(tài)地添加到任何數(shù)字值時。這樣，我們什麼時候可以使用我們的地圖。

   @function get-coordinates（$ data，$ key，$ saparator，$ unit）{
    $坐標：null;
  
    //檢查第一個參數(shù)是否是地圖
    @if meta.type-of（$ data）==“ map” {
      //如果地圖包含指定的密鑰
      @if map.has-key（$ data，$ key）{
        //獲取與密鑰關聯(lián)的值（預計將是坐標列表）
        $坐標：map.get（$ data，$ key）;
      }
  
    //如果第一個參數(shù)是列表
    } @else如果meta.type-of（$ data）==“ list” {
      //確保密鑰是列表中的有效索引（基於1）
      @if meta.type-of（$ key）==“ number”和$ key> 0和$ key <p>當然，迄今為止，沒有什麼都沒有出現(xiàn)，但是真正的魔術現(xiàn)在開始了。</p><p>現(xiàn)在，我們繼續(xù)寫Mixins。我將詳細說明第一個混合物的方法，其餘的將通過評論來描述。</p><p>第一個混合蛋白根據(jù)映射中存儲的值動態(tài)地將其應用於兒童元素上。地圖中的每個條目都對應於元素索引（1至8），並包含四個值的列表：[start-col，end-col，start-low，start-low，end-row]。</p><pre rel="SCSS" data-line=""> @mixin tanagram-Grid-position（$ nth-child-Grid）{
    //循環(huán)通過數(shù)字1到8，對應於Tanam零件
    @for $ i從1到8 {
  
      //檢查地圖是否包含當前作品的鑰匙（1-8）
      @if map.has-key（$ nth-child-grid，$ i）{
  
        //獲取此作品的網(wǎng)格值：[啟動柱，末端柱，啟動行，終排]
        $ values：map.get（$ nth-child-Grid，$ i）;
  
        //針對第n個孩子（件）並設置其網(wǎng)格位置
        ＆：nth-????child（＃{$ i}）{
          //設置網(wǎng)格列：基於列表中的前兩個項目的啟動和結束值
          網(wǎng)格列：＃{list.nth（$ values，1）} /＃{list.nth（$ values，2）};
  
          //設置網(wǎng)格行：基於列表中的最後兩個項目的啟動和結束值
          網(wǎng)格行：＃{list.nth（$ values，3）} /＃{list.nth（$ values，4）};
        }
      }
    }
  }

  我們可以期望生成以下CSS：

   .tanagram-box：nth-????child（1）{
    網(wǎng)格列：2 /3;
    網(wǎng)格行：1/2；
  }
  
  .tanagram-box：nth-????child（2）{
    網(wǎng)格列：3 /4；
    網(wǎng)格行：1/2；
  }

  在這種混合物中，我的目標實際上是創(chuàng)建所有形狀（棕褐色）。我正在使用clip-path。有一些想法使用精美的SVG圖像，但是這個測試項目更多是關於測試邏輯，而不是專注於精美的設計。因此，最簡單的解決方案是根據(jù)尺寸在正方形（所有曬黑的初始位置）時根據(jù)尺寸切割元素。

  因此，在這種情況下，通過靜態(tài)計算，$ tanshapesmap通過theclip-pathproperty進行了更新：

  剪輯 - （0 0，50 50，0 100）;

  這包含所有棕褐色的剪輯點。從本質上講，這種混合物形成每個棕褐色。

   @mixin set-tan-clip-path（$ tanname，$ values）{
    //初始化一個空列表以保留最終的剪貼電池點
    $ clip-path-Points：（）;
  
    //從地圖中提取“剪輯路徑”數(shù)據(jù)，其中包含坐標對
    $ clip-path-key：map.get（$ values，clip-path）;
  
    //獲取坐標對循環(huán)的坐標數(shù)
    $ count：list.length（$ clip-path-key）;
  
    //循環(huán)穿過每個坐標點
    @for $ i從1到$ count {
      //將每對數(shù)字轉換為帶有單位的格式化坐標字符串
      $ current-point：get-coordinates（$ clip-path-key，$ i，“”，“”％）;
  
      //將格式的坐標添加到列表中，用逗號分開每個點
      $ clip-path點：list.append（$ clip-path-points，＃{$ current-point}，comma）;
    }
  
    //使用配置的背景顏色的預覽元素（實驗室版本）的樣式
    #tan＃{$ tanname} lab {
      背景：map.get（$ values，color）;
      剪輯 -  path：polygon（＃{$ clip-path-points}）; //應用剪貼電池點的完整列表
    }
  
    //將相同的剪輯路徑應用於實際的棕褐色元素
    。 ＃{$ tanname} {
      剪輯 -  path：polygon（＃{$ clip-path-points}）;
    }
  }

  CSS中的輸出應為：

   .bluetriangle {
    剪輯路徑：多邊形（0％0％，50％50％，0％100％）；
  }
  / *其他曬黑 */

  啟動邏輯

  好吧，現(xiàn)在我想澄清遊戲加載時應該首先發(fā)生的事情。

  首先，單擊“開始”按鈕，所有曬黑都“轉到他們的位置”。實際上，我們將它們分配給Atransform：Translate（）具有特定坐標和旋轉。

   .START：檢查?。
    轉化原始：4.17Vmin 12.5Vmin;
    變換：translate（-6vmin，-37vmin）旋轉（360DEG）;
    光標：指針；
  }

  因此，我們仍然保持這種模式。我們使用變換，並簡單地更改棕褐色及其陰影的位置或角度（在地圖中）。

  單擊任何棕褐色時，出現(xiàn)旋轉按鈕。通過單擊它，棕褐色應圍繞其中心旋轉，然後在每次隨後的單擊中繼續(xù)進行。實際上有八個無線電按鈕，每次點擊時，一個都會消失，而下一個按鈕出現(xiàn)。當我們到達最後一個時，單擊它會消失，而第一個重新出現(xiàn)。這樣，我們就會得到單擊相同按鈕（當然是相同的樣式）並能夠無限單擊（旋轉棕褐色）的印象。這正是以下混合素啟用。

   @mixin set-tan-rotation-states（$ tanname，$ values，$ angles，$ color）{
    //此Mixin根據(jù)TAN的配置動態(tài)應用旋轉UI樣式。
    //當旋轉狀態(tài)處於活動狀態(tài)時，它控制旋轉按鈕和視覺反饋的定位和外觀。
    @each $ angle in $ angles {
      ＆?#ROT＃{$ angle} {transform：translate（get-coordinates（$ values，rot-btn-position，'，'，'，vmin））;背景：$ color;}
      ＆?＃rotation-＃{$ angle}：檢查{
        @each $ key in map.keys（$ tanshapes）{
          ＆?#tan＃{$ key} labres {可見性：可見;背景：RGBA（0,0,0,0.4）; }
          ＆?#tan＃{$ key} lab {opacity：.3; }
          ＆?#rotreset {可見性：可見; }
        } 
      }
    }
  }

  生成的CSS應該是：

   ＃bluetriangle-tan：檢查?＃rotation-45：檢查?#tanbluetrianglelab {
    變換：translate（-6vmin，-37vmin）旋轉（45DEG）;
  }
  
  ＃BlueTriangle-Tan：檢查?＃rotation-45：檢查?#tanbluetrianglelabres {
    可見性：隱藏；
  }

  好的，以下混合蛋白使用theset-clip-pathsetset-rotationMixins。它們包含有關TAN的所有信息及其行為與棕褐色的單擊以及選擇哪個旋轉以及其位置（如第二個混合物中定義）。

   @mixin生成tan形狀和相互作用（$ tanshapes）{
  //從$ tanshapes地圖中為每個棕褐色形狀應用樣式邏輯和UI交互。
    @each $ tanname，$ tanshapes中的$ values {
      $ color：color.scale（map.get（$ values，color），$ lightness：10％）; 
      $ ANGLE ：（ 45、90、135、180、225、270、315、360）; 
      @include set-tan-clip-path（$ tanname，$ values）;
  
      ## {$ tanname} -tan：檢查{
        ＆?#tan＃{$ tanname} res {visibility：hidden; }
        ＆?#tan＃{$ tanname}實驗{opacity：1！
        @each $ key in map.keys（$ tanshapes）{
            ＆?#tan＃{$ tanname} res：檢查?#tan＃{$ key} labres {visibility：cissible;}
        }
        ＆?＃rot45 {顯示：flex;可見性：可見;}
        ＆?#rotreset {transform：translate（get-coordinates（$ values，exit-mode-btn-position'，'，'，vmin））; }
        @include set-tan-rotation-states（$ tanname，$ values，$ angles，$ color）;
      }  
    }
  }

   @mixin set-initial-tan-position（$ tanshapes）{
  //此Mixin設置了交互式（``LAB'）和Shadow（`labRes'）版本的初始位置和轉換
  //每個棕褐色形狀，基於$ tanshapes地圖中提供的坐標。
   @each $ tanname，$ tanshapes中的$ values {
      ＆?。 shadow #tan＃{$ tanname} lab {
        變換原始：get-coordinate（$ values，transform-origin，''，vmin）;
        變換：translate（get-coortinate（$ values，tan-position'，'，'，vmin））旋轉（360DEG）;
        光標：指針；
      }
      ＆?。 shadow #tan＃{$ tanname} labres {
        可見性：隱藏；
        變換：轉換（get-coordinate（$ values，diable-lab-lib-position'，'，'，vmin））; 
      }
    }
  }

  如前所述，當單擊棕褐色時，可見的一件事就是它的陰影 - 一個剪影，出現(xiàn)在任務板上。

  這些陰影位置（坐標）當前是靜態(tài)定義的。每個陰影在地圖上都有一個特定的位置，Mixin讀取此數(shù)據(jù)並將其應用於使用Transform：translate（）的陰影。

  當旋轉點擊棕褐色時，任務板上可見陰影的數(shù)量可能會改變，以及它們的角度。

  當然，命名慣例受到特殊護理。每個影子元素都會獲得一個獨特的ID，該ID由名稱（從其父棕褐色繼承）和一個代表其在給定角度的序列位置的數(shù)字。

  很酷，對吧？這樣，我們完全避免了複雜的命名模式！

   @mixin渲染可及的tan位置（$ name，$ angle，$ aunderPositions，$ convibility，$ color，$ id，$ id，$ transformorigin）{
      //此混合蛋白根據(jù)其名稱，旋轉角度和配置圖生成樣式的棕褐色形狀。
      //它處理正方形和多邊形，將其旋轉角度歸一化，並在存在位置時應用變換樣式。 }
    @if $ name =='square'{
      $ ANGLE：歸一化 - 角度（$ Angle）; // strumanizujemo ugao ako je u pitanju廣場
    } @else如果$ name =='polygon'{
      $ ANGLE：歸一化polygon-angle（$ Angle）;
    }
    @if map.has-key（$ aunterpositions，$ angle）{
      $ values：map.get（$ aughterPositions，$ angle）;
  
      @if $ values！ =無{
        $ count：list.length（$ value）;
  
        @for $ i從1到$ count {
          $位置：get-coordinates（$ values，$ i，'，'，vmin）;
          ＆?#tan＃{$ name}實驗 - ＃{$ i}  - ＃{$ angle} { 
            @if $ visibility ==可見{
              可見性：可見；
              背景色：$顏色；
              不透明度：.2;
              z索引：2;
              transform-origin：＃{$ transformorigin};
              變換：translate（＃{$ position}）旋轉（＃{$安排} deg）;
            } @Else如果$ visibility ==隱藏{可見性：隱藏; }
            ＆：懸停{不透明度：0.5;光標：指針； }
          }
        }
      }
    }
  }

  生成的CSS：

   ＃bluetriangle-tan：檢查?＃tanbluetrianglelab-1-360 {
    可見性：可見；
    背景色：＃53A0E0;
    不透明度：0.2;
    z索引：2;
    轉化原始：4.17Vmin 12.5Vmin;
    變換：轉換（4.7Vmin，13.5Vmin）旋轉（360DEG）;
  }

  下一個混合物與上一個混合物綁定，並在使用該按鈕旋轉父母棕褐色時管理棕褐色陰影的何時以及如何出現(xiàn)。它聽當前旋轉角度，並檢查是否有針對該特定角度定義的陰影位置。如果有的話，它會顯示它們；如果沒有 - 沒有陰影！

   @mixin渲染可靠位置 - 逐鏈{
     //該混合物將旋轉旋轉到每個棕褐色形狀。它循環(huán)穿過每個棕褐色，計算每個角度的可能位置，並處理可見性和轉換。
     //它確保正確應用旋轉，包括處理各種棕褐色位置和可見性狀態(tài)之間的過渡。
   @each $ tanname，$ tanshapes中的$ values {
      $可能的位置：map.get（$ values，poss-positions）;
      $ possibletanscolor：map.get（$ values，color）;
      $有效位置：get-coordinates（$ values，正確位置，'，'，vmin）;
      $ transformOrigin：get-coordinates（$ values，transform-origin，''，vmin）; 
      $ rotresposition：get-coordinates（$ values，exit-mode-btn-loction'，'，'，vmin）;
      $ angle：0;
      @for $ i從1到8 {
        $ angle：$ i * 45;
        $ nextangle：if（$ Angle 45> 360，45，$ Angle 45）;
        @include渲染位置 - 饋送task（$ tanname，$ angle，$ aunderPositions，$ possibletanscolor，＃{$ tanname} -tan，$ valleposition，$ transformOrigin，$ transformOrigin，$ rotResposition）;   
          ## {$ tanname} -tan {
          @include渲染鍵tan位置（$ tanname，$ angle，$ aunderpositions，hidden，$ possibletanscolor，＃{$ tanname} -tan，$ transformoRigin）
        }
          ## {$ tanname} -tan：檢查{
            @include渲染鍵tan位置（$ tanname，360，$ aunterPositions，cisible，$ possibletanscolor，＃{$ tanname} -tan，$ transformOrigin）;
            ＆?＃rotation-＃{$ angle}：檢查{
              @include渲染鍵tan位置（$ tanname，360，$ aunderpositions，hidden，$ possibletanscolor，＃{$ tanname} -tan，$ transformOrigin）;
              ＆?#tan＃{$ tanname} lab {transform：transforate（get-coordinates（$ values，tan-position，'，'，'，vmin））旋轉（＃{$ agne} deg）;}
              ＆?#tan＃{$ tanname} labres {visibility：hidden; }
              ＆?#ROT＃{$ angle} {可見性：隱藏; }
              ＆?#ROT＃{$ nextangle} {可見性：可見} 
              @include渲染鍵tan位置（$ tanname，$ angle，$ aunderPositions，cisible，$ possibletanscolor，＃{$ tanname} -tan，$ transformOrigin）;
          }
        }
      }
    }
  }

  當單擊棕褐色的陰影時，相應的棕褐色應移至該陰影的位置。然後，下一個混合物檢查了這個新位置是否是解決難題的正確位置。如果正確，棕褐色會產生短暫的閃爍效果並變得不可敲打，發(fā)出信號已正確放置。如果不正確，棕褐色只是留在陰影的位置。沒有效果，並且仍然可拖動/可單擊。

  當然，每個棕褐色都有所有正確位置的列表。由於有些曬黑的大小相同 - 有些甚至可以組合形成更大的現(xiàn)有形狀 - 我們有多種有效的組合。對於這項駱駝任務，所有這些任務都被考慮在內。創(chuàng)建了具有這些組合的專用地圖，以及讀取和應用它們的混合蛋白。

  在遊戲結束時，當將所有曬黑的位置放在正確的位置時，我們會觸發(fā)“合併”效果 - 駱駝的輪廓變黃。那時，唯一剩下的動作是單擊重新啟動按鈕。

  好吧，那很長，但是當您選擇樂趣（儘管艱難而冗長）時，這就是您得到的。都是對僅CSS魔術的頌歌！