Sass – Viết css nhanh hơn, tốt hơn – Phần 2/3: Các quy tắc

Hello ae, ae chuẩn bị nước nôi, chỗ ngồi thoải mái để chúng ta tiếp tục nhé ae. Hôm nay chúng ta sẽ tìm hiểu các sức mạnh mà Scss mang lại.

Happy Cat GIF by Abitan
SCSS – Super CSS (gọi vầy cho ngầu được không ae).

Mình sẽ phân loại các nguyên tắc thành 3 level từ thấp tới cao dần như sau: Nhi đồng > Tiểu học > Trung học cơ sở, cụ thể là:

Level nhi đồng gồm:

  • Variant – Biến
  • Nesting – Phân cấp

Level tiểu học gồm:

  • Extend – Kế thừa
  • Mixin & include (2 cái này chưa biết dịch sao cho sát nghĩa)

Level trung học cơ sở gồm (Level này mình đề cập vào bài viết để ae biết nếu muốn tìm hiểu sâu hơn về thuật toán, logic, dev front-end. Cá nhân mình không thực hành và sử dụng nhiều khi viết scss):

  • Placeholders
  • Function
  • if / else

OK ae, giờ chúng ta đi chi tiết từng level nhé:

1 – Khai báo biến


Cú pháp là gì ?

$tenbien: giatri;

$a: red;
$b: 20px;

Ví dụ thử coi ?

//Khai báo biến
$primary-color: red;
$accent-color: blue;


//Gán biến theo cú pháp scss
.card {
  background: $primary-color;
  border: 1px solid $accent-color;
}

Khi nào thì áp dụng ?

Thông thường ae UI/UX design thiết kế dự án trên figma sẽ có 1 page document mô tả, quy chuẩn các thông số về color, text style, spacing… ta thường gọi là Design guideline, khi ta update Design guideline, các components sẽ tự động cập nhật theo Design guideline để đảm bảo tính thống nhất và đồng bộ.

Design Guideline in BuildFocus. It is really important to create and… | by  Rindu Salsabilla Chandra | Medium
Design guideline

Tương tự vậy, bên Front-end ta cũng nên tổ chức môt cấu trúc tương tự (mình sẽ chia sẻ thêm cách tổ chức một project với scss sau nha).

Dễ dàng cập nhật và quản lý. OK không ae

2 – Nesting

Tăng tốc độ viết css
Dễ dàng nắm cấu trúc html của tài liệu

Ví dụ 1 – Cơ bản nhất

//HTML

<section class="card1">
    <h2>Xe sedan giá 1 tỷ tháng 4: Vinfast Lux A2.0 áp sát Toyota Camry</h2>
    <p>
      Phân khúc xe sedan giá 1 tỷ tháng 4 có tăng tưởng đều ở các mẫu xe...
    </p>
  </section>
//SCSS

.card {
  padding: 20px;
  border-radius: 12px;
  h2 {
    font-size: 24px;
    line-height: 1.42;
  }
}
//CSS 

.card {
  padding: 20px;
  border-radius: 12px;
}
.card h2 {
  font-size: 24px;
  line-height: 1.42;
}

Ví dụ 2 – Nâng cao với "pseudo selectors

//HTML

<div class="card">
  <h2 class="link">This is title</h2>
</div>
//SCSS

.card {
  padding: 20px;
  border-radius: 12px;
  &:before {
    content:"Super card";
    color: white;
  }
  h2.link {
    font-size: 24px;
    line-height: 1.42;
    &:hover {
      color:red;
    }
  }
}
//CSS

.card {
  padding: 20px;
  border-radius: 12px;
}
.card:before {
  content:"Super card";
  color: white;
}
.card h2.link {
  font-size: 24px;
  line-height: 1.42;
}
.card h2.link:hover {
  color:red;
}

Ví dụ 3 – Nâng cao với "pseudo selectors + states”

//HTML

<div class="card">
  <h2 class="link">This is title</h2>
</div>
//SCSS

.card {
  padding: 20px;
  border-radius: 12px;
  &:before {
    content:"Super card";
    color: white;
    &:hover {
      content:"Regular :D card";
      color: yellow;
    }
  }
}
//CSS

.card {
  padding: 20px;
  border-radius: 12px;
}
.card:before {
  content:"Super card";
  color: white;
}
.card:hover::before {
  content:"Regular :D card";
  color: yellow;
}

3 – @extend

Cú pháp là gì ?

.name{
    @extend .class
}

Ví dụ thử coi ?

/SCSS

.btn_primary {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 20px;
}

.btn_primary.active {
    @extend .btn_primary;
    background: black;
    color: whitesmoke;
}

Khi nào thì áp dụng ?

Chúng ta sẽ sử dụng @extend với những elements / components dùng đi dùng lại nhiều như: button, form, text style…

4 – @mixin & @include

Mixin = Khai báo
Inculde = Kế thừa

Ví dụ 1 – Khai báo cơ bản

@mixin btn_reset {
    cursor: pointer;
    text-decoration: underline;
}
.btn_special {
    @include btn_reset;
    font-size: 24px;
    font-weight: 600;
}

Ví dụ 2 – Khai báo mixin chứa biến số (biến số ở đây có thể là giá trị / thuộc tính)

//SCSS

@mixin flexwidth($w) {
    padding: 20px;
    width: $w;
}
.sidebar{
    @include flexwidth(280px);
    mmargin-top: 20px;
}
.main{
    @include flexwidth(calc(100% - 280px));
    margin-top: 20px;
}
//CSS

.sidebar{
    padding: 20px;
    width: 280px;
    margin-top: 20px;
}
.main{
    padding: 20px;
    width: calc(100% - 280px);
    margin-top: 20px;
}

Vậy thôi ae, với mục tiêu tìm hiểu logic, áp dụng cơ bản thì chỉ cần ae sử dụng thành thạo 4 quy tắc trên là thoải mái xài rồi. Điều này không có nghĩa là các quy tắc khác không quan trọng nha ae, nhưng hãy tùy theo mục đích sử dụng để cân đối thời gian tìm hiểu cho hợp lý nha. Quan điểm cá nhân của mình trong việc này là biết sơ sơ nhiều thứ cũng tốt nhưng phải thật thuần thục một thứ 🙂

Ae đọc bài này trong 5 phút, còn mình viết bài này trong nửa ngày, giờ thì ae bật editor lên và viết những dòng code cho bản thân mình nhé, học phải đi đôi với hành mới nhớ được lâu nha. Hẹn gặp lại ae ở phần cuối – Bài viết mình chia sẻ một số mẹo khi viết scss hay cấu trúc project.


Posted

in

by

Tags:

Comments

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *