Halo các bạn, Lại là mình với một bài post liên quan tới chủ đề Front-end đây Mình còn nhớ hồi mình bắt đầu tìm hiểu và bị SASS lôi cuốn, mình đã nghĩ rằng mình sẽ chẳng bao giờ cần dùng đụng tới CSS thuần nữa... Đúng là yêu vào thì ai cũng sẽ mù quáng mà... Nhưng rồi, qua nhiều dự án và nhiều vấn đề phát sinh trong việc quản lý, sử dụng và mở rộng code, mình dần nhận ra...
Happy New Year coding tip trick Bí kíp Frontend SCSS biến trong css
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
CSS Box-sizing Xin chào các bạn, hôm nay mình sẽ tìm hiểu về thuộc tính Box-sizing của css. Để hiểu rõ tính ứng dụng, cũng như tác dụng của nó khi thêm vào thì mình xin đưa ra một ví dụ như sau: Mình sẽ tạo 1 thẻ <div class="box">Đây là nội dung bài viết</div> Thêm luôn cho nó css: .box{ width: 100px; height: 100px; color: white; background-color: darkorchid; } Bây giờ mình muốn thêm...
Front-end CSS ReactJS SCSS Box-sizing
Introduction: What Is Aspect Ratio? Trong thiết kế web, khái niệm tỷ lệ khung hình (aspect ratio) được sử dụng để mô tả tỉ lệ giữa chiều rộng (width) và chiều cao (height) của hình ảnh, có mối quan hệ về kích thước tương ứng với nhau. Hãy xem xét hình sau. Chúng ta có tỷ lệ 4 : 3. Điều đó cho thấy tỉ lệ giữa táo và nho là 4 : 3. Nói cách khác, khối nhỏ nhất mà chúng ta có thể tạo với...
CSS SCSS Aspect ratio
1. Set margin/padding và reset chúng Ta rất hay thấy mọi người set margin, padding cho tất cả các elements rồi lại reset chúng cho thằng đầu tiên hoặc cuối cùng. Tại sao phải sử dụng 2 lần set trong khi chúng ta có thể dễ dàng thực hiện nó cùng một lúc. Sử dụng một trong những cách đơn giản, ngắn hơn như: nth-child hoặc nth-of-type selectors :not() pseudo-class + : bộ tổ hợp anh/chị/em liền kề Bad .item...
SCSS
Giới thiệu Các lỗi thường gặp và cách khắc phục Kết luận 1. Giới thiệu Ngày nay CSS được coi là một trong những cách dễ dàng và dễ tiếp cận nhất để tạo các trang web hiện đại, dụa trên các tiêu chuẩn, quá trình viết mã CSS đôi khi chúng ta vẫn còn mắc phải một số lỗi phổ biến. Vì vậy, chúng ta cần sửa những lỗi này để mang lại sự nhất quán hơn trong thiết kế web, cải...
HTML CSS SCSS
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