programming css

Mô-đun css so với sass

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

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

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

// 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

// 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

// 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

// 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

// 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. ĐẦ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

Menu 1

Menu 2

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

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

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

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

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

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

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

_thân thể. scss

_footer. scss

Phong cách. scss

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]