Sass căn bản

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
awidth : 220px

li
    padding : 22px 0 8px
    awidth : auto

Khi biên dịch bạn sẽ nhận được

ul {
height: 40px;
margin-top: 0;
margin-left: 20px;
awidth: 220px;
}
ul li {
padding: 22px 0 8px;
awidth: 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
awidth : 220px

li
padding : 22px 0 8px
awidth : auto

Khi biên dịch ra CSS

ul {
height: 40px;
margin-top: 0;
margin-left: 20px;
awidth: 220px;
}

li {
padding: 22px 0 8px;
awidth: 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 _awidth.sass trong file này dùng để khai báo giá trị của các biến awidth tương ứng

$w-1: 250px
$w-2: 200px
$w-3: 150px
$w-4: 100px
$w-5: 50px

Sau đó bạn import file _awidth.sass vào trong file SASS hiện hành bằng cách thêm @import ở đầu file.

@import “_awidth”

email
	awidth: $w-1
	height: $w-5 / 2

pass
	awidth: $w-4
	height: $w-5 / 2

Biên dịch thành CSS

email {
	awidth: 250px;
	height: 25px;
}

pass {
	awidth: 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à $$adius. 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-awidth: 40px
$gutter-awidth: 10px

@function grid-awidth($n)
	@return $n * $grid-awidth + ($n - 1) * $gutter-awidth

#sidebar
	awidth: grid-awidth(5)

Sau khi biên dịch

#sidebar {
	awidth: 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
    awidth: 100%

article[role="main"]
    float: left
    awidth: 600px / 960px * 100%

aside[role="complimentary"]
    float: right
    awidth: 300px / 960px * 100%

Kết quả nhân được sau khi biên dịch

.container {
    awidth: 100%;
}

article[role="main"] {
    float: left;
    awidth: 62.5%;
}

aside[role="complimentary"] {
    float: right;
    awidth: 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