Sass căn bản
Bài đăng này đã không được cập nhật trong 9 năm
Sass Căn Bản
SASS là một ngôn ngữ giúp mở rộng CSS với những tính năng vượt trội mà bản thân CSS thuần không thể cung cấp như nesting variasbles mixins extend/inheritance function ...
Cài đặt SASS và biên dịch
Cài đặt:
Để cài đặt SASS trước hết bạn phải cài đặt Ruby trước sau đó chỉ chạy lệnh sau trên command line
gem install sass
Biên dịch:
Khi bạn muốn biên dịch tập tin nào thì bạn chỉ cần chạy câu lệnh
sass input.sass output.csss
Nếu bạn không muốn cứ thay đổi file nào đó cũng lại phải chạy lại câu lệnh trên thì bạn có thể dùng câu lệnh sau để SASS có thể tự biên dịch sau mỗi lần bạn lưu lại những thay đổi
sass --watch input.sass:output.css
Nếu bạn muốn chuyển đổi tất cả các file SASS thì bạn có thể dùng lệnh
sass --watch sass:css
Tổng quan về SASS
SASS hỗ trợ 2 định dạng scss và sass. Cú pháp của SCSS không khác CSS thuần còn SASS thì quy định rất nghiêm về cách thụt, lùi dòng, khoảng trăng và không hề sử dụng {} và ;
Bạn có thể nhìn ví dụ sau để có thể hiểu hơn về cú pháp của SASS
ul
height : 40px
margin-top : 0
margin-left : 20px
width : 220px
li
padding : 22px 0 8px
width : auto
Khi biên dịch bạn sẽ nhận được
ul {
height: 40px;
margin-top: 0;
margin-left: 20px;
width: 220px;
}
ul li {
padding: 22px 0 8px;
width: auto;
}
Như đã nói ở trên cú pháp của SASS rất quan trọng khoảng trắng thụt, lùi dòng. Cũng từ ví dụ trên nếu bạn viết
ul
height : 40px
margin-top : 0
margin-left : 20px
width : 220px
li
padding : 22px 0 8px
width : auto
Khi biên dịch ra CSS
ul {
height: 40px;
margin-top: 0;
margin-left: 20px;
width: 220px;
}
li {
padding: 22px 0 8px;
width: auto;
}
Bạn đã thấy sự khác biệt rồi chứ.
Giờ mình sẽ tìm hiểu xem SASS sẽ giúp gì cho bạn
Variables
Trong SASS thì bạn có thể dùng biến để khai báo 1 giá trị nào đó mà chúng ta đã xác định trước và sẽ được dùng nhiều lần như: mã màu, font-size hay bất cứ giá trị nào mà bạn sử dụng nhiều. Để khai báo biến bạn thêm $ vào trước tên biến. Và để sử dụng biến đó thì cũng rất đơn giản. Ví dụ
$simple_color: #333
h1
color: $simple_color
Khi biên dịch bạn sẽ được
h1 {
color: #333
}
Chức năng thật sự rất tuyệt trong việc clean code cho bạn. và khi bạn muốn đổi thì ta cũng chỉ cần tìm đến đúng biến này là có thể thay đổi tất cả những nơi có gọi đến biến này.
Nesting
Khi viết CSS chắc chắn bạn đã gặp trường hợp viết đi viết lại nhiều lần khi mà có các thẻ lồng nhau. Điều này quả thực rất mất thời gian. Nhưng với SASS thì đã có quy tắc Nesting giúp chúng ta dọn dẹp dòng code dài dòng mất thời gian đó.
Nesting cho phép viết các quy tắc CSS lồng vào nhau, điều mà không bao giờ CSS thuần làm được.Và bạn có thắc mắc liệu khi biên dịch bạn có được đoạn CSS mà bạn muôn? Bạn hãy xem ví dụ dưới
Ví dụ với đoạn HTML đơn giản sau
<div id="header">
<h2>Header</h2>
<p>Content
<a href="">Go to link</a>
</p>
</div>
h2
font-size: 14px
color: #f25047
p
font-size: 11px
color: #282828
a
display: block
padding: 5px 10px
Biên dịch sang CSS ta được
h2 {
font-size: 14px;
color: #f25047;
}
h2 p {
font-size: 11px;
color: #282828;
}
h2 p a {
display: block;
padding: 5px 10px;
}
Qua ví dụ trên bạn thấy rằng với SASS thì bạn không cần phải viết đi viết lại mà chỉ cần lùi đầu dòng vào thẻ cha của thẻ đó.
Nesting còn có tiện ích khác nữa nếu bạn dùng & trước hoặc sau thẻ đó. Xét ví dụ sau
<div>
<h3>
<a href="">Sub Header</a>
</h3>
</div>
a
display: block
padding: 5px 10px
&:hover
color: #01a9d4
h3 &
font-size: 12px
a {
display: block;
padding: 5px 10px;
}
a:hover {
color: #01a9d4;
}
h3 a {
font-size: 12px;
}
Khi sử dụng & thì nhìn vào cấu trúc của SASS bạn thấy hoàn toàn dễ hiểu và clean hơn CSS rất nhiều.
Partials
Bạn có thể tạo các file thành phần nhỏ với định dạng tên_file_name.sass, và để sử dụng các file thành phần này bạn include file này vào bằng cách thêm @import và đi tới khái niệm tiếp theo đây Import
Import
Trong SASS việc tách ra nhiều tập tin nhỏ, riêng biệt để sử dụng dễ dàng hơn, dùng nhiều nơi khác mà không cần lặp đi lặp lại đoạn code đó. Việc này giúp bạn tổ chức cấu trúc các tập tin CSS được tốt hơn.
Xét ví dụ sau: Tạo một file _width.sass trong file này dùng để khai báo giá trị của các biến width tương ứng
$w-1: 250px
$w-2: 200px
$w-3: 150px
$w-4: 100px
$w-5: 50px
Sau đó bạn import file _width.sass vào trong file SASS hiện hành bằng cách thêm @import ở đầu file.
@import “_width”
email
width: $w-1
height: $w-5 / 2
pass
width: $w-4
height: $w-5 / 2
Biên dịch thành CSS
email {
width: 250px;
height: 25px;
}
pass {
width: 100px;
height: 25px;
}
Ta vẫn thu được kết quả như mong muốn khi đã tách ra 2 file. Điều này giúp ích cho ta rất nhiều khi dùng lại biến ở nhiều nơi khác mà chỉ cần import file bạn cần vào file hiện hành. Khi bạn đặt tên file cần import vào có dạng _name.sass thì trình dịch sẽ bỏ qua mà không biên dịch file này ra CSS.
Thứ tự import rất quan trọng, những khai báo của file sau sẽ ghi đè lên khai báo của các file trước vì thế bạn nên chú ý thứ tự của các file import vào cùng file hiện hành.
Mixin
Chắc hẳn là các bạn không còn lạ với khái niệm function của PHP. Mixin cũng tương tự như 1 function. Bạn có thể viết 1 hàm trong SASS và sau đó muốn sử dụng nó thì bạn gọi nó ra. Hàm truyền vào tham số hoặc không. Ví dụ
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px)
Nhìn ví dụ trên ta thấy cấu trúc của Mixin giống như cấu trúc hàm. Hàm này có tên là border-radius và tham số truyền vào là $radius. Khi cần dùng ở đâu thì gọi đến hàm đó +border-radius(10px). Khi biên dịch ra CSS ta sẽ được kết quả như sau
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Trong mixin bạn có thể sử dụng tham số mặc định. Bạn cũng có thể ghi đè nếu muốn
Khi có một hoặc nhiều giá trị trong tham số bạn có thể khai báo như ví dụ sau
=transition($trans...)
-webkit-transition: $trans
-moz-transition: $trans
transition: $trans
.transition
+transition(all .10s linear)
Khi biên dịch ta nhận được kết quả
.transition {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
Từ ví dụ trên ta thấy bạn chỉ cần thêm ... vào cuối biến khi tham số của bạn có nhiều giá trị.
Extend/Inheritance
Tính năng này giúp bạn kế thừa thuộc tính đã được dùng trước đấy trong SASS. Và để sử dụng chúng thì bạn cần thêm @extend vào như ví dụ sau
.message
border: 1px solid #ccc
padding: 10px
color: #333
.success
@extend .message
border-color: green
.error
@extend .message
border-color: red
Khi biên dịch ta nhận được
.message, .success, .error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
Khái niệm kế thừa thì đã quá quen thuộc rồi và giờ đây khái niệm nàyđã có thể sử dụng trong SASS. Trong SASS còn kiểu kế thừa khác, ví dụ:
%message
border: 1px solid #ccc
padding: 10px
color: #333
.success
@extend %message
border-color: green
.error
@extend %message
border-color: red
Ở đây ta thấy rằng % được đặt trước message nhằm tránh những khai báo thuộc tính không cần thiêt. Khi biên dịch ta được
.success, .error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
Hàm trong SASS
Khái niệm này đã được nhắc tới trong phần mixin. Nhưng nó có gì khác biệt với mixin?
Xét ví dụ
$grid-width: 40px
$gutter-width: 10px
@function grid-width($n)
@return $n * $grid-width + ($n - 1) * $gutter-width
#sidebar
width: grid-width(5)
Sau khi biên dịch
#sidebar {
width: 240px;
Như ví dụ trên ta thấy rằng function thì bắt buộc bạn phải có giá trị trả về @return, còn mixin thì không. Với mixin thì cần có + nhưng với hàm thì chỉ cần gọi tên hàm và truyền tham số vào nếu có.
Operators
Việc tính toán trong SASS cũng không hề khó khăn. SASS hỗ trợ đầy đủ các phép toán : +, -, *, /, %
Xét ví dụ sau
.container
width: 100%
article[role="main"]
float: left
width: 600px / 960px * 100%
aside[role="complimentary"]
float: right
width: 300px / 960px * 100%
Kết quả nhân được sau khi biên dịch
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
Trên đây là những tìm hiểu cơ bản và cần thiết về SASS mà bạn cần biết để có thể làm việc được với SASS. Nếu bạn muốn tìm hiểu sâu hơn về SASS bạn có thể tìm hiểu thêm tại đây http://sass-lang.com/documentation/file.SASS_REFERENCE.html
All rights reserved
