Xây dựng SCSS thành CSS

Visual Studio Code có hỗ trợ tích hợp để chỉnh sửa biểu định kiểu trong CSS

"[css]": {
    "editor.colorDecorators": false
}

1, SCSS

"[css]": {
    "editor.colorDecorators": false
}

2 và Ít hơn

"[css]": {
    "editor.colorDecorators": false
}

3. Ngoài ra, bạn có thể cài đặt tiện ích mở rộng để có nhiều chức năng hơn

Mẹo. Nhấp vào ô tiện ích mở rộng ở trên để đọc mô tả và đánh giá để quyết định tiện ích mở rộng nào phù hợp nhất với bạn. Xem thêm trên Marketplace

IntelliSense

Mã VS có hỗ trợ cho bộ chọn, thuộc tính và giá trị. Sử dụng ⌃Dấu cách (Windows, Linux Ctrl+Dấu cách ) to get a list of context specific options.

Các đề xuất chứa nhiều tài liệu, bao gồm danh sách các trình duyệt hỗ trợ thuộc tính. Để xem văn bản mô tả đầy đủ của mục đã chọn, hãy sử dụng ⌃Space (Windows, Linux Ctrl+SpaceCtrl+Space . Ctrl+Space . Ctrl+Space . Ctrl+Space . Ctrl+Space . Ctrl+Space . ).

Tô màu cú pháp & xem trước màu sắc

Khi bạn nhập, sẽ có đánh dấu cú pháp cũng như xem trước ngữ cảnh của màu sắc

Nhấp vào bản xem trước màu sẽ khởi chạy bộ chọn màu tích hợp hỗ trợ cấu hình màu sắc, độ bão hòa và độ mờ

Mẹo. Bạn có thể kích hoạt giữa các chế độ màu khác nhau bằng cách nhấp vào chuỗi màu ở đầu bộ chọn

Bạn có thể ẩn bản xem trước màu của Mã VS bằng cách đặt cài đặt sau

"editor.colorDecorators": false

Để vô hiệu hóa nó cho css, Ít hơn và SCSS, hãy sử dụng

"[css]": {
    "editor.colorDecorators": false
}

gấp

Bạn có thể gấp các vùng của mã nguồn bằng cách sử dụng các biểu tượng gấp trên rãnh giữa số dòng và bắt đầu dòng. Các vùng gấp có sẵn cho tất cả các khai báo (ví dụ: khai báo quy tắc) và cho các nhận xét nhiều dòng trong mã nguồn

Ngoài ra, bạn có thể sử dụng các điểm đánh dấu vùng sau để xác định vùng gấp.

"[css]": {
    "editor.colorDecorators": false
}

4 và

"[css]": {
    "editor.colorDecorators": false
}

5 trong CSS/SCSS/Less hoặc

"[css]": {
    "editor.colorDecorators": false
}

6 và

"[css]": {
    "editor.colorDecorators": false
}

7 trong SCSS/Less

Nếu bạn muốn chuyển sang chế độ gấp dựa trên thụt đầu dòng cho CSS, Ít hơn và SCSS, hãy sử dụng

"[css]": {
    "editor.foldingStrategy": "indentation"
},

đoạn trích Emmet

Hỗ trợ viết tắt Emmet được tích hợp vào Mã VS, các đề xuất được liệt kê cùng với các đề xuất và đoạn trích khác trong danh sách tự động hoàn thành của trình chỉnh sửa

Mẹo. Xem phần CSS của bảng cheat Emmet để biết các từ viết tắt hợp lệ

Mã VS cũng hỗ trợ Đoạn mã do người dùng xác định

Xác minh cú pháp & Linting

Có hỗ trợ phiên bản CSS <= 2. 1, Phiên bản Sass <= 3. Phiên bản 2 trở xuống <= 2. 3

Ghi chú. Bạn có thể tắt xác thực CSS, Sass hoặc Ít hơn mặc định của VS Code bằng cách đặt cài đặt Người dùng hoặc Không gian làm việc

"[css]": {
    "editor.colorDecorators": false
}

