Trình duyệt có thể đọc scss không?

Ở đây chúng tôi sẽ hiển thị một trang HTML được hiển thị với bốn biểu định kiểu khác nhau. Nhấp vào liên kết "Biểu định kiểu 1", "Biểu định kiểu 2", "Biểu định kiểu 3", "Biểu định kiểu 4" bên dưới để xem các kiểu khác nhau

Tại sao nên sử dụng CSS?

CSS được sử dụng để xác định kiểu cho các trang web của bạn, bao gồm thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau

Ví dụ CSS

body {
  màu nền. xanh nhạt;
}

h1 {
  màu. màu trắng;
  căn chỉnh văn bản. trung tâm;
}

p {
  họ phông chữ. verdana;
  cỡ chữ. 20px;
}

Tự mình thử »

CSS đã giải quyết một vấn đề lớn

HTML KHÔNG BAO GIỜ có ý định chứa các thẻ để định dạng trang web

HTML được tạo ra để mô tả nội dung của một trang web, như

Đây là một tiêu đề

Đây là một đoạn

Khi các thẻ như và các thuộc tính màu được thêm vào HTML 3. 2, nó bắt đầu cơn ác mộng cho các nhà phát triển web. Việc phát triển các trang web lớn, nơi phông chữ và thông tin màu sắc được thêm vào từng trang, trở thành một quá trình lâu dài và tốn kém

Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo CSS

CSS đã xóa định dạng kiểu khỏi trang HTML

Nếu bạn không biết HTML là gì, chúng tôi khuyên bạn nên đọc Hướng dẫn HTML của chúng tôi

CSS tiết kiệm rất nhiều công việc

Các định nghĩa kiểu dáng thường được lưu ở bên ngoài. tập tin css

Với tệp biểu định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách chỉ thay đổi một tệp

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.

Với nhiều người hơn bao giờ hết viết bằng Sass, cần cân nhắc cách chúng tôi định dạng nó. Hướng dẫn kiểu CSS là phổ biến, vì vậy có lẽ chúng ta có thể mở rộng những hướng dẫn đó để bao gồm các lựa chọn duy nhất cho Sass

Dưới đây là một số ý tưởng mà tôi đã hướng tới. Có lẽ chúng hữu ích cho bạn hoặc giúp bạn hình thành ý tưởng của riêng mình. Nếu bạn đang tìm kiếm thêm ví dụ, Sass Guidelines là một nơi tốt khác để xem

Sử dụng Quy tắc định dạng CSS / Hướng dẫn kiểu thông thường của bạn

Bài đăng này nói về nội dung dành riêng cho Sass, nhưng để làm cơ sở cho điều này, bạn nên tuân theo bất kỳ nguyên tắc định dạng CSS tốt nào mà bạn đang tuân theo. Nếu bạn chưa có, hướng dẫn về phong cách tổng hợp này có thể giúp bạn. Điều này bao gồm những thứ như

1. Nhất quán với vết lõm
2. Hãy nhất quán về vị trí của khoảng trắng trước/sau dấu hai chấm/dấu ngoặc nhọn
3. Một bộ chọn trên mỗi dòng, Một quy tắc trên mỗi dòng
4. Liệt kê các thuộc tính liên quan với nhau
5. Có kế hoạch đặt tên lớp
6. Không sử dụng #hotdrama của ID
7. vân vân

Liệt kê @extend(s) trước

.weather { @extend %module; ... }

Biết ngay rằng lớp này kế thừa một bộ quy tắc khác từ nơi khác là tốt. Một lợi ích khác là việc ghi đè các kiểu cho bộ quy tắc kế thừa đó trở nên dễ dàng hơn nhiều

Biết khi nào nên sử dụng @extend so với @include có thể hơi phức tạp. Harry làm rất tốt việc phân biệt hai loại này và đưa ra những suy nghĩ về cách sử dụng cả hai

Liệt kê @include(s) Tiếp theo

.weather { @extend %module; @include transition(all 0.3s ease-out); ... }

