Ngày hôm nay chúng ta sẽ đi vào tìm hiểu Sass là gì và cách sử dụng variable, nesting, mixin, function và extend của Sass vào trong dự án thực tế nhé!
Tóm Tắt
Sass là gì?
Sass là một CSS preprocessor, một phần mở rộng của CSS. Nó cung cấp cho bạn thêm các chức năng và tiện ích để có thể viết CSS được dễ dàng và hiệu quả hơn. Trong các dự án thực tế thì các file CSS có tới hàng ngàn dòng code nhưng lại không có bất kỳ các thành phần nào có thể reusable(sử dụng lại) cũng như không có một logic nào cả. Điều này sẽ làm chúng ta khó khăn trong việc quản lý. Do đó Sass ra đời giúp bạn giải quyết các vấn đề trên mà không làm ảnh hưởng tới cách CSS hoạt động.
Sass hoạt động như thế nào?
Thay vì chúng ta sẽ viết các file CSS như bình thường thì ở đây chúng ta sẽ viết Sass file. Sau đó sẽ sử dụng compiler(trình biên dịch) để chuyển các đoạn mã Sass thành CSS.
Các Tiện Ích Của Sass
- Variables: Nơi lưu trữ các giá trị mà bạn có thể sử dụng lại được như là màu sắc, khoảng cách, font-size…
- Nesting: giúp bạn có thể lồng các selector lại với nhau giúp chúng ta phải viết ít code hơn.
- Operator: Bạn có thể áp dụng các biểu thức toán học vào trong CSS.
- Partials và import: Đây được xem là tiện ích quan trọng trong Sass. Nó giúp bạn có thể viết nhiều file CSS khác nhau và import tất các cả file đó vào trong một file duy nhất.
- Mixins: Giúp chúng ta viết các mã CSS có thể sử dụng lại được.
- Functions: Giúp Bạn có thể viết các biểu thức phức tạp với giá trị do chúng ta cung cấp.
- Extend: cho phép kế thừa các thuộc tính của các thành phần khác.
- cho phép chúng ta viết các đoạn mã phức tạp bằng việc sử dụng loop(vòng lặp) và condition(điều kiện).cho phép kế thừa các thuộc tính của các thành phần khác.
Các Kiểu Syntax của SASS
Trong Sass thì sẽ có hai kiểu syntax là Sass và Scss. Để hiểu rõ hơn bạn xem hình ảnh bên dưới nhé!
Để chúng ta có thể dễ dàng viết code thì mình sẽ chọn kiểu syntax SCSS(vì nó có cú pháp khá giống với CSS) nhé!
Cách sử dụng variable trong Sass
Variables: Nơi lưu trữ các giá trị mà bạn có thể sử dụng lại được như là màu sắc, khoảng cách, font-size… Điều quan trọng bắt buộc là khi khai báo biến thì chúng ta phải sử dụng dấu $ trước tên nhé!
Ví dụ bạn muốn đặt variable để lưu trữ màu sắc thì chúng ta sẽ viết như sau: $color-nav: #1E90FF;
Để hiểu rõ hơn chúng ta sẽ đi vào tạo và thiết kế navigation bằng Sass nhé!
HTML
<nav>
<ul class="navigation">
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Dịch Vụ</a></li>
<li><a href="#">Về Chúng Tôi</a></li>
</ul>
</nav>
SCSS
*{
margin:0;
padding:0;
box-sizing: border-box;
}
$color-nav: #1E90FF;
nav{
margin: 30px;
padding: 12px;
background-color: $color-nav;
}
Như bạn thấy thì chúng ta sử dụng $color-nav để lưu trữ thông tin màu sắc cho thanh tiêu đề. Sau này khi bạn muốn đổi màu nền của navigation thì chỉ cần thay đổi giá trị của biến $color-nav là được. Và kết quả bạn xem hình ảnh bên dưới nha.
Cách sử dụng nesting trong Sass
Tiếp tục với ví dụ trên chúng ta sẽ đi vào tìm hiểu cách các selector được lồng vào nhau nhé.
SCSS
.navigation {
list-style: none;
li {
display: inline-block;
margin-left: 30px;
}
}
Để hiểu rõ hơn cách lồng các selector trong Sass thì bạn xem hình ảnh bên dưới nha.
Ở đây mình có một chú ý nhỏ là nó sẽ không giới hạn các selector có thể lồng vào với nhau. Do đó bạn hoàn toàn có thể chọn bất cứ thành phần con nào mà mình mong muốn. Và kết quả của đoạn mã trên ở bên dưới nha:
Tiếp theo mình muốn giới thiệu đến bạn một thuộc tính là &. Nó sẽ giúp chúng ta có thể tránh lặp lại phần tử selector trong đoạn mã. Để hiểu rõ hơn bạn hãy xem hình ảnh dưới đây nhé!
Và dưới đây là dự án tạo navigation hoàn chỉnh bằng HTML và SCSS trên codepen nhé!
See the Pen by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách sử dụng @mixin trong Sass
Bây giờ chúng ta sẽ đi vào tìm hiểu cách thuộc tính này thông qua bài thực hành ở dưới đây nhé!
HTML
<nav>
<ul class="navigation">
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Dịch Vụ</a></li>
<li><a href="#">Về Chúng Tôi</a></li>
</ul>
<div class="btn">
<a class="btn-signin" href="#">Sign In</a>
<a class="btn-signup" href="#">Sign Up</a>
</div>
</nav>
SCSS
*{
margin:0;
padding:0;
box-sizing: border-box;
}
$color-nav: #1E90FF;
$color-link: #fff;
$background-color-signin:#00BFFF;
$background-color-signup:#FF8C00;
$width-btn: 150px;
nav{
margin: 30px;
padding: 12px;
background-color: $color-nav;
&::after{
content: "";
clear: both;
display: table;
}
}
.navigation{
list-style: none;
float: left;
li{
display: inline-block;
margin-left: 30px;
&:first-child{
margin: 0px;
}
a{
text-decoration: none;
color: $color-link;
}
}
}
.btn{
float: right;
}
.btn-signin,
.btn-signup{
display: inline-block;
text-align: center;
border-radius: 100px;
text-decoration: none;
width : $width-btn;
color: $color-link;
}
.btn-signin{
&:link{
background-color: $background-color-signin;
}
}
.btn-signup{
&:link{
background-color: $background-color-signup;
}
}
Và kết quả bạn xem hình ảnh dưới đây nhé!
Bây giờ chúng ta sẽ bắt đầu sử dụng thuộc tính @mixin vào đoạn mã trên để giúp nó dễ chỉnh sửa và sử dụng lại ở sau này nhé. Đầu tiên mình sẽ tạo một chức năng clearfix để xoá các ảnh hưởng về khoảng cách khi sử dụng thuộc tính float ở trong website.
Để hiểu rõ hơn về cách khai báo và sử dụng thì bạn hãy xem hình ảnh dưới đây nha!
Và bây giờ khi lúc nào bạn cần sử dụng clearfix thì chỉ cần gọi @include clearfix vào đối tượng selector mà mình mong muốn. Kết quả bạn xem trên Codepen nha.
See the Pen bai thuc hanh ve sass 2 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Trong phần tiếp theo này mình sẽ giới thiệu đến bạn cách sử dụng tham số trong @mixin. Để hiểu rõ hơn thì bạn xem hình ảnh dưới đây nha.
Như bạn thấy thì $color sẽ là màu sắc mà chúng ta muốn chọn cho đối tượng và tuỳ vào các thành phần khác nhau thì bạn sẽ chọn các màu sắc khác nhau cho phù hợp. Điểm minh thích ở đây chính là chúng ta có thể gán color vào trực tiếp mà không cần phải viết lại đoạn code mới. Và kết qủa bạn xem dự án ở bên dưới nhé!
See the Pen bai thuc hanh ve sass by haycuoilennao19 (@haycuoilennao19) on CodePen.
Cách sử dụng function()
Trong phần này chúng ta sẽ cùng nhau đi vào tìm hiểu cách sử dụng function của Sass vào thiết kế và phát triển web nhé. Mình sẽ lấy ví dụ ở trên để minh hoạ chức năng của nó là giúp Bạn có thể viết các biểu thức phức tạp với giá trị do chúng ta cung cấp.
Và kết quả bạn xem trên Codepen nhé!
See the Pen bai thuc hanh ve sass 3 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Cách sử dụng extend()
Extend cho phép kế thừa các thuộc tính của các thành phần khác. Và để hiểu rõ hơn thì chúng ta hãy sử dụng nó vào ví dụ phía trên nhé!
Như bạn thấy thì chúng ta có hai nút sign in và sign up đều được sử dụng chung các thuộc tính CSS do đó mình sẽ sử dụng chức năng extend để viết một đoạn code để sử dụng chung nha.
Và kết quả bạn xem dự án codepen bên dưới nhé!
See the Pen bai thuc hanh ve sass 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức hữu ích về Sass cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
