Một số SASS(SCSS) Snippets hay cho Front End (Phần 1)

Giới thiệu

Như các bạn Front End biết thì thì trong SASS có cái cách viết rất hay đó là Mixin,sử dụng Mixin giúp chúng ra viết SASS dễ dàng hơn,rất là thuận tiện nhất là ở những dự án lớn có code lớn thì dùng Mixin sau đó include ra rất là nhanh và code cũng gọn gàng hơn. Trong phần 1 này mình xin chia sẻ 1 số Snippets hay mà mình hay dùng khi viết SASS.

Một số Snippets

1. Clearfix

Mixin

@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

Usage

elements {
  @include clearfix;
}

Output

.elements::after {
  content: '';
  display: table;
  clear: both;
}

2. Center Layout

Mixin

@mixin center-layout($width, $max: false) {
  display: block;
  @if $max {
    max-width: $width;
  } @else {
    width: $width;
  }
  margin-right: auto;
  margin-left: auto;
}

Usage

.elements01 {
  @include center-layout(960px);
}

.elements02 {
  @include center-layout(1200px, true);
}

Output

.elements01 {
  display: block;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.elements02 {
  display: block;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

3. Vertical Div

Mixin

@mixin vertical-centering {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Usage

.elements {
  @include vertical-centering;
}

Output

.elements {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4.Vertical Hizontal Div

Mixin

@mixin centering-elements($horizontal: true, $vertical: true) {
  position: absolute;
  @if $horizontal and $vertical {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if $horizontal {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if $vertical {
    top: 50%;
    transform: translate(0, -50%);
  }
}

Usage

.elements01 {
  @include centering-elements;
}

.elements02 {
  @include centering-elements(true, false);
}

.elements03 {
  @include centering-elements(false, true);
}

• Elements01 là căn giữa trung tâm top và left
• Elements02 là căn mỗi bên trái
• Elements03 là căn mỗi bên phải

Output

.elements01 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.elements02 {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.elements03 {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

4. Web Font

Mixin

@mixin font-face($family, $path, $weight: normal, $style: normal) {
  @font-face {
    font-family: $family;
    src: url('#{$path}.woff2') format('woff2'),
         url('#{$path}.woff') format('woff'),
         url('#{$path}.ttf') format('truetype');
    font-weight: $weight;
    font-style: $style;
  }
}

Usage

@include font-face('fontName', '../font/fontName');

Output

@font-face {
  font-family: "fontName";
  src: url("../font/fontName.eot");
  src: url("../font/fontName.eot?#iefix") format("embedded-opentype"), url("../font/fontName.woff") format("woff"), url("../font/fontName.ttf") format("truetype"), url("../font/fontName.svg#fontName") format("svg");
  font-weight: normal;
  font-style: normal;
}

Lời kết

Vừa rồi mình đã giới thiệu tới các bạn 4 Snippets viết SASS hi vọng đây là 1 bài tham khảo nho nhỏ để chúng ra có thể sử dụng giúp việc viết code trở nên thuận tiện dễ dàng hơn.Cảm ơn các bạn đã đọc và hẹn các bạn vào Phần 2 nhé.