Chuyển đổi dòng lệnh CSS sang SCSS

- Giờ đây, dự án của chúng ta đã được thiết lập để phát triển nhanh chóng bằng cách sử dụng đồng hồ grunt để biên dịch các tệp Sass của chúng ta, chúng ta có thể tiếp tục với việc chuyển đổi CSS sang SCSS. Tôi sẽ nhanh chóng đề cập đến sự khác biệt giữa hai cú pháp của Sass, chỉ cho bạn một công cụ để tự động lồng Sass của bạn và thảo luận xem bạn có muốn làm điều đó hay không. Cú pháp ban đầu của Sass không bao gồm dấu ngoặc nhọn, không dấu chấm phẩy và sử dụng thụt đầu dòng để phân định khối kiểu. Nó ngắn gọn hơn, nhưng vì nó không giống CSS nên một số người mới bắt đầu thấy rằng đây là một bước ngoặt. Tôi cũng không ngoại lệ khi mới bắt đầu sử dụng Sass. Mặt khác, SCSS trông giống hệt CSS, đến mức bạn có thể lấy các tệp CSS của mình, di chuyển chúng vào thư mục Sass, thay đổi phần mở rộng thành SCSS và bạn có SCSS hợp lệ. Tất nhiên, điều đó chưa tận dụng được bất kỳ tính năng nào của Sass, nhưng nó thân thiện với nhà phát triển. Vì vậy, đối với lần xác nhận đầu tiên của tệp SCSS, bạn có thể thực hiện điều đó. Một tính năng của Sass khá mạnh mẽ là khả năng lồng các quy tắc của bạn. Phiên bản Ruby của Sass thực sự đi kèm với một công cụ dòng lệnh để chuyển đổi CSS của bạn thành SCSS và tự động thêm lồng vào các tệp SCSS. Nhưng hiện tại, điều đó không tồn tại trong LibSass. Tuy nhiên, có một công cụ trực tuyến cung cấp chức năng tương tự và nó có sẵn tại css2sass. herokuapp. com. Nó khá đơn giản để sử dụng. Hãy cùng nhau xem qua bằng cách sử dụng CSS từ trang web thể thao H plus mẫu của chúng tôi trong các tệp bài tập của chúng tôi cho video này. Video này được tạo bởi nhân viên tác giả Ray Villalobos, cái tên mà tôi chắc rằng bạn đã bắt gặp nếu bạn đã xem bất kỳ mặt trận nào khác . Trong các tệp bài tập, hãy chuyển đến thư mục tài sản, css và mở các kiểu. tập tin css. Chọn tất cả bằng Lệnh A, sao chép nó bằng Lệnh C, sau đó hãy chuyển đến trình duyệt của chúng tôi và chúng tôi sẽ dán nó vào bằng Lệnh V ở phía bên trái tại đây. Di chuột qua mũi tên ở giữa tại đây rồi chọn liên kết SCSS xuất hiện. Nhấp vào nó và bạn kết thúc với SCSS lồng nhau ở bên phải. Hãy chọn tất cả những thứ này, sao chép nó và quay lại Sublime, chúng ta sẽ mở tệp Sass mà tôi đã thêm cho bạn dưới dạng một tệp trống và dán nó vào đó. Chỉ cần không sử dụng công cụ một cách mù quáng vì mặc dù nó sẽ tạo ra các kiểu tương tự cho bạn, nhưng nó có thể thay đổi bộ chọn của bạn một chút. Ví dụ: nếu bạn có nhiều bộ chọn của cùng một khối kiểu và sau đó một trong các bộ chọn đó được sử dụng riêng, như chúng tôi làm trong tệp CSS của mình với các bộ chọn phụ và sup ở đây, nó sẽ sao chép từng bộ chọn trong kiểu khối nhiều bộ chọn . Vì vậy, nếu bạn xem sub và sup trong tệp SCSS, bạn có thể thấy tôi đang nói về điều gì. Tôi sẽ đặt các tệp này cạnh nhau để làm rõ, vì vậy tôi sẽ nhấn Command Option hai và kéo tệp đó qua. Và bạn có thể thấy nó đã thay đổi CSS ban đầu của chúng ta ở đây thành SCSS kết quả như thế nào. Nó hoàn toàn giống với những gì trình duyệt sẽ hiển thị, nhưng chúng tôi có thể tối ưu hóa nó một chút. Tôi thích duy trì nhiều bộ chọn CSS cho khối kiểu riêng lẻ vì nó thường dẫn đến ít văn bản được xuất ra hơn khi Sass được biên dịch thành CSS. Vì vậy, sau khi bạn chạy công cụ, nó có thể yêu cầu một số điều chỉnh thủ công để đưa nó đến nơi bạn muốn. Nếu bạn đang chuyển đổi một lượng lớn CSS, bạn có thể muốn bỏ qua hoàn toàn bước tự động này và chỉ cần thêm lồng theo ý muốn sau này theo cách thủ công. Trong ví dụ của chúng tôi, chỉ có một vài trường hợp nên chúng tôi sẽ điều chỉnh chúng ngay bây giờ. Chúng tôi sẽ bắt đầu ở đây với phụ và sup của chúng tôi, vì vậy tôi sẽ sao chép chúng từ CSS và tôi sẽ dán nó vào đây trong CSS. Tôi sẽ điều chỉnh thụt đầu dòng ở đó và sau đó cho phần hỗ trợ này bên dưới, chúng tôi chỉ cần các giá trị hàng đầu vì tất cả những gì được chia sẻ ở trên. Vị trí khác điều này xảy ra ở dưới đây. Vì vậy, chúng tôi có nút xuất hiện webkit này và con trỏ con trỏ và một vài điểm ở đây, tất cả đều nằm trong SCSS được bao phủ bởi một dòng bộ chọn này. Vì vậy, có bốn bộ chọn ở đó. Chúng tôi chỉ có thể sao chép cái này từ CSS và dán nó vào SCSS. Ngay bên dưới đó, chúng ta thấy đường viền và phần đệm được đặt ở nhiều vị trí ở đây và bộ chọn đó ở ngay đây, vì vậy tôi sẽ tiếp tục và tôi sẽ sao chép nó. Bây giờ trong trường hợp này, chúng tôi vẫn cần duy trì bộ chọn đầu vào vì chúng đang được sử dụng bên dưới. Vì vậy, tôi sẽ chỉ dán nó ở trên đây, điều chỉnh thụt đầu dòng và tôi sẽ xóa đầu vào bên trong tiêu điểm moz này ngay tại đó. Đây là một điểm nữa, chúng tôi có kế thừa nhiều kích thước hộp cho những gì chỉ là một vài bộ chọn ngay tại đó. Vì vậy, tôi sẽ sao chép chúng từ CSS nếu chúng tôi viết SCSS. Và vị trí cuối cùng ở dưới cùng nơi phương thức của chúng tôi là. Vì vậy, ở đây, chúng ta có thể thấy chiều cao, chiều rộng, trên cùng và bên trái được đặt cho chế độ phương thức hoặc phông nền trong khi có nhiều chế độ. Trong SCSS, một lần nữa, tôi sẽ sao chép từ CSS. Và trong trường hợp này, tôi sẽ dán nó lên trên vì phông nền có một số kiểu bổ sung. Và phương thức, chúng ta có thể xóa chúng khỏi đây, sau đó tôi sẽ lấy các kiểu dành riêng cho phương thức hiện đang ở bên dưới phông nền, cắt chúng và dán chúng vào đầu phương thức để nó có thứ tự rõ ràng. Ngoài ra, có khả năng nhận xét không đúng chỗ và đó là điều đang xảy ra ở đây với nhận xét về thương hiệu của chúng tôi. Nếu chúng ta xem lại CSS ban đầu của mình và tìm kiếm nó, chúng ta có thể thấy nó đã được thêm vào để biểu thị sự kết thúc của các phong cách xây dựng thương hiệu. Vì vậy, tôi sẽ đặt nó trở lại nơi nó thuộc về. Vì vậy, tôi sẽ chọn nó trong SCSS. Tôi sẽ cắt nó, và sau đó tôi cho rằng phong cách thương hiệu sẽ ở đây một chút. nó đây rồi. Vì vậy, tôi sẽ thêm một dòng cho điều đó và thêm phong cách xây dựng thương hiệu. Sau đó, tôi chắc chắn sẽ lưu tệp của mình bằng Command S. Việc lồng ghép tuyệt vời như thế nào, tôi muốn chỉ ra một số vấn đề tiềm ẩn với việc lồng ghép. Đầu tiên, khi bạn đang viết mã Sass mới, thật dễ dàng để thực hiện việc lồng và đi sâu vào nhiều cấp độ. Điều này thường dẫn đến CSS cồng kềnh, không cần thiết. Vì vậy, tốt nhất là tuân theo những gì được gọi là quy tắc khởi đầu, được đặt ra trong bài viết này trên đường Sass. Quy tắc nói rằng bạn không bao giờ nên lồng sâu hơn bốn cấp độ. Tôi đồng ý và khuyên bạn nên làm theo điều này tốt nhất có thể. Ngoài ra, bây giờ bạn đang sử dụng lồng nhau để tạo bộ chọn, bạn đang tạo bộ chọn cho trình duyệt để sử dụng không tồn tại trong mã nguồn Sass thực tế của bạn. Vì vậy, nếu bạn đã quen kiểm tra phần tử bằng các công cụ dành cho nhà phát triển của trình duyệt, sao chép bộ chọn và tìm kiếm nó trong cơ sở mã của mình, thì các tìm kiếm của bạn sẽ trống nếu bộ chọn được tạo do lồng nhau. Điều này khiến một số nhà phát triển tránh xa việc sử dụng lồng nhau trong Sass. Cá nhân tôi vẫn thích tổ chức và giảm khả năng lồng ghép khi nhập và với các kỹ thuật sửa lỗi mà Sass cung cấp, bạn có thể làm việc nhanh như khi bạn làm việc với vanilla CSS

Làm cách nào để chuyển đổi CSS sang tệp SCSS?

Tôi có thể đổi tên tệp CSS thành SCSS không?

Làm cách nào để chuyển CSS sang SCSS trong React?

Tôi có thể sử dụng cú pháp CSS trong SCSS không?