8 tương ứng thành false

"[css]": {
    "editor.colorDecorators": false
}

1

Chuyển đến Biểu tượng trong tệp

Bạn có thể nhanh chóng điều hướng đến biểu tượng CSS có liên quan trong tệp hiện tại bằng cách nhấn ⇧⌘O (Windows, Linux Ctrl+Shift+O).

di chuột

Di chuột qua bộ chọn hoặc thuộc tính sẽ cung cấp một đoạn mã HTML phù hợp với quy tắc CSS

Chuyển đến Tuyên bố và Tìm tài liệu tham khảo

Điều này được hỗ trợ cho các biến Sass và Ít hơn trong cùng một tệp. Các biến CSS theo đề xuất tiêu chuẩn dự thảo cũng được hỗ trợ

Có chuyển sang định nghĩa cho các liên kết

"[css]": {
    "editor.colorDecorators": false
}

9 và

"[css]": {
    "editor.foldingStrategy": "indentation"
},

0 trong CSS, SCSS và Ít hơn

Dữ liệu tùy chỉnh CSS

Bạn có thể mở rộng hỗ trợ CSS của VS Code thông qua định dạng dữ liệu tùy chỉnh khai báo. Bằng cách đặt

"[css]": {
    "editor.foldingStrategy": "indentation"
},

1 thành danh sách các tệp JSON theo định dạng dữ liệu tùy chỉnh, bạn có thể nâng cao hiểu biết của Mã VS về các thuộc tính CSS mới, chỉ thị tại, lớp giả và phần tử pesudo. Sau đó, Mã VS sẽ cung cấp hỗ trợ ngôn ngữ, chẳng hạn như thông tin hoàn thành và di chuột cho các thuộc tính được cung cấp, chỉ thị tại, lớp giả và phần tử pesudo

Bạn có thể đọc thêm về cách sử dụng dữ liệu tùy chỉnh trong kho vscode-custom-data

định dạng

Tiện ích mở rộng Tính năng ngôn ngữ CSS cũng cung cấp một trình định dạng. Trình định dạng hoạt động với CSS, LESS và SCSS. Nó được triển khai bởi thư viện JS Beautify và đi kèm với các cài đặt sau

• "[css]": {
      "editor.foldingStrategy": "indentation"
  },
  

  2 - Bật/tắt trình định dạng CSS mặc định

• "[css]": {
      "editor.foldingStrategy": "indentation"
  },
  

  3 - Tách các bộ quy tắc bằng một dòng trống

• "[css]": {
      "editor.foldingStrategy": "indentation"
  },
  

  4 - Tách các bộ chọn bằng một dòng mới

• "[css]": {
      "editor.foldingStrategy": "indentation"
  },
  

  5 - Đảm bảo có ký tự khoảng trắng xung quanh dấu phân cách bộ chọn '>', '+', '~' (ví dụ:

  "[css]": {
      "editor.foldingStrategy": "indentation"
  },
  

  6)

Các cài đặt tương tự cũng tồn tại cho

"[css]": {
    "editor.foldingStrategy": "indentation"
},

7 và

"[css]": {
    "editor.foldingStrategy": "indentation"
},

8

Dịch Sass và Ít hơn thành CSS

VS Code có thể tích hợp với bộ chuyển đổi Sass và Less thông qua trình chạy tác vụ tích hợp của chúng tôi. Chúng tôi có thể sử dụng điều này để chuyển các tệp

"[css]": {
    "editor.colorDecorators": false
}

2 hoặc

"[css]": {
    "editor.colorDecorators": false
}

3 thành tệp

"[css]": {
    "editor.colorDecorators": false
}

1. Hãy xem qua việc phiên mã một tệp Sass/Less đơn giản

Bước 1. Cài đặt bộ chuyển mã Sass hoặc Ít hơn

Đối với hướng dẫn này, hãy sử dụng nút sass hoặc ít hơn. mô-đun js

