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

Rate this post

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@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 $elemall:

@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.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...