tiểu luận Tìm hiểu về SCSS

Vậy SASS là gì??? Sass là một phần mở rộng của CSS3 bằng cách thêm quy tắc lồng nhau nesting, biến vatiables, mixins, thừa kế chọn selector inheritance… • SaSS được chuyển đổi sang CSS

Vậy SASS là gì???

 Sass là một phần mở rộng của CSS3 bằng cách thêm quy tắc lồng nhau

(nesting), biến (vatiables), mixins, thừa kế chọn (selector inheritance)…

• SaSS được chuyển đổi sang CSS nhờ command line

tool hoặc web-framework plugin.

p { font-size: 1.2em; }

}

NHƯNG!!!!

SCSS => CSS

Scss được biên dịch sang css thông qua phần mềm như Ruby,….

Quy trình làm việc

 Tạo một tập tin scss

 Viết thư cho nó, giống như CSS bình thường

 Dịch nó vào một tập tin CSS / thư mục:

 sass watch style.scss: style.css

 sass watch stylesheets / ↵

 sass: stylesheets / biên soạn

 Bất kỳ thay đổi trên file SCSS sẽ được biên dịch trên fill CSS

sắc, font stacks, giá trị bất kỳ của CSS,…).

 Tiết kiệm thời gian tìm kiếm và thay thế các giá trị

 Bắt đầu với kí hiệu $

 Giá trị biến nằm sau dấu :

Viết HTML

<div class= “menu_container” >

<ul>

<li><a href= "#" >Home</ a ></ li >

<li><a href= "#" >About</ a ></ li >

<li><a href= "#" >Services</ a ></ li >

<li><a href= "#" >Contact Us</ a ></ li >

</ul>

</div>

HTML

 Nếu lên style cho các thẻ <li> <ul> của main_container không ảnh hưởng đến các thẻ khác ta có đoạn CSS như sau:

.main_container ul { background : black ;}

.main_container ul li { color : red ;}

 Nhưng trong code CSS ta phải viết 2 class main_container nên ta sử dụng SCSS để viết đơn giản hơn:

}nav li { display: inline-block;}

nav a { display: block;

 Công dụng: Mang nhiều thuộc tính đã quy ước trong 1 mix nào đó bỏ vào một thành phần bất kỳ

mà không phải viết lại các thuộc tính đó.

 Cú pháp: @mixin tên_mix

Mixins

Ví dụ

Thường khi sử dụng thuộc tính float trong CSS thì

chúng ta phải khai báo luôn margin như thế này.

Giờ không muốn sử dụng float: left mà là

float:right

thì sao?

Không lẽ tạo 1 mixin nữa?

Mixins

Chỉ cần đặt thêm tham số cho cái mixin kia để chúng ta có thể thay đổi nó tùy vào thời điểm.

Inherritance/extend

Sử dụng @extend cho phép chia sẻ một tập hợp các thuộc tính CSS từ một selector khác

Ví dụ:

 Trong SCSS, có @import giúp bạn tổ chức

cấu trúc các tập tin CSS được tốt hơn.

 Import giúp chia nhỏ CSS và dễ bảo trì hơn

 Cú pháp:

@import ‘ file scss muốn import vào ’

Ví dụ: File muốn import vào ‘add’:

Ví dụ: File chứa file add được import vào: