Mô-đun css so với sass

Question

Trong React, when you import a normal file css, it will load on all pages. Vì vậy, để tải css trên 1 trang bạn có thể sử dụng

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

0

1. Cách thông thường

Giả sử bạn có đoạn mã sau

// Login.js
import './Login.css';

function Login() {

    return (
                
                        
                 
                 
            
        
    )
}

export default Login

With way on, file Login. css sẽ được tải xuống trên tất cả các trang

2. Use css module in React

Lưu ý. tính năng này khả dụng với

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

1 và cao hơn

Bây giờ ta sẽ áp dụng Mô-đun css với đoạn mã trên

Đổi tên

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

2 thành

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

3

Các thay đổi sẽ như sau

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

So sánh từng className ta thấy cách viết khác nhau tùy theo các phần tử trong class

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

4.

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

5

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

6.

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

0

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

1.

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

2

3. ĐẦU RA

Tham khảo thêm. Thêm biểu định kiểu mô-đun CSS

Tìm hiểu từ hơn 300 ví dụ. Với trình chỉnh sửa của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả

Chuyển đến ví dụ về CSS

Sử dụng thực đơn

Chúng tôi khuyên bạn nên đọc hướng dẫn này, theo trình tự được liệt kê trong menu

Nếu bạn có màn hình lớn, menu sẽ luôn ở bên trái

Nếu bạn có màn hình nhỏ, hãy mở menu bằng cách nhấp vào ký hiệu menu trên cùng ☰

Mẫu CSS

Chúng tôi đã tạo một số W3 đáp ứng. Các mẫu CSS để bạn sử dụng

Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng chúng trong tất cả các dự án của mình

Mẫu CSS miễn phí

bài tập css

Kiểm tra bản thân với các bài tập

Câu đố về CSS

Kiểm tra kỹ năng CSS của bạn bằng một bài kiểm tra

Bắt đầu bài kiểm tra CSS

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning

Tài liệu tham khảo CSS

Tại W3Schools, bạn sẽ tìm thấy các tham chiếu CSS hoàn chỉnh của tất cả các thuộc tính và bộ chọn với cú pháp, ví dụ, hỗ trợ trình duyệt, v.v.

Bất kỳ lập trình viên nào cũng phải từng công việc liên quan đến CSS. Tuy nhiên, làm việc với CSS thuần túy trong một khoảng thời gian dài, bạn sẽ thấy nó rất thỏa mãn. Bạn có thể viết CSS một cách chuyên nghiệp hơn, nhanh hơn 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 viết CSS tiết kiệm thời gian, dễ dàng bảo trì và phát triển CSS

SASS/SCSS là gì?

SASS/SCSS là một CSS tiền xử lý chương trình (CSS tiền xử lý). 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, giám sát mạch, dễ phát triển và bảo mật mã hơn. Ngoài ra nó còn có rất nhiều thư viện hỗ trợ kèm theo giúp bạn viết mã CSS một cách dễ dàng đơn giản hơn. Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS, Stylus hay LESS

SASS và SCSS về bản chất vấn đề giống nhau, chỉ khác nhau ở cách viết

Sass là chữ viết tắt của Syntactally Awesome Style Sheets, chương trình tiền xử lý bằng ngôn ngữ kịch bản (Preprocessor Scripting Language ), sẽ được biên dịch thành CSS. Nghĩa là mình sẽ làm style bằng SASS, rồi SASS sẽ render việc mình làm thành file CSS

SASS bản thân có hai kiểu viết khác nhau, một kiểu như HAML, Pug – Sử dụng thụt lề (cách thụt đầu dòng) để phân tách các mã khối, sử dụng xuống dòng để phân biệt các quy tắc, có phần mở rộng là. ngổ ngáo.

.header
  color: #f3f3f3;

.header__inner
  border: 1px solid #f3f3f3

SCSS sử dụng cú pháp tương tự với Ruby (vì đơn giản nó được thiết kế bởi người lập trình viên Ruby). Có phần mở rộng là. scss , SCSS ra đời sau SASS và có cú pháp viết tương tự như cách viết CSS. Cú pháp này được tạo ra nhằm thu hút khoảng cách giữa SASS và CSS bằng cách mang lại một thứ gì đó thân thiện với CSS. In the bottom

– Bên trái. Được viết bằng SCSS

– Bên phải. là mã CSS được biên dịch từ SCSS

Xây dựng bộ nguồn SASS thế nào cho đẹp

11 công cụ hữu ích để kiểm tra và tối ưu hóa các tệp CSS

Các tính năng cơ bản của SCSS

Xếp chồng – Nested Rules

Đây là một tính năng rất hay của SCSS và được sử dụng rất thường xuyên

Please try to look into a HTML section as after

Ví dụ nếu bạn chỉ muốn CSS cho thẻ ul với menu lớp, với CSS thuần bạn sẽ viết

________số 8

Nếu bạn tiếp tục muốn CSS cho thẻ li trong thẻ ul (có lớp là menu) thì

.navbar ul.menu li {
    padding: 3px;
}

Sau đó, bạn muốn tiếp tục CSS cho thẻ a trong thẻ li… bạn sẽ phải lặp lại tên thẻ (hoặc lớp hoặc id) cha của thẻ muốn css thì sẽ rất mệt và chán. Thay vào đó bạn có thể sử dụng Nested Ruled của SASS để giúp mọi thứ trở nên đơn giản hơn một cách rõ ràng. Ví dụ

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

0

Và sau khi đoạn SASS được biên dịch ra CSS thuần sẽ như sau

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

1

Thực tế mình nhận thấy rằng quy tắc xếp chồng này cũng được sử dụng rất nhiều khi vào 1 project có viết css

Biến – biến

Sử dụng biến với SCSS vô cùng cơ bản, bạn chỉ cần đặt tên cho biến – bắt đầu bằng $. Biến thể chứa các giá trị mà chúng ta sử dụng nhiều lần ví dụ như mã màu, phông chữ hoặc kiểu chữ

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

2

Quy tắc Mixin

Mixin giúp bạn tạo các hàm được sử dụng trong SCSS, bạn hoàn toàn có thể truyền các tham số vào bên trong nó để sử dụng

Mixin là một biến thể chế độ khá phổ biến trong SASS. Công dụng của nó là mang nhiều thuộc tính mà bạn đã quy ước trong một hỗn hợp nào đó rồi @include vào một thành phần bất kỳ mà không cần phải viết lại các thuộc tính đó (Ví dụ ở trên là màu sắc so với kiểu phông chữ)

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

3

Hoặc nếu bạn không muốn tô màu lúc nào cũng là #f06, thì bạn có thể truyền thuộc tính vào hỗn hợp dưới dạng 1 tham số bằng cách viết như sau

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

4

It type as transfer params to method

Kế thừa – Extends

Khi nghe đến extends hay còn gọi là kế thừa, thì có thể bạn sẽ nghĩ ngay đến OOP (lập trình hướng đối tượng) đúng không?

// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
                
                        
                 
                
            
        
    )
}

export default Login

5

Nhập khẩu

Cú pháp import của SASS rất hữu dụng và thường xuyên được sử dụng trong các dự án. Nó tương tự như cách bạn yêu cầu hoặc bao gồm tệp này vào tệp khác trong PHP

Đặt trường hợp bạn có 1 trang index, bao gồm header, body, footer. Thay vì sử dụng CSS cho những cái trên một phong cách. css thì với SASS bạn sẽ thực hiện như sau, nhớ có dấu _ trước tên tệp được nhập

Tạo 1 tệp _header. scss to CSS private for header
_thân thể. scss to CSS private for body
_footer. scss to CSS private for footer
Rồi ở file style. css ta chỉ cần @import 3 tệp trên mượt mà ngay

_tiêu đề. scss

0

_thân thể. scss

1

_footer. scss

2

Phong cách. scss

3

Loop

Mệnh đề điều kiện IF

Trình biên dịch SASS

Hiện nay tồn tại trong tương đối nhiều trình biên dịch SASS sang CSS thuần túy. Trong đó có hai trình biên dịch mình xài thường xuyên, mình sẽ giới thiệu ở bên dưới. Ngoài ra, bạn có thể tự tìm kiếm thêm các trình duyệt khác nhé

gấu túi

Đây là phần mềm dùng để biên dịch CSS Preprocessor như SASS, LESS… mình hay dùng nó khi viết SASS
Nó hoàn toàn miễn phí nếu bạn có thể tải và cài đặt nó tại. http. // ứng dụng koala. com/

2. Hỗn hợp Laravel

Nếu bạn đang làm việc bằng Laravel thì bạn không cần đến phần mềm thứ 3 đâu vì bản thân Laravel đã tích hợp một công cụ có tên là Laravel Mix rất đa năng, biên dịch các CSS Preprocessor sang CSS thuần túy là một trong những tính năng nâng cao
Bạn có thể tìm hiểu thêm về nó tại. https. // ấu trùng. com/docs/5. 7/trộn

Kết luận

Như những gì mình vừa trình bày ở phía trên, các bạn cũng có thể thấy những sức mạnh mà SASS/SCSS mang lại trong việc viết CSS, nó biến việc làm việc với SCSS như làm việc với một ngôn ngữ lập trình thực sự. Ngoài ra, với việc phải biên dịch từ SCSS ra CSS cũng cho phép chúng ta có thể sử dụng 1 số tính năng như. tự động thêm tiền tố vào các thuộc tính CSS3, định dạng lại các tệp CSS (nén hoặc ko nén)

programming css