Khi một project phát triển và mở rộng, việc mô-đun hoá và cấu trúc là thiết yếu. Vì vậy việc tổ chức tệp tin và folder là việc cần thiết mặc dù không có cấu trúc nào "hoàn toàn chính xác" mà nó phụ thuộc vào bạn, dưới đây chỉ là cấu trúc dành cho bạn để tham khảo. Cấu trúc dự án Sass như thế nào? Các tập tin riêng biệt sẽ đại diện cho các components khác nhau. Sau đó import...
SCSS May Fest SASS sass tructure scss structure
SASS là một cách viết CSS kiểu mới, giúp bạn quản lí code CSS một cách khoa học, dễ quản lí, nâng cấp, thích hợp khi làm các dự án lớn. Nhờ các tính năng như variables, functions, mixins... các đoạn mã CSS sẽ trở nên có tổ chức cho phép developer làm việc nhanh và ít gặp lỗi hơn. Trang chủ SASS: http://sass-lang.com/ SASS là một CSS Processor có đuôi file là .scss khác với CSS thuần là .css File scss thì...
SCSS SASS
1. Nested Rules Quy tắc này cho phép viết các CSS lồng vào nhau. Khi biên dịch, Sass sẽ cho ra tập tin CSS với đầy đủ các selector theo đúng chuẩn. Kiểu viết này giống với kiểu phân cấp trong HTML Ta có HTML như sau <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sass_P1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <ul class="menu"> <li><a...
SCSS SASS
1. Nested Rules Quy tắc này cho phép viết các CSS lồng vào nhau. Khi biên dịch, Sass sẽ cho ra tập tin CSS với đầy đủ các selector theo đúng chuẩn. Kiểu viết này giống với kiểu phân cấp trong HTML Ta có HTML như sau <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sass_P1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <ul class="menu"> <li><a...
SCSS SASS
1. Variables Giống với các ngôn ngữ lập trình ta khai báo biến để lưu trữ một giá trị được sử dụng nhiều lần. Để khai báo một biến ta sử dụng kí tự $ đằng trước tên biến $text-success: #3c763d; h1.big-title { color: $text-success; } Kết quả h1.big-title { color: #3c763d; } 2. Global Variables Ở ví dụ trên nếu ta khai báo biến $text-success ở bên ngoài không nằm trong bất kì bộ chọn nào thì ở chỗ...
SCSS SASS
1. Import & Partial Trong thực tế khi code scss ta thường chia nhỏ ra các file đảm nhiệm các chức năng khác nhau như _colors.scss hay_variables.scss rồi dùng từ khóa @import để gọi vào. $primary-300: #64B5F6; $primary-400: #42A5F5; $primary-600: #1E88E5; $font-size-base : 14px; $font-size-large: ceil(($font-size-base * 1.25)); // ~18px $font-size-small: ceil(($font-size-base * 0.85)); // ~12px File style.scss để import 2 file ở trên ta viết code...
SCSS SASS
Phần này sẽ gồm 4 phần chính: IF, FOR, EACH, WHILE 1. if Kiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } } $type: monster; h3 { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } Kết...
SCSS SASS
Mixin cho phép bạn định nghĩa các thuộc tính CSS lại với nhau, về cơ bản nó mạnh hơn so với việc dùng biến chỉ lưu được một giá trị, cũng giống với extend kế thừa các thuộc tính nhưng mixin còn hỗ trợ thêm cả tham số không khác gì một function. 1. Mixin basic (không có tham số) Sử dụng @mixin name để khai báo mixin Sử dụng @include name để sử dụng @mixin BorderRadius { border-radius: 50%; ...
SCSS SASS