Tiếp theo là @includes của bạn cho mixin và các chức năng khác. Một lần nữa, điều này thật tuyệt khi có ở gần đầu để tham khảo, nhưng cũng cho phép ghi đè. Bạn cũng có thể muốn thực hiện cuộc gọi khi tách @includes do người dùng tác giả và @includes do nhà cung cấp cung cấp

Liệt kê các kiểu dáng “thông thường” Tiếp theo

.weather { @extend %module; @include transition(all 0.3s ease-out); background: LightCyan; ... }

Việc thêm các kiểu thông thường sau @extends và @includes cho phép chúng tôi ghi đè đúng các thuộc tính đó, nếu cần

Các lớp giả lồng nhau và các phần tử giả

.weather { @extend %module; @include transition(all 0.3s ease-out); background: LightCyan; &:hover { background: DarkCyan; } &::before { content: ""; display: block; } ... }

Các phần tử giả và các lớp giả liên quan trực tiếp đến chính phần tử đó, vì vậy, chúng tôi lồng chúng trước các bộ chọn khác. Có các phần tử giả xuất hiện trước các lớp có vẻ dễ đọc hơn một chút, nhưng liệu phần tử này có xuất hiện trước phần tử kia hay không hoàn toàn là một sở thích. Dù bằng cách nào, tốt nhất là giữ các phần tử với các phần tử khác và các lớp với các lớp khác

Bộ chọn lồng nhau Cuối cùng

.weather { @extend %module; @include transition(all 0.3s ease); background: LightCyan; &:hover { background: DarkCyan; } &::before { content: ""; display: block; } > h3 { @include transform(rotate(90deg)); border-bottom: 1px solid white; } }

Không có gì đi sau những thứ lồng nhau. Và thứ tự như trên trong bộ chọn lồng nhau sẽ được áp dụng

Không bao giờ viết tiền tố nhà cung cấp

Tiền tố nhà cung cấp là một điều nhạy cảm với thời gian. Khi các trình duyệt cập nhật theo thời gian, nhu cầu về chúng sẽ không còn nữa. Nếu bạn sử dụng Autoprefixer, khi biên dịch Sass, bạn sẽ không bao giờ phải viết chúng

Ngoài ra, bạn có thể sử dụng @mixins được cung cấp bởi các thư viện như Compass và Bourbon. Hoặc cuộn của riêng bạn. Mặc dù việc sử dụng @mixins cho các tiền tố của nhà cung cấp vẫn kém thuận tiện hơn so với Autoprefixer và vẫn yêu cầu một số bảo trì, nhưng nó vẫn tốt hơn việc phải viết mọi thứ theo cách thủ công

Làm tổ tối đa. Ba cấp độ sâu

