Những thủ thuật sử dụng SCSS có thể bạn chưa biết

SCSS là một ngôn ngữ mới mang lại cách viết code CSS gọn gàng, dễ nhìn và tận dụng tối đa source trước khi compile hơn. Code Tốt xin giới thiệu một vài thủ thuật sử dụng trong SCSS mà có thể người mới làm quen với SCSS chưa biết tới

Sử dụng selector parent trong child

Bạn có thể đã quen với đoạn code sau:

.button {
  background: #fff;
  &:hover {
    background: #000;
  }
}

Sẽ render ra thành:

.button:hover { background: #000; }

Nhưng bạn cũng có thể nghĩ tới việc gọi parent class ngay trong child class như thế này:

.button {
  background: #000;
  .page-template-home & {
    background: #fff;
  }
}

Sẽ render ra thành:

.page-template-home .button { background: #fff; }

Sử dụng variable trong selector

Bạn có thể tạo ra các dynamic class của selector bằng cách sử dụng # ngay trước khi output variable trong cặp dấu ngoặc nhọn {}.

$alertClass: "error";
.message-#{$alertClass} {
 color: #232425;
}

Khi render code sẽ ra:

.message-error { color: #232425; }

Hoặc ví dụ như:

$breakpoint: 768px;

@media (max-width: #{$breakpoint}) {
    /* This block only applies to viewports <= #{$breakpoint} wide... */
}

Sẽ render thành:

@media (max-width: 768px) {
  /* This block only applies to viewports <= 768px wide... */
}

Variable mặc định

Thông thường bạn sẽ define variable và sử dụng chúng trong các thuộc tính:

// _my-module.scss:
$message-color: blue !default;
p.message {
    color: $message-color;
}

Với !default, nó sẽ chỉ apply khi chưa có thuộc tính được định nghĩa trước đó.

$message-color: black;
@import 'my-module'; // Calling $message-color: blue !default;

Thì output sẽ ra:

p.message {
  color: black;
}

Control directives

Với SCSS, bạn có thể sử dụng các function logic như `@if` một cách dễ dàng:

$debug: false; // TODO: move to _settings.scss
.article {
    color: #444;

    @if ($debug) { // visualizing layout internals
        border: 1px dotted red;
    }
}

Sẽ render ra code cho mục if debug = false như sau:

.article {
  color: #444;
}

Ta có thể làm tương tự với @for, @each và @while như ví dụ dưới đây:

@each $name in 'save' 'cancel' 'help' {
    .icon-#{$name} {
        background-image: url('/images/#{$name}.png');
    }
}

Sẽ render ra thành:

.icon-save {
  background-image: url('/images/save.png');
}
.icon-cancel {
  background-image: url('/images/cancel.png');
}
.icon-help {
  background-image: url('/images/help.png');
}

Bạn có thể đọc thêm về phần này tại đây.

Danh sách dữ liệu

Ta có thể định nghĩa:

$buttonConfig: 'save' 50px, 'cancel' 50px, 'help' 100px; // TODO: move to _settings.scss

@each $tuple in $buttonConfig {
    .button-#{nth($tuple, 1)} {
        width: nth($tuple, 2);
    }
}

Và output sẽ là:

.button-save {
  width: 50px;
}
.button-cancel {
  width: 50px;
}
.button-help {
  width: 100px;
}

Điều này rất tiện khi bạn có 1 tập hợp các element gần giống nhau với sự khác biệt ở 1 thành phần, ví dụ icon web font.

Custom Function

Bạn có thể tự tạo function riêng để định nghĩa nếu cần:

@function make-greener($value) {
    @return $value + rgb(0,50,0); // arithmetic with colors is totally fine, btw
}
.box {
    background: make-greener(gray);
}

Thì có thể output ra:

.box {
  background: #80b280;
}

Biến mặc định

Trong mixins và function có hỗ trợ bạn thiết lập biến mặc định, chẳng hạn như trong tình huống dưới đây ta có xác định trước $elem là all:

@mixin transition($elem: all) {
  transition: $elem .3s ease;
}

Vậy nếu bạn gọi:

.box {
  @include transition;
}

Thì code sẽ render ra sẵn:

.box { transition: all .3s ease; }

Lược dịch bởi Khôi.
Tham khảo thêm các thủ thuật SCSS khác tại đây.

Nguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.