Ghi chú. Nếu bạn không có nút. js và trình quản lý gói npm đã được cài đặt, bạn sẽ cần cài đặt cho hướng dẫn này. Cài đặt nút. js cho nền tảng của bạn. Trình quản lý gói Node (npm) được bao gồm trong Node. phân phối js. Bạn sẽ cần mở một thiết bị đầu cuối mới (dấu nhắc lệnh) để

"[css]": {
    "editor.colorDecorators": false
}

12 có trên PATH của bạn

"[css]": {
    "editor.colorDecorators": false
}

6

Bước 2. Tạo một tệp Sass hoặc Ít hơn đơn giản

Mở Mã VS trên một thư mục trống và tạo tệp

"[css]": {
    "editor.colorDecorators": false
}

13 hoặc

"[css]": {
    "editor.colorDecorators": false
}

14. Đặt đoạn mã sau vào tệp đó

"[css]": {
    "editor.colorDecorators": false
}

9

Đối với phiên bản Ít hơn của tệp trên, chỉ cần thay đổi

"[css]": {
    "editor.colorDecorators": false
}

15 thành

"[css]": {
    "editor.colorDecorators": false
}

16

Ghi chú. Đây là một ví dụ rất đơn giản, đó là lý do tại sao mã nguồn gần như giống hệt nhau giữa cả hai loại tệp. Trong các kịch bản nâng cao hơn, cú pháp và cấu trúc sẽ khác nhiều

Bước 3. Tạo nhiệm vụ. json

Bước tiếp theo là thiết lập cấu hình tác vụ. Để thực hiện việc này, hãy chạy Terminal > Configure Tasks và nhấp vào Create task. tệp json từ mẫu. Trong hộp thoại lựa chọn xuất hiện, chọn Khác

Thao tác này sẽ tạo một tệp

"[css]": {
    "editor.colorDecorators": false
}

17 mẫu trong thư mục

"[css]": {
    "editor.colorDecorators": false
}

18 của không gian làm việc. Phiên bản đầu tiên của tệp có một ví dụ để chạy một lệnh tùy ý. Thay vào đó, chúng tôi sẽ sửa đổi cấu hình đó để chuyển mã Sass/Less

"editor.colorDecorators": false

4

"editor.colorDecorators": false

5

Bước 4. Chạy nhiệm vụ xây dựng

Vì đây là lệnh duy nhất trong tệp nên bạn có thể thực thi nó bằng cách nhấn ⇧⌘B (Windows, Linux Ctrl+Shift+B) (Run Build Task). The sample Sass/Less file should not have any compile problems, so by running the task all that happens is a corresponding

"[css]": {
    "editor.colorDecorators": false
}

19 file is created.

Vì trong các môi trường phức tạp hơn, có thể có nhiều hơn một tác vụ xây dựng nên chúng tôi nhắc bạn chọn tác vụ để thực thi sau khi nhấn ⇧⌘B . Ngoài ra, chúng tôi cho phép bạn quét đầu ra để tìm các sự cố biên dịch (lỗi và cảnh báo). Tùy thuộc vào trình biên dịch, hãy chọn một mục thích hợp trong danh sách để quét đầu ra của công cụ để tìm lỗi và cảnh báo. Nếu bạn không muốn quét đầu ra, hãy chọn Never scan the build output từ danh sách được trình bày. Ctrl+Shift+B) (Run Build Task). In addition, we allow you to scan the output for compile problems (errors and warnings). Depending on the compiler, select an appropriate entry in the list to scan the tool output for errors and warnings. If you don't want to scan the output, select Never scan the build output from the presented list.

Tại thời điểm này, bạn sẽ thấy một tệp bổ sung hiển thị trong danh sách tệp

"[css]": {
    "editor.colorDecorators": false
}

19

Nếu bạn muốn đặt tác vụ làm tác vụ xây dựng mặc định để chạy, hãy thực thi Cấu hình tác vụ xây dựng mặc định từ menu Terminal chung và chọn tác vụ Sass hoặc Ít hơn tương ứng từ danh sách được trình bày