.weather { .cities { li { // no more! } } }

Rất có thể, nếu bạn hiểu sâu hơn thế, thì bạn đang viết một bộ chọn dở tệ. Tệ ở chỗ nó quá phụ thuộc vào cấu trúc HTML (dễ vỡ), quá cụ thể (quá mạnh) và không thể tái sử dụng nhiều (không hữu ích). Nó cũng khó hiểu

Nếu bạn thực sự muốn sử dụng bộ chọn thẻ vì nội dung lớp đang trở nên quá nhiều đối với bạn, bạn có thể muốn tìm hiểu khá cụ thể về nó để tránh xếp tầng không mong muốn. Và thậm chí có thể sử dụng @extend để nó có lợi ích về khả năng sử dụng lại của CSS

.weather > h3 { @extend %line-under; } }

Làm tổ tối đa. 50 dòng

Nếu một khối Sass lồng nhau dài hơn thế, rất có thể nó không vừa với một màn hình soạn thảo mã và bắt đầu trở nên khó hiểu. Toàn bộ điểm lồng ghép là sự thuận tiện và hỗ trợ trong việc nhóm tinh thần. Đừng sử dụng nó nếu nó làm tổn thương điều đó

Các tệp Sass toàn cầu và theo mục cụ thể chỉ là Mục lục

Nói cách khác, không có phong cách trực tiếp trong họ. Buộc bản thân phải sắp xếp tất cả các phong cách thành các bộ phận cấu thành

Liệt kê các phần phụ thuộc của nhà cung cấp/toàn cầu trước, sau đó là các phần phụ thuộc của tác giả, sau đó là các mẫu, sau đó là các bộ phận

Cuối cùng nó trở thành một mục lục dễ hiểu

/* Vendor Dependencies */ @import "compass"; /* Authored Dependencies */ @import "global/colors"; @import "global/mixins"; /* Patterns */ @import "global/tabs"; @import "global/modals"; /* Sections */ @import "global/header"; @import "global/footer";

Các phụ thuộc như La bàn, màu sắc và mixin hoàn toàn không tạo ra CSS được biên dịch, chúng hoàn toàn là các phụ thuộc mã. Liệt kê các mẫu tiếp theo có nghĩa là "các phần" cụ thể hơn, xuất hiện sau, có khả năng ghi đè lên các mẫu mà không có cuộc chiến về tính đặc hiệu

Chia thành nhiều tệp nhỏ nhất có thể

Không bị phạt khi chia thành nhiều tệp nhỏ. Làm điều đó càng nhiều càng tốt cho dự án. Tôi biết tôi thấy việc chuyển đến các tệp cụ thể nhỏ và điều hướng qua chúng dễ dàng hơn so với các tệp nhỏ hơn/lớn hơn

________số 8

Tôi có thể làm điều này ngay trong toàn cầu. scss, thay vì có @import a _header toàn cầu. scss có các mục nhập phụ riêng. Tất cả việc nhập khẩu phụ đó có thể nằm ngoài tầm kiểm soát

Toàn cầu hóa có thể hữu ích nếu bắt đầu có quá nhiều thứ để liệt kê

Partials được đặt tên _partial. scss

Đây là một quy ước đặt tên phổ biến cho biết tệp này không phải do chính nó biên dịch. Nó có khả năng có các phụ thuộc khiến nó không thể tự biên dịch. Cá nhân tôi thích dấu gạch ngang trong tên tệp "thực tế", như menu thả xuống. scss

Tại địa phương, biên dịch với bản đồ nguồn

Trong quá trình phát triển, có thể bạn biên dịch Sass của mình ở định dạng nào không quan trọng (e. g. được mở rộng, nén, v.v.) cục bộ miễn là bạn đang tạo bản đồ nguồn

Đó là một lá cờ khi bạn biên dịch Sass

$ sass sass/screen.scss:stylesheets/screen.css --sourcemap

Mặc dù thông thường bạn có thể không biên dịch Sass như vậy, nhưng luôn có một số cách để định cấu hình thứ bạn đang sử dụng để biên dịch Sass để thực hiện điều đó với bản đồ nguồn. Khi bạn có chúng, điều đó có nghĩa là DevTools cho bạn biết vị trí của mã Sass, điều này cực kỳ hữu ích (lừa đảo)

Đây là một vài liên kết có liên quan về điều này

• (Google) Làm việc với Bộ tiền xử lý CSS
• (The Sass Way) Sử dụng bản đồ nguồn với Sass 3. 3

Trong triển khai, biên dịch nén

Các trang web trực tiếp chỉ nên có CSS ​​nén. Và được nén với các tiêu đề hết hạn của chúng tôi để khởi động

Thậm chí không cam kết. tệp css

Điều này có thể mất một số công việc của DevOps, nhưng sẽ rất tuyệt nếu. các tệp css thậm chí không có trong kho lưu trữ của bạn. Quá trình biên dịch xảy ra trong quá trình triển khai. Vì vậy, điều duy nhất bạn thấy trong repo là các tệp Sass được tác giả bằng tay được định dạng độc đáo của bạn. Điều này làm cho sự khác biệt cũng hữu ích. Khác biệt là chế độ xem so sánh về những gì đã thay đổi do nhà cung cấp dịch vụ kiểm soát phiên bản cung cấp. Khác biệt đối với tệp CSS được nén là vô ích

Hãy hào phóng với ý kiến

Rất hiếm khi hối tiếc khi để lại nhận xét trong mã. Nó hữu ích hoặc dễ dàng bỏ qua. Nhận xét bị xóa khi biên dịch thành mã nén, do đó không mất phí

.weather { @extend %module; @include transition(all 0.3s ease-out); ... }0

Và nói về nhận xét, bạn có thể muốn tiêu chuẩn hóa điều đó. Cú pháp .weather { @extend %module; @include transition(all 0.3s ease-out); ... }5 trong Sass khá hay, đặc biệt đối với các khối nhận xét, vì vậy việc nhận xét/bỏ ghi chú từng dòng sẽ dễ dàng hơn

Thay đổi tất cả các số phổ biến và các số có ý nghĩa

Nếu bạn thấy mình sử dụng lặp đi lặp lại một số khác 0 hoặc 100%, thì số đó có thể đáng bị thay đổi. Vì nó có thể có ý nghĩa và kiểm soát tính nhất quán, nên việc có thể điều chỉnh nó hàng loạt có thể hữu ích

Nếu một số rõ ràng có ý nghĩa mạnh mẽ, thì đó cũng là một trường hợp sử dụng để thay đổi

.weather { @extend %module; @include transition(all 0.3s ease-out); ... }1

Lý tưởng nhất là những con số đó có thể được lưu trong một tệp riêng biệt @import-ed dưới dạng phụ thuộc. Bằng cách đó, bạn có thể theo dõi toàn bộ ngăn xếp chỉ mục z của mình ở một nơi. Tuy nhiên, nếu các biến nằm trong phạm vi của lớp, thì sẽ hợp lý khi đảm bảo rằng chúng xuất hiện trước bất kỳ quy tắc nào khác

.weather { @extend %module; @include transition(all 0.3s ease-out); ... }2

Thay đổi tất cả các màu

Ngoại trừ có lẽ trắng và đen. Rất có thể một màu không chỉ xuất hiện một lần và ngay cả khi bạn nghĩ là như vậy, một khi nó ở trong một biến, bạn có thể thấy nó được sử dụng ở nơi khác. Các biến thể trên màu đó thường có thể được xử lý bởi các hàm màu của Sass như làm sáng () và làm tối () – giúp cập nhật màu dễ dàng hơn (thay đổi ở một nơi, cập nhật toàn bộ bảng màu)

Tổ và đặt tên cho các truy vấn phương tiện của bạn

Khả năng lồng các truy vấn phương tiện trong Sass có nghĩa là 1) bạn không phải viết lại bộ chọn ở một nơi khác có thể dễ bị lỗi 2) các quy tắc mà bạn đang ghi đè rất rõ ràng và hiển nhiên, điều này thường không xảy ra khi

.weather { @extend %module; @include transition(all 0.3s ease-out); ... }3

Thông tin thêm về điều này và tầm quan trọng của việc đặt tên cho chúng tốt

xấu hổ cuối cùng

Trong biểu định kiểu chung của bạn, @import a _shame. tập tin scss cuối cùng

.weather { @extend %module; @include transition(all 0.3s ease-out); ... }4

Nếu bạn cần khắc phục nhanh, bạn có thể thực hiện tại đây. Sau này khi bạn có thời gian thích hợp, bạn có thể di chuyển bản sửa lỗi vào cấu trúc/tổ chức phù hợp. Xem thêm

Kết quả cuối cùng thuộc về bạn

Sass không làm bất cứ điều gì bạn không yêu cầu nó làm, vì vậy tuyên bố rằng đầu ra của Sass bị cồng kềnh chỉ là tuyên bố rằng bạn viết mã cồng kềnh. Viết Sass sao cho đầu ra CSS cuối cùng giống như bạn đã viết nó mà không có Sass