Sử dụng SASS để viết CSS cho web site 1 cách chuyên nghiệp (Phần 2)

Tiếp theo mình sẽ hướng dẫn cách code bằng scss.

1.Quy tắc xếp chồng

Ví dụ:

.parent
{
	font-size{18px;}
	.child
	{
		font-size:14px;
		&:after
		{
			background:#fafafa;
		}
	}
	div
	{
		margin:0px;
	}
}

Ta sẽ được

.parent
{
    font-size{18px;}
}
.parent .child
{
    font-size{14px;}
}
.parent .child:after
{
    background:#fafafa;
}
.parent div
{
    margin:0px;
}

Các bạn có thể thấy các thành phần con thì chỉ cần ghi trong dấu “{ }” của div cha. Có thể chứa nhiều div con trong 1 div cha.

ngoài ra các thộc tính đặc biệt như hover, after, before, active, focus, visited.. thì sử dụng thêm “&:hover”

2. Đặt biến

Tiếp theo nếu bạn có 1 thuộc tính sử dụng nhiều lần như background, color, bạn có thể đặt biến cho nó như sau:

//-------- BORDERS
$base-border-color:					#dbdbdb;
$main_border:						1px solid $base-border-color;
$dark-border-color:					#333;
$light-border-color:				#fff;
$homepage-footer-border:            #d9d9d9;
$border-button:#0f0f0f;
$border-button-hover:#ff3232;
$border-free-shippng:#dadada;
$blue-border: #31a5ff;
$border-layered: #efefef;

//--------- BACKGROUNDS
$base-box-bg:                       #fbfbfb;
$table-background:                  #efefef;
$dark-background:                   #333;
$light-background:                  #fff;
$homepage-footer-bg:                #1f1f1f; 
$blue-bg: #31a5ff;
$green-bg:#a7d992;
$bg-head-top:#313131;
$bg-head-second:#1f1f1f;
$bg-head-menu:#0f0f0f;
$bg-top-brand:#4abf1c;
$bg-button:#ff3232;
$bg-hover-button:#0f0f0f;
$label-new:#3bd1a5;
$label-sale:#454545;
$bg-title-heading:#efefef;

//--------- COLORS
$base-body-color:                  #666;
$base-text-color:                   #333;
$base-heading-color:				$base-text-color;
$base-title-color:					$base-text-color;
$light-text-color:                  #fff;

 

Các bạn có thể thấy cách đặt biến trong scss như trên.

1 biến cần sử dụng thuộc tính của 1 biến khác thì chỉ việc gán biến đó vô như ví dụ.

Khuyến cáo cho các bạn nên tạo 1 file riêng để chứa các biến. sau đó thì import file đó vô file scss nào cần sử dụng  @import “ten_file”;

tên file ko có .scss

3. Quy tắc Mixin

Cách dùng cơ bản. Bạn có 1 danh sách các thộc tính cần dùng nhiều lần

ví dụ:  .parent{display:table;content:””;clear:both;}

ta có thể sử dụng mixin cho trường hợp này

@mixin clear 
{
	display:table;
	content:"";
	clear:both;
}
.parent
{
	@include clear;
}
.child
{
	@include clear;
}

Ta sẽ được

.parent
{
	display:table;
	content:"";
	clear:both;
}
.child
{
	display:table;
	content:"";
	clear:both;
}

 

Nâng cao. cùng các thuộc tính đó nhưng các giá trị thì khác nhau bạn có thể sử dụng cách này

@mixin clear($bien1,$bien2,$bien3)
{
	display:$bien1;
	content:$bien2;
	clear:$bien3;
}
.parent
{
	@include clear(table,"",both);
}
.child
{
	@include clear(inline,"Remove",none);
}

Ta sẽ có

.parent
{
	display:table;
	content:"";
	clear:both;
}
.child
{
	display:inline;
	content:"Remove";
	clear:none;
}

 

Giống với cách sử dụng function trong php.

Ngoài ra scss còn có nhiều phần khác nữa nhưng theo mình những điều cơ bản trên đủ cho bạn css 1 cách đầy đủ rồi.