Front End - Vài Phút Tìm Hiểu SASS
Sass
9
CSS
44
frontend
26
front-end
7
White

Hùng Phạm viết ngày 28/05/2019

Như tiêu đề mình sẽ giới thiệu cho các anh em một bài viết ngắn gọn nhất về SASS - một CSS Prepocessor mà các anh em cần phải biết nếu đã xác định trở thành một Front-end Developer.
alt text

Quảng cáo một tí đây là link bài viết gốc của tui ahihi :kissing_cat: :kissing_cat: :kissing_cat:
https://hungphamdevweb.com/front-end-vai-phut-tim-hieu-sass.html

Vậy SASS là gì?

SASS là một CSS Preprocessor giúp các anh em viết CSS nhanh và có cấu trúc tổ chức file rõ ràng hơn. Thông qua một số đặc tính đặc biệt như: khai báo variable, quy tắc nesting, partials và mixins, SASS sẽ giúp việc code CSS bớt nhàm chán và thêm một tầm cao mới :smile_cat: :smile_cat: :smile_cat:

Lý do cần phải biết SASS

  • Muốn được lương cao và dễ pass phỏng vấn hơn vì hầu như mình đều thấy các công ty đều yêu cầu phải biết SASS nếu đã xác định là Front-end Developer
  • Dễ dàng quản lý và tổ chức file cho CSS Source.
  • Kết hợp được với nhiều công cụ khác như autoprefixer để tự động thêm tiền tố chẳng hạn, khi mà code CSS thông dụng bình thường các anh em phải tốn thời gian viết đi viết lại các tiền tố này.

Chung quy lại khi các anh em đã biết SASS rồi thì chắc cũng sẽ không muốn dành thời gian ngồi viết CSS bình thường nữa đâu. Tin mình đi :smile_cat: :smile_cat: :smile_cat:

Một vài quy tắc của SASS:

Khai báo biến (variable):

Một trong những điểm thú vị của SASS mà CSS không có đó là khả năng khai báo biến. Để hiểu rõ hơn mình sẽ có ví dụ như sau:

padding-top: 0;
margin-right: 0;

Ở đây mình có 2 thuộc tính trên cùng chung giá trị 0, do đó để tối giản code và dễ quản lý hơn mình sẽ viết lại như sau:

$zero: 0;
padding-top: $zero; 
margin-right: $zero;

Quy tắc nesting:

Quy tắc nesting hay còn gọi là quy tắc xếp chồng. Ok để làm rõ dưới đây sẽ là một minh hoạ nho nhỏ để các anh em hiểu thêm về quy tắc nesting trong SASS Ở đây mình sẽ phải gọi 2 lần tag ul trong việc style CSS cho một tag con li .
ul {display: block;}
ul li {display: inline-block; margin: 5px 0;}
Để gọn gàn hơn và dễ maintain sau khi các CSS của mình trở nên to hơn, mình sẽ simplify nó lại như sau:
ul {
  display: block;

  li {
    display: inline-block;
    margin: 5px 0;
  }
}
Ở đây mình sẽ đặt CSS cho tag li nằm trong CSS của tag ul và ta gọi đó là quy tắc xếp chồng. Cool chưa :kissing_cat: :kissing_cat: :kissing_cat:

Cơ chế import (partials):

Partial dịch sang tiếng việt có nghĩa là từng phần, do đó cơ chế này sẽ giúp các anh em phân cấu trúc CSS của mình thành nhiều file khác nhau và dùng function @import để kết nối các file này lại. Giả sử mình có hai là file app.scss, _partial.scss ở cùng một cấp thư mục, bây giờ mình muốn import file partial.scss từ file app.scss thì đầu tiên mình cần phải bỏ dấu _ trước tên của file partial (đây là quy định của SASS) và code của file app.scss của mình sẽ có dạng như sau:
@import 'partial';

Quy tắc mixins:

Ở đây mình thường dùng mixins cho những việc mình cần phải viết một lần mà sử dụng lại ở nhiều nơi điển hình ở đây đó là viết media query chẳng hạn.

Chúng ta sẽ cùng làm rõ qua ví dụ minh hoạ bên dưới:

$breakpoint-1: 425px;
@mixin breakpoint-small() {
  @media screen and (max-width: $breakpoint-1){
    @content
  }
}

Ở đây mình sẽ viết một mixin có tên là breakpoint-small() và bên trong mixin này mình đã khai báo một media query chứa biến @content

Giả sử mình muốn khai báo một CSS width: 10% cho giao diện mobile chẳng hạn.
Thì chúng ta sẽ làm như sau:

@include breakpoint-small(){
  w-10-s {width: 10%;} 
}

Chúng ta sẽ dùng @include để gọi mixins và w-10-s {width: 10%;} sẽ là nội dụng sẽ được hiển thị ở biến @content

Kết luận:

Cơ bản là SASS chỉ có nhiêu đây thôi, nhưng bên cạnh nó còn vài cái mình không liệt kê ví dụ như @extend chẳng hạn vì bản thân mình chưa có dùng nên không thể viết được :joy:

Các anh em có thể xem thêm về SASS trên website chính của nó nhé:

https://sass-lang.com/guide

Nhưng mình nghĩ với nhiêu đây thôi cũng đã đủ để cho các anh em làm việc rồi.

Để hiểu rõ thêm các anh em có thể xem cách mình sử dụng SASS như thế nào trong library mình đang contribute nhé.

Mọi thắc mắc vui lòng để lại bình luận bên dưới, viết tới đây cũng dài lắm rồi

Thân chào và quyết thắng, hẹn gặp lại vào một bài viết không xa :joy: :joy: :joy:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hùng Phạm

14 bài viết.
15 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 2
CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên c...
Hùng Phạm viết 8 tháng trước
7 2
White
4 2
Webpack là một cái tên không quá mới nhưng mình nghĩ không ít lần các anh em đã nghe qua nó. Nhiệm vụ chính của Webpack trong hệ thống là dùng để đ...
Hùng Phạm viết 8 tháng trước
4 2
White
4 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết 7 tháng trước
4 0
Bài viết liên quan
White
33 6
Mình có một anh bạn người Pháp tên là Aurelien, anh này có một biệt tài đó là convert được màu RGB sang mã Hex chỉ bằng cách tính nhẩm. Phương phá...
Huy Trần viết 2 năm trước
33 6
White
4 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết 7 tháng trước
4 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
15 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!