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

WHAT IS SCSS ? VARIABLE NESTING MIXINS MEDIA QUERRIES INHERTANCE/EXTEND INHERTANCE/EXTEND 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. SCSS giống với CSS????  CSS .content h2 { font-size: 2em; } .content p { font-size: 1.2em; } • SCSS .content { h2 { font-size: 2em; } p { font-size: 1.2em; } } NHƯNG!!!!  SCSS gọn gàng hơn.  SCSS linh hoạt hơn.  Viết SCSS nhanh hơn viết CSS.  SCSS dễ quản lý hơn.  SCSS cho phép thử nghiệm nhiều hơn CSS.  SCSS có sử dụng biến (variables). 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 WHAT IS SCSS ? VARIABLE NESTING MIXINS MEDIA QUERRIES INHERTANCE/EXTEND INHERTANCE/EXTEND $variable  Variables cho phép chúng ta sử dụng cùng một giá trị ở nhiều nơi ( màu sắc, font stacks, giá trị bất kỳ của CSS,…).  Thay đổi các giá trị của biến sẽ làm thay đổi ở khắp mọi nơi.  Tiết kiệm thời gian tìm kiếm và thay thế các giá trị $variable  Bắt đầu với kí hiệu $  Giá trị biến nằm sau dấu :  Kết thúc bằng dấu ; $red  $font  $margin $column $type : : : : : #FF0000; “Hello World", VNI-Times, Sans-Serif; 10px; 10px; 1em; SCSS CSS $base-font: 16px; $base-color: #444; $heveltica: Helvetica, Arial, sans-serif; body { color: $base-color; font: $base-font $heveltica; } body { color: #444444; font: 16px Helvetica, Arial, sans-serif; } $variable [...]... WHAT IS SCSS ? 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 Inherritance/extend Ví dụ:  SCSS: CSS: VARIABLE NESTING MIXINS MEDIA QUERRIES INHERTANCE/EXTEND IMPORT WHAT IS SCSS ? IMPORT  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... {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: main_container{ ul {background: black; li{color: red; } } Vây, các quy tắc xếp chồng sẽ giúp bạn đồng bộ những thành phần cùng với nhau SCSS nav { ul { list-style: none; } li { display: inline-block; } a{ display: block; padding: 10px; } } CSS nav ul { list-style:...VARIABLE NESTING MIXINS MEDIA QUERRIES INHERTANCE/EXTEND INHERTANCE/EXTEND WHAT IS SCSS ? Nesting  Scss tránh sự lặp lại của selectors trong một cái khác  Sử dụng thụt đầu dòng để dễ nhìn thấy được các mối quan hệ  Viết code nhanh hơn Viết HTML HTML . gàng hơn.  SCSS linh hoạt hơn.  Viết SCSS nhanh hơn viết CSS.  SCSS dễ quản lý hơn.  SCSS cho phép thử nghiệm nhiều hơn CSS.  SCSS có sử dụng biến (variables). SCSS => CSS Scss được biên. plugin. SCSS giống với CSS????  CSS .content h2 { font-size: 2em; } .content p { font-size: 1.2em; } • SCSS .content { h2 { font-size: 2em; } p { font-size: 1.2em; } } NHƯNG!!!!  SCSS gọn. 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