Tìm kiếm

ReactJS
Tất cả
Công ty

Thông tin công ty

Bài viết liên quan

Xem tất cả
Hướng dẫn sử dụng Mixins trong SASS toàn tập

Hướng dẫn sử dụng Mixins trong SASS toàn tập

Bài viết được sự cho phép của tác giả Trần Anh Tuấn Chắc hẳn nhiều bạn trong khi học hay khi đi làm ở công ty sau khi vượt qua ngưỡng newbie về HTML hay là CSS rồi. Trong quá trình code CSS sẽ thấy rằng sao có nhiều người họ code cái template đó nhanh thế nhỉ ? Sao mình cũng dùng CSS như họ mà, hay là mình gõ chậm nhỉ, hay là tư duy phân tích yếu. Thế là mò mẫm trên mạng và thấy người ta bảo dùng SASS code lẹ lắm, chẳng biết SASS là cái gì thế là vội vàng ngồi nghiên cứu về nó. [irp posts="14792" name="Xây dựng một bộ source SASS thế nào cho đẹp"] [irp posts="3005" name="Sử dụng Laravel Mix với Webpack cho tất cả các assets"] Rồi phát hiện ra rằng CSS viết lồng nhau được luôn hay thật. Thế là cắm đầu cắm cổ tập viết lồng nhau bao nhanh luôn. Nhưng kết quả vẫn đâu vào đấy vẫn thấy chưa nhanh lắm, [...]

Đọc thêm
SASS là gì?

SASS là gì?

SASS - hẳn là một thuật ngữ khá quen thuộc đối với dân lập trình, nhưng trước khi hiểu sâu về SASS thì chúng ta cần ôn lại kiến thức CSS trước đã. Thuật ngữ CSS chắc hẳn không còn gì xa lạ đối với dân lập trình nữa, dù mảng chuyên môn của bạn là gì đi nữa thì ít nhiều vẫn sẽ biết hoặc đã từng học qua CSS cơ bản. CSS không hẳn là một mảng quá khó trong lập trình nhưng nó khá tẻ nhạt, khô khan và dễ chán.  “Ơn giời” ngoài CSS thì SASS và SCSS đã ra đời để tối ưu hóa hiệu quả, tiết kiệm thời gian và giảm đi sự khô khan của CSS. Phần này mình sẽ tập trung chia sẻ tất tần tật về SASS nhé! Ngôn ngữ CSS là gì? Các ngôn ngữ đánh dấu như HTML sẽ cung cấp một dàn bài đầy đủ, nhưng CSS sẽ là ngôn ngữ giúp dàn bài ấy trở nên thu hút hơn [...]

Đọc thêm
SASS/SCSS là gì?

SASS/SCSS là gì?

Bất cứ một lập trình viên nào đều phải từng làm việc liên quan đến CSS. Tuy nhiên làm việc với CSS thuần một thời gian dài bạn sẽ thấy nó rất nhàm chán. Bạn có thể viết CSS một cách chuyên nghiệp hơn, nhanh và rõ ràng mạch lạc hơn bằng SASS/SCSS. CSS Preprocessor là gì? CSS Preprocessors là ngôn ngữ tiền xử lý CSS. Là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. CSS Preprocessor có thể giúp bạn tiết kiệm thời gian viết CSS, dễ dàng bảo trì và phát triển CSS. SASS/SCSS là gì? SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor). Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn. [...]

Đọc thêm
Xây dựng một bộ source SASS thế nào cho đẹp

Xây dựng một bộ source SASS thế nào cho đẹp

Bài viết được sự cho phép của tác giả Hữu Khuyên Hôm nay mình xin chia sẻ cách xây dựng một bộ source SASS tối ưu thời gian đồng thời giúp cho mình "Best Practices" hơn. Cùng bắt đầu nào! [irp posts="4181" name="Viết code sạch (Clean code) được gì? Phần 1"] [irp posts="4108" name="Mẹo với Javascript (ES6) và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn ( Phần 2)"] Quy hoạch thế nào để dễ quản lý Đây là một dạng cấu trúc folder SASS của mình trong mỗi dự án. Bạn cũng có thể tham khảo: sass/ | |– abstracts/ | |– _variables.scss // Variables | |– _functions.scss // Functions | |– _mixins.scss // Mixins | |– base/ | |– _animation.scss // Animation | |– _global.scss // Global define | |– _fonts.scss // Fonts define | |– _reset.scss // Reset/normalize | |– _utilities.scss // utilities | |– components/ | |– _buttons.scss // Buttons | |– _tabs.scss // Tabs | |– _slider.scss // Slider | |– layout/ | |– _navigation.scss // Navigation | |– _grid.scss // Grid system | |– _header.scss // Header | |– _footer.scss // Footer | |– _sidebar.scss // Sidebar | |– _forms.scss // Forms | |– pages/ | |– _home.scss // Home specific styles | |– _about.scss // About specific styles | |– _contact.scss // Contact specific styles | `– main.scss // Main SASS file Abstracts là nơi định nghĩa variables, functions, mixins. Base bao gồm những tiêu chuẩn styles [...]

Đọc thêm