使用這些 SASS Mixins 和函數來最大化您的工作流程

嘿那裡！如果您發現自己一遍又一遍地編寫相同的 CSS，或者您一直在努力使您的設計能夠適應不同的螢幕尺寸，那麼您來對地方了。在本文中，我將分享一些非常有用的 SASS mixin 和函數，它們讓我的工作流程更加順暢。這些小工具讓我的程式碼保持乾燥（不要重複自己），並使響應式設計、分層和快取清除等事情變得輕而易舉，從而節省了我大量的時間和精力。

無論是將像素轉換為 rems、處理 z-index 以實現更清晰的佈局，還是創建可重用的幫助器類，我都為您準備了一些東西。讓我帶您了解這些 mixin 和函數，您可以輕鬆地將它們放入專案中並立即開始使用。

我將展示的範例可以改進或擴展，您可以在網路上找到更多樣的範例。但這些是我個人使用最多的。讓我們開始吧！

• 像素轉雷姆功能
• 用於響應式設計的媒體查詢混合
• 用於分層分層的 Z-Index 函數
• 快取清除單一或多個背景影像
• 快取清除字體
• 絕對定位
• 文字省略號
• 項目懸停
• 可重複使用性幫助類別

像素轉雷姆函數

將像素值轉換為 rem。

@function rem($pixel) {
  $convertedValue: ($pixel / 16) + rem;
  @return $convertedValue;
}

// Usage
div {
  font-size: rem(32);
  width: rem(600);
}

用於響應式設計的媒體查詢 Mixin

簡單易讀的 mixin 用法，用於媒體查詢的響應式設計。

@mixin small {
  @media only screen and (max-width: 768px) {
    @content;
  }
}

@mixin medium {
  @media only screen and (max-width: 992px) {
    @content;
  }
}

@mixin large {
  @media only screen and (max-width: 1200px) {
    @content;
  }
}

// Usage
.title {
  font-size: 16px;

  @include small {
    font-size: 14px;
  }
  @include medium {
    font-size: 18px;
  }

  @include large {
    font-size: 20px;
  }
}

用於分層分層的 Z-Index 函數

此設定可確保您的佈局具有清晰的視覺層層次結構，同時保持靈活性和可擴展性。

$z-index: (
  dropdown: 6,
  mobileMenu: 7,
  stickyHeader: 8,
  tooltip: 10,
  modalBackdrop: 11,
  modal: 12,
  header: 15,
  notificationToast: 18,
  spinner: 20,
);

@function z-index($key) {
  @return map-get($z-index, $key);
}

.header {
  z-index: z-index(header);
}

快取清除單一或多個背景影像

使用 id 快取背景圖片

$imageId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url("#{$url}?v=#{$imageId}"),
      comma
    );
  }
  background-image: $backgroundImages;
}

//   Single Image Usage

.hero {
  @include cacheBustBgImages("asset/images/image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

// Multiple Image Usage

.hero {
  @include cacheBustBgImages(
    "asset/images/image.png",
    "asset/images/other-image.png"
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

快取清除字體

使用 ID 快取應用程式字體。

$fontId: unique_id();

@font-face {
  font-family: "Custom Fonts";
  src: url("asset/images/custom-font.eot?v=#{$fontId}");
  src: url("asset/images/custom-font.eot?v=#{$fontId}#iefix") format("embedded-opentype"),
    url("asset/images/custom-font.woff2?v=#{$fontId}") format("woff2"),
    url("asset/images/custom-font.woff?v=#{$fontId}") format("woff"), url("asset/images/custom-font.ttf?v=#{$fontId}")
      format("truetype"),
    url("asset/images/custom-font.svg?v=#{$fontId}#svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

絕對定位

絕對定位元素的混合。上、右、下、左順序很重要。

@mixin absolute($top, $right, $bottom, $left) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// Usage

div {
  @include absolute(100px, 100px, auto, auto);
}

文字省略號

用省略號截斷溢位的文字。

@mixin text-ellipsis($max-width: 100%) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: $max-width;
}

// Usage
.element {
  @include text-ellipsis(200px);
}

項目懸停

對於懸停狀態，允許您傳入特定屬性。

@mixin item-hover($color, $bg-color) {
  &:hover {
    color: $color;
    background-color: $bg-color;
  }
}

// Usage
.button {
  @include item-hover(white, black);
}

可重複使用性的輔助類

// Center child elements both vertically and horizontally
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Center element both horizontally and vertically
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center text
.text-center {
  text-align: center;
}

// Hide element
.hidden {
  display: none;
}

// Hide element on desktop view
.d-none-desktop {
  @media screen and (min-width: 680px) {
    display: none;
  }
}

// Hide element on mobile view
.d-none-mobile {
  @media screen and (max-width: 680px) {
    display: none;
  }
}

// Add border radius to element
.border-radius {
  border-radius: 10px;
}

感謝您的閱讀。如果您覺得文章有用，請不要忘記按讚和評論，以便其他人也能訪問。如果你的日子很慷慨，你甚至可以請我喝杯咖啡。 ？

以上是使用這些 SASS Mixins 和函數來最大化您的工作流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！