Ghi chú. Nếu bản dựng của bạn không thành công hoặc bạn thấy thông báo lỗi chẳng hạn như "Thư mục đầu ra phải được chỉ định khi biên dịch thư mục", hãy đảm bảo tên tệp trong

"[css]": {
    "editor.colorDecorators": false
}

17 của bạn khớp với tên tệp trên đĩa. Bạn luôn có thể kiểm tra bản dựng của mình bằng cách chạy

"[css]": {
    "editor.colorDecorators": false
}

62 từ dòng lệnh

Tự động biên dịch Sass/Less

Hãy tiến xa hơn một chút và tự động hóa quá trình biên dịch Sass/Less với VS Code. Chúng tôi có thể làm như vậy với cùng một tích hợp trình chạy tác vụ như trước đây, nhưng với một vài sửa đổi

Bước 1. Cài đặt Gulp và một số plug-in

Chúng tôi sẽ sử dụng Gulp để tạo một tác vụ sẽ tự động hóa quá trình biên dịch Sass/Less. Chúng tôi cũng sẽ sử dụng plug-in gulp-sass để giúp mọi thứ dễ dàng hơn một chút. Trình cắm Ít hơn không cần nuốt nước bọt

Chúng ta cần cài đặt gulp trên toàn cầu (công tắc ____263) và cục bộ

"[css]": {
    "editor.colorDecorators": false
}

1

Ghi chú.

"[css]": {
    "editor.colorDecorators": false
}

64 và

"[css]": {
    "editor.colorDecorators": false
}

65 là các plugin Gulp cho các mô-đun

"[css]": {
    "editor.colorDecorators": false
}

66 và

"[css]": {
    "editor.colorDecorators": false
}

67 mà chúng tôi đã sử dụng trước đây. Có nhiều plug-in Gulp Sass và Less khác mà bạn có thể sử dụng, cũng như các plug-in cho Grunt

Bạn có thể kiểm tra xem cài đặt gulp của mình có thành công hay không bằng cách nhập

"[css]": {
    "editor.colorDecorators": false
}

68 vào thiết bị đầu cuối. Bạn sẽ thấy một phiên bản được hiển thị cho cả cài đặt toàn cầu (CLI) và cục bộ

Bước 2. Tạo một tác vụ Gulp đơn giản

Mở Mã VS trên cùng một thư mục từ trước (chứa

"[css]": {
    "editor.colorDecorators": false
}

13/

"[css]": {
    "editor.colorDecorators": false
}

14 và

"[css]": {
    "editor.colorDecorators": false
}

17 trong thư mục

"[css]": {
    "editor.colorDecorators": false
}

18) và tạo

"[css]": {
    "editor.colorDecorators": false
}

93 ở thư mục gốc

Đặt đoạn mã sau vào tệp

"[css]": {
    "editor.colorDecorators": false
}

93

"[css]": {
    "editor.colorDecorators": false
}

3

"[css]": {
    "editor.colorDecorators": false
}

0

Có chuyện gì đang xảy ra ở đây?

1. Tác vụ gulp

   "[css]": {
       "editor.colorDecorators": false
   }
   
   

   95 của chúng tôi trước tiên sẽ chạy tác vụ

   "[css]": {
       "editor.colorDecorators": false
   }
   
   

   66 hoặc

   "[css]": {
       "editor.foldingStrategy": "indentation"
   },
   

   7 một lần khi nó khởi động
2. Sau đó, nó theo dõi các thay đổi đối với bất kỳ tệp SCSS/Less nào ở thư mục gốc của không gian làm việc của chúng tôi, ví dụ: thư mục hiện tại đang mở trong Mã VS
3. Nó lấy tập hợp các tệp SCSS/Less đã thay đổi và chạy chúng thông qua trình biên dịch tương ứng của chúng tôi, ví dụ:

   "[css]": {
       "editor.colorDecorators": false
   }
   
   

   64,

   "[css]": {
       "editor.colorDecorators": false
   }
   
   

   65
