SASS 믹스인 및 기능으로 워크플로우를 극대화하세요-CSS 튜토리얼-php.cn

SASS 믹스인 및 기능으로 워크플로우를 극대화하세요

Barbara Streisand

풀어 주다： 2024-10-11 10:44:30

원래의

807명이 탐색했습니다.

안녕하세요! 동일한 CSS를 계속해서 작성했거나 다양한 화면 크기에 반응하는 디자인을 만드는 데 어려움을 겪었다면 잘 찾아오셨습니다. 이 글에서는 작업 흐름을 훨씬 더 원활하게 만들어준 정말 유용한 SASS 믹스인과 기능을 공유하겠습니다. 이 작은 도구를 사용하면 코드를 DRY(반복하지 마세요)로 유지하고 반응형 디자인, 레이어링, 캐시 버스팅 등을 쉽게 수행할 수 있어 많은 시간과 노력을 절약할 수 있습니다.

픽셀을 rems로 변환하거나, 더 깔끔한 레이아웃을 위해 Z-색인을 처리하거나, 재사용 가능한 도우미 클래스를 만드는 등 여기에서 여러분을 위한 정보를 제공합니다. 프로젝트에 쉽게 삽입하여 바로 사용할 수 있는 믹스인과 기능을 안내해 드리겠습니다.

제가 보여드릴 예시는 개선되거나 확장될 수 있으며, 온라인에서 더욱 다양한 예시를 찾아보실 수 있습니다. 하지만 이것들은 제가 개인적으로 가장 많이 사용하는 것들입니다. 뛰어들어 보세요!

Pixel To Rem 기능
반응형 디자인을 위한 미디어 쿼리 믹스인
계층적 레이어링을 위한 Z-Index 기능
캐시 무효화 단일 또는 다중 배경 이미지
캐시 무효화 글꼴
절대 포지셔닝
텍스트 줄임표
아이템 호버
재사용을 위한 도우미 클래스

Pixel To Rem 기능

픽셀 값을 rem으로 변환합니다.

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

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

로그인 후 복사

반응형 디자인을 위한 미디어 쿼리 믹스인

미디어 쿼리를 사용한 반응형 디자인을 위한 간단하고 읽기 쉬운 믹스인 사용법.

@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;
}

로그인 후 복사

읽어주셔서 감사합니다. 글이 유익하셨다면 다른 분들도 보실 수 있도록 좋아요와 댓글 부탁드립니다. 여유로운 날이면 커피 한 잔 사줄 수도 있어요. ?

Maximize Your Workflow with These SASS Mixins and Functions