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.

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é:

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

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

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

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…

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.