4. Bây giờ chúng ta có một tập hợp các tệp CSS, mỗi tệp được đặt tên tương ứng theo tệp SCSS/Less ban đầu của chúng. Sau đó chúng tôi đặt các tệp này trong cùng một thư mục

Bước 3. Chạy tác vụ mặc định gulp

Để hoàn thành việc tích hợp task với VS Code, chúng ta sẽ cần sửa đổi cấu hình task trước đó để chạy task Gulp mặc định vừa tạo. Bạn có thể xóa tệp

"[css]": {
    "editor.colorDecorators": false
}

17 hoặc làm trống tệp chỉ giữ lại thuộc tính

"editor.colorDecorators": false

41. Bây giờ hãy thực thi Run Task từ menu Terminal chung. Quan sát rằng bạn sẽ thấy một bộ chọn liệt kê các tác vụ được xác định trong tệp gulp. Chọn nuốt nước bọt. mặc định để bắt đầu nhiệm vụ. Chúng tôi cho phép bạn quét đầu ra để tìm các sự cố biên dịch. Tùy thuộc vào trình biên dịch, hãy chọn một mục thích hợp trong danh sách để quét đầu ra của công cụ để tìm lỗi và cảnh báo. Nếu bạn không muốn quét đầu ra, hãy chọn Never scan the build output từ danh sách được trình bày. Tại thời điểm này, nếu bạn tạo và/hoặc sửa đổi các tệp Ít hơn hoặc SASS, bạn sẽ thấy các tệp CSS tương ứng được tạo và/hoặc các thay đổi được phản ánh khi lưu. Bạn cũng có thể kích hoạt để làm cho mọi thứ trở nên hợp lý hơn

Nếu bạn muốn uống một ngụm. tác vụ mặc định tác vụ xây dựng mặc định được thực thi khi nhấn ⇧⌘B (Windows, Linux Ctrl+Shift+B) run Configure Default Build Task from the global Terminal menu and select gulp: default from the presented list.

Bước 4. Chấm dứt tác vụ mặc định gulp

một ngụm. tác vụ mặc định chạy trong nền và theo dõi các thay đổi của tệp đối với tệp Sass/Less. Nếu bạn muốn dừng tác vụ, bạn có thể sử dụng Terminate Task từ menu Terminal chung

Tùy chỉnh cài đặt CSS, SCSS và ít hơn

Bạn có thể định cấu hình các cảnh báo xơ vải sau đây dưới dạng Cài đặt người dùng và không gian làm việc

Cài đặt

"editor.colorDecorators": false

42 cho phép bạn tắt xác thực tích hợp. Bạn sẽ làm điều này nếu bạn muốn sử dụng một kẻ nói dối khác

IdDescriptionDefaultcss. xác thựcBật hoặc tắt tất cả xác thực csstrueless. validateBật hoặc tắt tất cả ít xác thực hơn truescss. xác thực Bật hoặc tắt tất cả xác thực scss đúng

Để định cấu hình tùy chọn cho CSS, hãy sử dụng

"editor.colorDecorators": false

43 làm tiền tố cho id;

Đặt cài đặt thành

"editor.colorDecorators": false

46 hoặc

"editor.colorDecorators": false

47 nếu bạn muốn bật tính năng kiểm tra xơ vải, hãy sử dụng

"editor.colorDecorators": false

48 để tắt tính năng này. Kiểm tra xơ vải được thực hiện khi bạn gõ

IdDescriptionDefaultvalidateBật hoặc tắt tất cả xác thựctrue compatibleVendorPrefixesKhi sử dụng một thuộc tính có tiền tố dành riêng cho nhà cung cấp (ví dụ:

"editor.colorDecorators": false

49), hãy đảm bảo cũng bao gồm tất cả các thuộc tính dành riêng cho nhà cung cấp khác e. g.

"editor.colorDecorators": false

50,

"editor.colorDecorators": false

51 và

"editor.colorDecorators": false

52ignorevendorPrefixKhi sử dụng thuộc tính có tiền tố dành riêng cho nhà cung cấp, ví dụ như

"editor.colorDecorators": false

49, hãy đảm bảo cũng bao gồm thuộc tính tiêu chuẩn nếu thuộc tính đó tồn tại e. g.

"editor.colorDecorators": false

54warningduplicatePropertiesCảnh báo về các thuộc tính trùng lặp trong cùng một quy tắcsetignoreemptyRulesCảnh báo về các quy tắc trốngsetwarningimportStatementCảnh báo về việc sử dụng câu lệnh

"editor.colorDecorators": false

55 vì các câu lệnh nhập được tải liên tục có tác động tiêu cực đến hiệu suất trang webignoreboxModelKhông sử dụng

"editor.colorDecorators": false

56 hoặc . g.

"[css]": {
    "editor.colorDecorators": false
}

11 bằng 0 không cần đơn vị. bỏ qua phông chữFacePropertiesCảnh báo khi sử dụng quy tắc

"[css]": {
    "editor.colorDecorators": false
}

12 mà không xác định thuộc tính

"[css]": {
    "editor.colorDecorators": false
}

13 và

"[css]": {
    "editor.colorDecorators": false
}

14cảnh báohexColorLengthCảnh báo khi sử dụng các số hex không bao gồm ba hoặc sáu số hexlỗi đối sốInColorFunctionCảnh báo khi số lượng tham số không hợp lệ trong hàm màu e. g.

"[css]": {
    "editor.colorDecorators": false
}

15errorunknownPropertiesWarn khi sử dụng thuộc tính không xác địnhwarningieHackWarn khi sử dụng bản hack IE. Ví dụ: với

"[css]": {
    "editor.colorDecorators": false
}

18, các thuộc tính

"editor.colorDecorators": false

56,

"editor.colorDecorators": false

57,

"[css]": {
    "editor.colorDecorators": false
}

31,

"[css]": {
    "editor.colorDecorators": false
}

32 và

"[css]": {
    "editor.colorDecorators": false
}

33 không có hiệu lực. cảnh báoquan trọngCảnh báo khi sử dụng

"[css]": {
    "editor.colorDecorators": false
}

34 vì đó là dấu hiệu cho thấy tính đặc hiệu của toàn bộ CSS đã vượt khỏi tầm kiểm soát và cần được cấu trúc lại. bỏ quafloatCảnh báo khi sử dụng

"[css]": {
    "editor.colorDecorators": false
}

33 vì số float dẫn đến CSS mỏng manh, dễ bị hỏng nếu một khía cạnh của bố cục thay đổi. ignoreidSelectorWarn khi sử dụng bộ chọn cho id

"[css]": {
    "editor.colorDecorators": false
}

36 vì bộ chọn không được chứa ID vì các quy tắc này được kết hợp quá chặt chẽ với HTML. phớt lờ

Bước tiếp theo

Đọc tiếp để tìm hiểu về

• Định cấu hình Tác vụ - Tìm hiểu về Tác vụ để giúp bạn chuyển mã SCSS và Ít hơn sang CSS
• Chỉnh sửa cơ bản - Tìm hiểu về trình chỉnh sửa VS Code mạnh mẽ
• Điều hướng mã - Di chuyển nhanh qua mã nguồn của bạn
• HTML - CSS chỉ là khởi đầu, HTML cũng được hỗ trợ rất tốt trong VS Code

Câu hỏi thường gặp

Mã VS có cung cấp bộ chọn màu không?

Có, hãy di chuột qua tham chiếu màu CSS và bộ chọn màu sẽ hiển thị

Có hỗ trợ cho cú pháp Sass dựa trên thụt lề (. ngố)?

Không, nhưng có một số tiện ích mở rộng trong Thị trường hỗ trợ hương vị thụt lề của Sass, ví dụ: tiện ích mở rộng Sass ban đầu được tạo bởi Robin Bentley, hiện được duy trì bởi Leonard Grosoli

SCSS có được biên dịch thành CSS không?

Làm cách nào để biên dịch SCSS thành CSS trong Visual Studio?

Làm cách nào để kết nối SASS với CSS?

Làm cách nào để biên dịch mã SCSS?