Maximize Your Workflow with These SASS Mixins and Functions-CSS Tutorial-php.cn

Maximize Your Workflow with These SASS Mixins and Functions

Barbara Streisand

Release： 2024-10-11 10:44:30

Original

806 people have browsed it

Hey there! If you’ve ever found yourself writing the same CSS over and over, or if you’ve struggled with making your design responsive across different screen sizes, you’re in the right place. In this article, I’m going to share some really useful SASS mixins and functions that have made my workflow much smoother. These little tools have saved me so much time and effort by keeping my code DRY (Don’t Repeat Yourself) and making things like responsive design, layering, and cache busting a breeze.

Whether it’s converting pixels to rems, handling z-index for cleaner layouts, or creating reusable helper classes, I’ve got something here for you. Let me walk you through these mixins and functions that you can easily drop into your project and start using right away.

The examples I’ll show can be improved or expanded upon, and you can find even more diverse examples online. But these are the ones I personally use the most. Let’s dive in!

Pixel To Rem Function
Media Queries Mixin For Responsive Design
Z-Index Function For Hierarchical Layering
Cache Busting Single or Multiple Background Images
Cache Busting Fonts
Absolute Positioning
Text Ellipsis
Item Hover
Helper Classes For Reusability

Pixel To Rem Function

Convert pixel values to rem.

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

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

Copy after login

Media Queries Mixin For Responsive Design

A simple, easy to read mixin usage for responsive design with media queries.

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

Copy after login

Z-Index Function For Hierarchical Layering

This setup ensures your layout has a clean hierarchy of visual layers while keeping it flexible and scalable.

$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);
}

Copy after login

Cache Busting Single or Multiple Background Images

Cache background images using an 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;
}

Copy after login

Cache Busting Fonts

Cache app fonts using an 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;
}

Copy after login

Absolute Positioning

A mixin for absolute positioning elements. Top, right, bottom and left order is is important.

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

// Usage

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

Copy after login

Text Ellipsis

Truncate overflowing text with an ellipsis.

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

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

Copy after login

Item Hover

For hover states, allowing you to pass in specific properties.

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

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

Copy after login

Helper Classes For Reusability

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

Copy after login

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it too. If you’re on a generous day, you can even buy me a coffee. ?

Maximize Your Workflow with These SASS Mixins and Functions

The above is the detailed content of Maximize Your Workflow with These SASS Mixins and Functions. For more information, please follow other related articles on the PHP Chinese website!