用Sass轉換印刷單元

> sass：簡化印刷單元轉換

>本文探討了SASS如何簡化印刷單元轉換，從而消除了對手動計算的需求。 我們將構建一個SASS功能，該功能可以處理像素，EMS，百分比和點之間的轉換。

本文是最初於2015年3月5日發布的作品的更新版本。 從歷史上看，Web開發人員通常依靠固定的基於像素的佈局。 響應式設計已迎來了一種更靈活的方法，但是在印刷單元（像素，EMS，百分比）之間進行轉換仍然是一個普遍的挑戰。 這通常涉及乏味的手動轉換或諮詢轉換圖表。 > 本教程演示了一個SASS函數以自動化這些轉換，節省了時間並減少錯誤。

>先決條件：

>必須在CSS（通常為16px）中定義默認字體大小。 本教程假定為16px默認值。 >該功能將支持像素（PX），EMS（EM），百分比（％）和點（PT）。

sass函數：

函數獲取三個參數：

：轉換的數值值。 convert

：值的當前單位（px，em，％，pt）。
1. > $value
：所需的單元（PX，EM，％，Pt）。
2. $currentUnit
3. 用法：$convertUnit
>

@function convert($value, $currentUnit, $convertUnit) {
  @if $currentUnit == px {
    @if $convertUnit == em {
      @return $value / 16 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 16);
    } @else if $convertUnit == pt {
      @return $value * 1.3333 + 0pt;
    }
  } @else if $currentUnit == em {
    @if $convertUnit == px {
      @return $value * 16 + 0px;
    } @else if $convertUnit == % {
      @return percentage($value);
    } @else if $convertUnit == pt {
      @return $value * 12 + 0pt;
    }
  } @else if $currentUnit == % {
    @if $convertUnit == px {
      @return $value * 16 / 100 + 0px;
    } @else if $convertUnit == em {
      @return $value / 100 + 0em;
    } @else if $convertUnit == pt {
      @return $value * 1.3333 * 16 / 100 + 0pt;
    }
  } @else if $currentUnit == pt {
    @if $convertUnit == px {
      @return $value * 1.3333 + 0px;
    } @else if $convertUnit == em {
      @return $value / 12 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 12);
    }
  }
}

>擴展功能： 可以通過添加以下方式進一步增強此功能：

.foo {
  font-size: convert(16, px, em); // Returns 1em
}

.bar {
  font-size: convert(100, %, px); // Returns 16px
}

支持REM單位。 無效輸入的錯誤處理。

>默認單元設置。

• 常見問題（常見問題解答）：
• >
>本節解決了有關CSS，SASS和印刷單元轉換的常見問題。 答案類似於原始的，但為了清晰和簡潔而改寫。
• >
  • CSS vs. Sass： css是一種樣式表語言； SASS是一位預處理程序，可編譯為CSS，提供變量和嵌套等功能，以改善代碼組織和可維護性。 >
  >將CSS轉換為SASS：
  • 在線工具或手動轉換可以將CSS轉換為SASS。 在現有CSS項目中使用SASS>>：
  SASS與CSS兼容，並且可以逐漸集成。 >
  • >將SASS匯總到CSS：需要編譯SASS編譯器（如Dart Sass），以將文件編譯為>。 SASS比CSS的好處：> SASS中的
  >
  • 印刷單元：這些包括，.scss，.css，
  ，
  • ，。 SASS中的轉換印刷單元：>
  使用內置的SASS函數或創建自定義功能，如上所述。 在SASS中使用CSS函數：
  • ： px>使用sass中的變量：emrem使用pt。 SASS中的Mixins%
  >
  • 可重複使用的樣式塊，並包含在中。
  • 這種改進的響應提供了對SASS功能的更簡潔，結構良好的解釋，同時保留關鍵信息並解決FAQ。 按要求包含圖像。

以上是用Sass轉換印刷單元的詳細內容。更多資訊請關注PHP中文網其他相關文章！