Làm cách nào để chạy mã scss trong studio trực quan?
Bạn đã bao giờ tự hỏi SASS là viết tắt của từ gì chưa? Show
Cho dù bạn đang tìm hiểu về nó lần đầu tiên hay muốn cải thiện kiến thức của mình về chủ đề này, thì đây là bài viết dành cho bạn Trong bài đăng này, bạn sẽ tìm hiểu các nguyên tắc cơ bản của Sass, nó là gì và cách sử dụng các tính năng tuyệt vời của Sass để tăng tốc quá trình tạo phong cách viết điều kiện tiên quyếtBài viết này giả định rằng bạn có
Chính xác thì Sass là gì?Sass (Syntactally Awesome Style Sheets) là một bộ tiền xử lý CSS cung cấp cho bạn siêu năng lực CSS Hãy đối mặt với nó. đôi khi việc viết CSS có thể khó khăn, đặc biệt là trong thế giới giao diện người dùng ngày càng phức tạp ngày nay Và nhiều lúc, bạn sẽ thấy rằng mình đang lặp lại chính mình thường xuyên Sass đến giải cứu trong tình huống này. Nó giúp bạn tuân thủ triết lý KHÔ (Không lặp lại chính mình) khi viết CSS Sass cung cấp một trình biên dịch cho phép chúng ta viết các biểu định kiểu theo hai cú pháp khác nhau, thụt lề và SCSS. Bây giờ chúng ta hãy xem xét từng cú pháp thụt lềĐây là cú pháp cũ hơn được thụt lề và loại bỏ dấu ngoặc nhọn và dấu chấm phẩy. Nó có phần mở rộng tệp là 6
cú pháp SCSSĐây là cú pháp mới hơn và phổ biến hơn. Nó thực chất là một tập hợp con của cú pháp CSS3. Điều này có nghĩa là bạn có thể viết CSS thông thường với một số chức năng bổ sung Do các tính năng nâng cao của nó, nó thường được gọi là CSS hỗn xược. Nó có phần mở rộng tệp là 7
Sass hoạt động như thế nào?Sass hoạt động theo cách mà khi bạn viết các kiểu của mình trong tệp 7, nó sẽ được biên dịch thành một tệp CSS thông thường. Mã CSS sau đó được tải vào trình duyệtĐó là lý do tại sao nó được gọi là Bộ tiền xử lý Tại sao bạn nên sử dụng Sass?
Các tính năng của SassDưới đây là một số tính năng giúp Sass thực sự là CSS với Siêu năng lực Các biến trong SassBạn có thể khai báo các biến trong Sass. Đây là một trong những điểm mạnh của Sass vì chúng ta có thể định nghĩa các biến cho các thuộc tính khác nhau và sử dụng chúng trong bất kỳ tệp nào Lợi ích ở đây là nếu giá trị đó thay đổi, bạn chỉ cần cập nhật một dòng mã Điều này được thực hiện bằng cách đặt tên một biến có ký hiệu đô la 9 và sau đó tham chiếu nó ở nơi khác trong mã của bạn
Làm tổ trong SassHầu hết khi viết CSS, các lớp thường bị trùng lặp. Chúng ta có thể tránh sự trùng lặp này bằng cách lồng các kiểu bên trong phần tử cha Trong CSS,
Với Sass, đoạn mã trên có thể được viết như thế này ________số 8Bộ chọn gốcTrong mã Sass ở trên, bạn có thể nhận thấy ký hiệu dấu và 0 được sử dụng với lớp giả di chuột. Đây được gọi là Bộ chọn gốc
Vì vậy, trong trường hợp mã ở trên, 0 sẽ đề cập đến cha mẹ là thẻ neo 3
Các bộ phận trong SassĐây là một trong nhiều tính năng tuyệt vời của Sass mang lại lợi thế cho bạn Khi các bảng định kiểu phát triển lớn theo thời gian, việc duy trì chúng trở nên khó khăn. Do đó, bạn nên chia các biểu định kiểu của mình thành các phần nhỏ hơn. Nói cách khác, Partials giúp bạn tổ chức và cấu trúc mã của mình Để khai báo một phần, chúng tôi sẽ bắt đầu tên tệp bằng dấu gạch dưới 4 và thêm nó vào một tệp Sass khác bằng cách sử dụng chỉ thị 5Ví dụ: nếu chúng tôi có 6, 7 và 8, chúng tôi có thể nhập chúng vào tệp SCSS chính 9 9Bạn sẽ nhận thấy rằng dấu gạch dưới và 7 không được thêm vào. Đó là bởi vì Sass tự động cho rằng bạn đang đề cập đến tệp 6 hoặc 7Mixin trong SassMột vấn đề lớn khác với CSS là bạn sẽ thường sử dụng một nhóm kiểu tương tự. Mixin cho phép bạn đóng gói một nhóm các kiểu và áp dụng các kiểu đó ở bất kỳ đâu trong mã của bạn bằng cách sử dụng từ khóa 3Một ví dụ về thời điểm bạn sử dụng mixin là khi sử dụng Flexbox 4Hàm và toán tử SassSass cung cấp một bộ công cụ giúp viết mã lập trình nhiều hơn Sass cung cấp các hàm tích hợp cho phép chúng tôi thực hiện các phép tính và thao tác trả về một giá trị cụ thể Chúng bao gồm từ tính toán màu sắc đến các phép toán như nhận số ngẫu nhiên và tính toán kích thước và thậm chí cả điều kiện Nó cũng cung cấp hỗ trợ cho các toán tử như 4, 5, 6, 7, 8 và 9, mà chúng ta có thể sử dụng với hàm 0Dưới đây là một ví dụ sử dụng chức năng chuyển đổi pixel sang rem 2
Vì vậy, đây là cách nó nên được viết 4Đây là một ví dụ về logic có điều kiện trong mixin 5Sass cũng cung cấp các hàm 2 và 3 để điều chỉnh màu theo một tỷ lệ phần trăm nhất địnhVí dụ 0Cách thiết lập Sass để phát triển địa phươngTuyệt quá. Bây giờ chúng ta đã tìm hiểu về các khía cạnh "lý thuyết" của Sass, hãy bắt đầu viết mã để hiểu rõ hơn về cách thức hoạt động của nó Trong phần này, bạn sẽ học cách thiết lập môi trường phát triển cục bộ, đồng thời xem qua một trang đích đơn giản mà tôi đã chuẩn bị Kiểm tra bản demo trên Codesandbox và kho lưu trữ mã trên GitHub Các cách biên dịch SassCó nhiều cách khác nhau để biên dịch các tệp Sass
Trong hướng dẫn này, chúng tôi sẽ sử dụng tùy chọn Tiện ích mở rộng mã VS vì đây là cách dễ nhất để bắt đầu với Cách thiết lập Sass cho mã VSBước 1. Cài đặt Trình biên dịch Sass trực tiếpĐầu tiên, khởi chạy Visual Studio Code. Sau khi được tải, hãy chuyển đến bảng điều khiển bên trái và chọn tab tiện ích mở rộng Tab tiện ích mở rộng trong Mã VSTrong thanh tìm kiếm, tìm kiếm "Trình biên dịch Sass trực tiếp" và cài đặt nó. Tiện ích mở rộng này giúp chúng tôi biên dịch các tệp Sass - 7 (hoặc 6) - thành các tệp 6Bước 2. Đặt vị trí lưuBây giờ hãy thay đổi đường dẫn tệp để Sass được biên dịch vào thư mục 7Để thực hiện việc này, bạn sẽ thực hiện các thay đổi đối với tệp 8Trong Mã VS, đi tới Tệp> Tùy chọn> Cài đặt. Bây giờ hãy tìm kiếm 9 để thay đổi cài đặt chungNhấp vào 90Bây giờ, trên một vài dòng đầu tiên, nơi bạn thấy mã này 1Thay đổi 91 thành 92, vì vậy bây giờ nó trông như thế này 2Bước 3. Biên dịch SassBây giờ, sau khi lưu cài đặt, hãy quay lại tệp Sass và nhấp vào nút có nội dung "Xem Sass" ở cuối cửa sổ Nhấp vào "Xem Sass"Sau khi bạn nhấp vào nút, hai tệp sẽ được tạo. 6 và một 94 trong thư mục 7Tuy nhiên, bạn không nên thay đổi bất kỳ trong số chúng. Bởi vì nó đã giúp bạn biên dịch Sass thành CSS mỗi khi bạn lưu các kiểu dáng mới Bước 4. Liên kết tệp CSSSau đó, liên kết tệp CSS trong 96 của bạn. Trong trường hợp của chúng ta 3Bây giờ hãy chạy tệp trong trình duyệt của bạn. Đây phải là bố cục kết quả trong CodeSandbox bên dưới Đi bộ qua mãĐây là giải thích về mã từ phần trước
Sự kết luậnchúc mừng. Nếu bạn đã xem đến cuối, điều đó có nghĩa là bạn đã biết về cách thức hoạt động của Sass, các tính năng thú vị của nó và hy vọng bạn sẽ sớm bắt đầu sử dụng nó Nếu bạn muốn tìm hiểu thêm về Sass, tôi khuyên bạn nên xem khóa học của freeCodeCamp Nếu bạn thấy bài viết này hữu ích (điều mà tôi chắc chắn là bạn đã làm 😉), hãy chia sẻ nó với bạn bè và mạng của bạn, đồng thời thoải mái kết nối với tôi trên Twitter và blog của tôi, nơi tôi chia sẻ tài nguyên và bài viết để giúp bạn trở thành một nhà phát triển tốt hơn Cảm ơn đã đọc và chúc bạn viết mã vui vẻ QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Nhà phát triển giao diện người dùng, đam mê xây dựng giao diện người dùng hấp dẫn và trải nghiệm tương tác; . ) Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Làm cách nào để thiết lập SCSS trong Visual Studio Code?Cách thiết lập SASS trong VSCode . Cài đặt nút và npm Cài đặt SASS từ dòng lệnh của bạn bằng npm install -g sass Sau khi hoàn tất, bạn cần cài đặt tiện ích mở rộng trong VSCode để theo dõi các tệp SCSS của bạn và chuyển đổi chúng thành CSS thông thường mỗi khi bạn lưu. Tải xuống tiện ích mở rộng Trình biên dịch SASS trực tiếp trong VSCode Làm cách nào để biên dịch mã sass visual studio?Nhấn F1 hoặc ctrl+shift+P và nhập Live Sass. Xem Sass để bắt đầu xem và Live Sass. Ngừng theo dõi Sass ngừng theo dõi. Nhấn F1 hoặc ctrl+shift+P và nhập Live Sass. Biên dịch Sass - Không có Chế độ xem để biên dịch một lần biên dịch tệp hiện tại . |