Review Bộ chọn nhiều lớp css
Kinh Nghiệm về Bộ chọn nhiều lớp css 2022
Họ và tên đang tìm kiếm từ khóa Bộ chọn nhiều lớp css được Cập Nhật vào lúc : 2022-12-23 19:26:03 . Với phương châm chia sẻ Thủ Thuật về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi đọc tài liệu vẫn ko hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Admin lý giải và hướng dẫn lại nha.Trước khi bạn hoàn toàn có thể sử dụng Sass, bạn thiết yếu lập nó trong dự án công trình bất Động sản của tớ. Nếu bạn chỉ muốn duyệt ở đây, hãy tiếp tục, nhưng chúng tôi khuyên bạn nên setup Sass trước. Truy cập vào đây nếu bạn muốn tìm hiểu cách thiết lập mọi thứ
Nội dung chính Show- 💡 Sự thật thú vịSCSS Cú phápCú pháp SassĐầu ra CSSSCSS Cú phápCú pháp SassĐầu ra CSSmột phầnSCSS Cú phápCú pháp SassĐầu ra CSShỗn hợpSCSS Cú phápCú pháp SassĐầu ra CSSMở rộng/Kế thừaSCSS Cú phápCú pháp SassĐầu ra CSSnhà điều hànhSCSS Cú phápCú pháp SassĐầu ra CSS
Sơ chế
Bản thân CSS hoàn toàn có thể thú vị, nhưng biểu định kiểu ngày càng to hơn, phức tạp hơn và khó bảo dưỡng hơn. Đây là lúc một bộ tiền xử lý hoàn toàn có thể trợ giúp. Sass có những tính năng chưa tồn tại trong CSS như lồng ghép, hỗn hợp, thừa kế và những tính năng tiện lợi khác giúp bạn viết CSS mạnh mẽ và tự tin, hoàn toàn có thể bảo dưỡng
Sau khi bạn khởi đầu mày mò với Sass, nó sẽ lấy tệp Sass đã xử lý trước của bạn và lưu dưới dạng tệp CSS thông thường mà bạn hoàn toàn có thể sử dụng trong trang web của tớ
Cách trực tiếp nhất để thực hiện điều này là trong thiết bị đầu cuối của bạn. Sau khi setup Sass, bạn hoàn toàn có thể biên dịch Sass của tớ thành CSS bằng lệnh
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 2. Bạn sẽ cần cho Sass biết nên xây dựng tệp nào và xuất CSS sang đâu. Ví dụ: chạy $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 3 từ thiết bị đầu cuối của bạn sẽ lấy một tệp Sass duy nhất, $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 4 và biên dịch tệp đó thành $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 5Bạn cũng hoàn toàn có thể xem những tệp hoặc thư mục riêng lẻ có cờ
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 6. Cờ theo dõi yêu cầu Sass xem những tệp nguồn của bạn để biết những thay đổi và biên dịch lại CSS mọi khi bạn lưu Sass của tớ. Nếu bạn muốn xem (thay vì tạo thủ công) tệp $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 4 của tớ, bạn chỉ việc thêm cờ theo dõi vào lệnh của tớ, như vậysass --watch input.scss output.cssBạn hoàn toàn có thể xem và xuất ra những thư mục bằng phương pháp sử dụng đường dẫn thư mục làm đầu vào và đầu ra của tớ, đồng thời phân tách chúng bằng dấu hai chấm. Trong ví dụ này
sass --watch app/sass:public/stylesheetsSass sẽ xem tất cả những tệp trong thư mục
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 8 để biết những thay đổi và biên dịch CSS sang thư mục $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 9💡 Sự thật thú vị
Sass có hai cú pháp. Cú pháp SCSS (
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 00) được sử dụng phổ biến nhất. Đó là một siêu bộ CSS, nghĩa là tất cả CSS hợp lệ cũng là SCSS hợp lệ. Cú pháp thụt lề ($font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 01) khác thường hơn. nó sử dụng dấu thụt đầu dòng thay vì dấu ngoặc nhọn để lồng những câu lệnh và dòng mới thay vì dấu chấm phẩy để phân tách chúng. Tất cả những ví dụ của chúng tôi đều có sẵn ở cả hai cú phápBiến
Hãy nghĩ về những biến như một phương pháp để tàng trữ thông tin mà bạn muốn sử dụng lại trong toàn bộ biểu định kiểu của tớ. Bạn hoàn toàn có thể tàng trữ những thứ như sắc tố, ngăn xếp phông chữ hoặc bất kỳ giá trị CSS nào mà bạn nhận định rằng mình sẽ muốn sử dụng lại. Sass sử dụng ký hiệu
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 02 để biến một thứ gì đó thành một biến. Đây là một ví dụSCSS Cú pháp
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color;Cú pháp Sass
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 0Đầu ra CSS
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 5Khi Sass được xử lý, nó sẽ nhận những biến mà chúng tôi xác định cho _______103 và
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 04 và xuất ra CSS thông thường với những giá trị biến của chúng tôi được đặt trong CSS. Điều này hoàn toàn có thể cực kỳ hiệu suất cao khi thao tác với sắc tố thương hiệu và giữ cho chúng nhất quán trên toàn bộ trang weblàm tổ
Khi viết HTML, bạn hoàn toàn có thể nhận thấy rằng nó có một khối mạng lưới hệ thống phân cấp hình ảnh và lồng nhau rõ ràng. Mặt khác, CSS không
Sass sẽ được cho phép bạn lồng những bộ chọn CSS theo cách tuân theo cùng một khối mạng lưới hệ thống phân cấp trực quan trong HTML của bạn. Xin lưu ý rằng những quy tắc được lồng ghép quá mức sẽ dẫn đến CSS quá đủ tiêu chuẩn hoàn toàn có thể khó duy trì và thường được xem là phương pháp không tốt
Với ý nghĩ đó, đây là ví dụ về một số trong những phong cách điển hình cho điều vị trí hướng của một trang web
SCSS Cú pháp
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 8Cú pháp Sass
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 9Đầu ra CSS
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 0Bạn sẽ nhận thấy rằng bộ chọn
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 05, $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 06 và $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 07 được lồng bên trong bộ chọn $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 08. Đây là một cách tuyệt vời để tổ chức CSS của bạn và làm cho nó dễ đọc hơnmột phần
Bạn hoàn toàn có thể tạo một phần tệp Sass chứa những đoạn CSS nhỏ mà bạn hoàn toàn có thể đưa vào những tệp Sass khác. Đây là một cách tuyệt vời để mô-đun hóa CSS của bạn và giúp duy trì mọi thứ thuận tiện và đơn giản hơn. Một phần là tệp Sass được đặt tên với dấu gạch dưới ở đầu. Bạn hoàn toàn có thể đặt tên nó là gì đó như
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 09. Dấu gạch dưới cho Sass biết rằng tệp này chỉ là tệp một phần và nó không được tạo thành tệp CSS. Sass partials được sử dụng với quy tắc $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 50mô-đun
Hiện chỉ có Dart Sass tương hỗ
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 50. Thay vào đó, người tiêu dùng của những triển khai khác phải sử dụng quy tắc $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 52Bạn tránh việc phải viết tất cả Sass của tớ trong một tệp. Bạn hoàn toàn có thể chia nó theo bất kỳ cách nào bạn muốn với quy tắc
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 50. Quy tắc này tải một tệp Sass khác dưới dạng một mô-đun, nghĩa là bạn hoàn toàn có thể tham chiếu đến những biến, mixin và hàm của nó trong tệp Sass của tớ bằng một không khí tên nhờ vào tên tệp. Việc sử dụng một tệp cũng tiếp tục gồm có CSS mà nó tạo ra trong đầu ra được biên dịch của bạnSCSS Cú pháp
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 0$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 1Cú pháp Sass
sass --watch app/sass:public/stylesheets 0sass --watch app/sass:public/stylesheets 1Đầu ra CSS
sass --watch app/sass:public/stylesheets 2Lưu ý rằng chúng tôi đang sử dụng
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 54 trong tệp $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 55. Khi sử dụng một tệp, bạn không cần thêm phần mở rộng của tệp. Sass rất thông minh và sẽ tìm ra điều đó cho bạnhỗn hợp
Viết một số trong những thứ trong CSS hơi tẻ nhạt, đặc biệt là với CSS3 và có nhiều tiền tố của nhà đáp ứng. Mixin được cho phép bạn tạo những nhóm khai báo CSS mà bạn muốn sử dụng lại trên toàn bộ trang web của tớ. Nó giúp giữ cho Sass của bạn rất KHÔ. Bạn thậm chí hoàn toàn có thể chuyển những giá trị để làm cho mixin của bạn linh hoạt hơn. Đây là một ví dụ cho
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 56SCSS Cú pháp
sass --watch app/sass:public/stylesheets 3Cú pháp Sass
sass --watch app/sass:public/stylesheets 4Đầu ra CSS
sass --watch app/sass:public/stylesheets 5Để tạo mixin, bạn sử dụng thông tư
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 57 và đặt tên cho nó. Chúng tôi đã đặt tên cho mixin của tớ là $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 56. Chúng tôi cũng đang sử dụng biến $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 59 bên trong dấu ngoặc đơn để chúng tôi hoàn toàn có thể chuyển vào một $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 56 bất kể thứ gì chúng tôi muốn. Sau khi tạo mixin, bạn hoàn toàn có thể sử dụng mixin đó làm tuyên bố CSS khởi đầu bằng $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 81 theo sau là tên gọi của mixinMở rộng/Kế thừa
Việc sử dụng
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 82 được cho phép bạn chia sẻ một tập hợp những thuộc tính CSS từ bộ chọn này sang bộ chọn khác. Trong ví dụ của chúng tôi, chúng tôi sẽ tạo một chuỗi thông báo đơn giản về lỗi, chú ý và thành công minh phương pháp sử dụng một tính năng khác đi đôi với những lớp giữ chỗ mở rộng. Lớp trình giữ chỗ là một loại lớp đặc biệt chỉ in khi nó được mở rộng và hoàn toàn có thể giúp giữ cho CSS đã biên dịch của bạn ngăn nắp và sạch sẽSCSS Cú pháp
sass --watch app/sass:public/stylesheets 6Cú pháp Sass
sass --watch app/sass:public/stylesheets 7Đầu ra CSS
sass --watch app/sass:public/stylesheets 8Tác dụng của đoạn mã trên là yêu cầu ________ 183, ________ 184, ________ 185, và ________ 186 hành xử in như
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 87. Điều đó nghĩa là bất kể nơi nào có $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 87 xuất hiện, thì $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 83, $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 84, $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 85 và $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 86 cũng tiếp tục xuất hiện. Điều kỳ diệu xảy ra trong CSS được tạo, trong đó mỗi lớp này sẽ có những thuộc tính CSS in như $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 87. Điều này giúp bạn tránh phải viết nhiều tên lớp trên những phần tử HTMLBạn hoàn toàn có thể mở rộng hầu hết những bộ chọn CSS đơn giản ngoài những lớp trình giữ chỗ trong Sass, nhưng sử dụng trình giữ chỗ là cách dễ nhất để đảm nói rằng bạn không mở rộng một lớp được lồng ở nơi khác trong kiểu của bạn, điều này hoàn toàn có thể dẫn đến những bộ chọn ngoài ý muốn trong CSS của bạn
Xin lưu ý rằng CSS trong
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 94 không được tạo vì $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 94 không bao giờ được mở rộngnhà điều hành
Làm toán trong CSS của bạn rất hữu ích. Sass có một số trong những toán tử toán học tiêu chuẩn như
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 96, $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 97, $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 98, $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 99 và $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 00. Trong ví dụ của chúng tôi, chúng tôi sẽ thực hiện một số trong những phép toán đơn giản để tính chiều rộng cho $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 01 và $font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 02SCSS Cú pháp
sass --watch app/sass:public/stylesheets 9Cú pháp Sass
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 0Đầu ra CSS
$font-stack: Helvetica, sans-serif; $primary-color: #333; body toàn thân font: 100% $font-stack; color: $primary-color; 1Chúng tôi đã tạo một lưới chất lỏng rất đơn giản, nhờ vào 960px. Các thao tác trong Sass được cho phép chúng tôi thực hiện một số trong những việc như lấy giá trị pixel và quy đổi chúng thành tỷ lệ phần trăm mà không gặp nhiều rắc rối
Tải thêm tài liệu liên quan đến nội dung bài viết Bộ chọn nhiều lớp css programming css
Post a Comment