Vscode có hỗ trợ SCSS không?

Sass đã là một phần trong quy trình làm việc của tôi trong nhiều năm. Việc nó cho phép tôi viết CSS lồng nhau là đủ lý do để tôi cài đặt nó, mặc dù tôi sử dụng nó cho nhiều mục đích hơn thế

Quay lại khi tôi mới bắt đầu với Sass, các biến CSS không phải là một thứ, vì vậy tôi cũng đã sử dụng SCSS cho điều đó

Vào thời điểm đó, tôi đã sử dụng kết hợp CodeKit, một ứng dụng được bảo trì tốt cũng bao gồm tiền tố nhà cung cấp cập nhật. Tuy nhiên, điều đó có nghĩa là mở hai ứng dụng ( CodeKit và SublimeText ) cho mỗi phiên viết mã

Bây giờ tôi đang học JavaScript và React, tôi thấy rằng 'mọi người' đang sử dụng VS Code. Trong một thời gian, tôi đã từ chối và bắt đầu sử dụng SublimeText 4 (beta). Tôi hơi xấu hổ vì sự không trung thành của mình, nhưng cuối cùng tôi cũng chịu khuất phục trước áp lực của đồ chơi mới và đã chuyển sang VS Code

Trong khi khám phá các tùy chọn trình biên dịch SASS cho Mã VS, các bài báo và video tôi tìm thấy liên tục dẫn tôi đến Trình biên dịch Sass trực tiếp của Ritwick Dey. Trình biên dịch này cũng cài đặt một tiện ích mở rộng có tên Live Server. Quá trình cài đặt diễn ra suôn sẻ và tôi đã thiết lập. tập tin scss

Tôi sử dụng partials để sắp xếp CSS của mình. Các phần, chứa các phân đoạn CSS nhỏ hơn, được lưu trữ trong các tệp bắt đầu bằng dấu gạch dưới. Ví dụ: _global. scss hoặc _header. scss. Chúng được nhóm lại với nhau trong một tệp bằng quy tắc @, quy tắc này sau đó được biên dịch thành tệp CSS

Cho đến sáng nay, tôi đã nghĩ rằng mình phải sử dụng quy tắc @import mà tôi luôn sử dụng và quy tắc này được biên dịch thành CSS bằng cách sử dụng tiện ích mở rộng

Tuy nhiên, khi xem xét các tài liệu của Sass, tôi phát hiện ra rằng họ hiện đang cung cấp một quy tắc sở hữu có tên là @use thay vì @import. Nó liên quan đến một tính năng tương đối mới gọi là mô-đun. đó là một chủ đề cho một bài viết khác

@use 'typography';
@use 'global';
@use 'layout';
@use 'header';
@use 'nav';
@use 'page';
@use 'footer';

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tuy nhiên, khi tôi thử sử dụng @rule, trình biên dịch chỉ sao chép thẳng vào. tập tin css. Nó không biên dịch

Gửi đội quân

Câu hỏi thường gặp về hỗ trợ cho Trình biên dịch Sass trực tiếp được lưu giữ trong phần Sự cố của kho lưu trữ GitHub của nó. Việc tìm kiếm trợ giúp bị cản trở rất nhiều bởi thực tế là hầu hết các sự cố đều có tiêu đề "Sự cố tiện ích mở rộng. " Đây phải là tiêu đề mặc định trong hệ thống GitHub và là một ví dụ tuyệt vời về cách không viết tiêu đề vấn đề hỗ trợ

Tôi đã kiên trì và bằng cách tìm kiếm và cuộn, cuối cùng đã tìm thấy một sự cố có tên "PHẦN MỞ RỘNG NÀY KHÔNG CÒN ĐƯỢC BẢO TRÌ. "

Tại thời điểm viết bài này, chỉ vài tuần trôi qua kể từ khi Glenn Marks đăng vấn đề đó. Anh ấy đang tích cực duy trì phiên bản của riêng mình trên thị trường

Kho lưu trữ GitHub của tiện ích mở rộng và Câu hỏi thường gặp có tại https. //github. com/glenn2223/vscode-live-sass-compiler. Tôi có thể thấy rằng Ritwick Dey là một Người đóng góp nên tôi cho rằng phiên bản mới hơn này có sự phù hộ của anh ấy

Tôi đã gỡ cài đặt cả Trình biên dịch Sass trực tiếp và Máy chủ trực tiếp mà không gặp sự cố. Sau đó, tôi làm theo hướng dẫn của Glenn để cài đặt phiên bản của anh ấy bằng cách mở bảng Mở nhanh trong Mã VS ( cmd+P trên máy Mac ) và gõ

ext install glenn2223.live-sass

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hiện tại tôi đang học trình tạo trang tĩnh Hugo nên tôi đã có một môi trường máy chủ trực tiếp. Phiên bản mới của Glenn cho biết nó đi kèm với tính năng tải lại trình duyệt trực tiếp. Điều này có gây ra xung đột không? . scss bằng quy tắc @use. va no đa hoạt động. Kể từ đó, tôi đã thêm nhiều phần và kiểu và nó vẫn hoạt động

Điểm mấu chốt. Trình biên dịch SASS trực tiếp của Ritwick Dey không còn nữa
đang được duy trì. Sử dụng tiện ích mở rộng của Glenn Marks, người
duy trì một nhánh của bản gốc với sự hỗ trợ của Ritwick Dey. Xem cập nhật trong phần bình luận

Tôi cảm thấy hài lòng khi biết mình có thể sử dụng các tính năng mới nhất của Sass và mong được tiếp tục với dự án của mình vào ngày mai

Thân ái, Glenn. Cảm ơn bạn

---

Điều khoản khác

SublimeText vẫn là một trình soạn thảo mã tuyệt vời. Hiện tại, tôi đang sử dụng nó làm trình soạn thảo văn bản của mình. Cảm giác như nó mở dễ dàng hơn nhiều so với những cái khác

Tôi vẫn cần kiểm tra tiền tố của nhà cung cấp, nhưng tôi không quá lo lắng vì hầu hết công việc khách hàng của tôi không cần CSS tiên tiến

Tuy nhiên, bây giờ là thời điểm tốt để bắt kịp với CSS mà tôi đã bỏ qua. Ví dụ: hiện tại tôi đang sử dụng biến CSS thay vì biến SCSS

Bạn đã bao giờ tự hỏi SASS là viết tắt của từ gì chưa?

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ết

Bài viết này giả định rằng bạn có

• Hiểu biết cơ bản về HTML & CSS
• Trình chỉnh sửa mã (khuyên dùng Mã VS). Nếu chưa cài đặt thì download tại đây
• Và một trình duyệt (khuyên dùng Chrome hoặc Firefox)

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à

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

6

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    text-decoration: none

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à

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

7

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

Tuyên bố miễn trừ trách nhiệm nhanh. Bài viết này sử dụng cú pháp SCSS vì nó được sử dụng rộng rãi hơn

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

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

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?

• dễ học. Nếu bạn đã quen thuộc với CSS, thì bạn sẽ rất vui khi biết rằng Sass thực sự có cú pháp tương tự, vì vậy bạn có thể bắt đầu sử dụng nó, ngay cả sau hướng dẫn này;)
• khả năng tương thích. Nó tương thích với tất cả các phiên bản CSS. Vì vậy, bạn có thể sử dụng bất kỳ thư viện CSS có sẵn nào
• Tiết kiệm thời gian. Nó giúp giảm sự lặp lại của CSS, vì các tính năng mạnh mẽ của nó
• mã tái sử dụng. Sass cho phép các biến và đoạn mã (mixin) có thể được sử dụng lại nhiều lần. Điều này giúp bạn tiết kiệm thời gian và giúp bạn có thể viết mã nhanh hơn
• Mã tổ chức. Sass giúp sắp xếp mã của bạn bằng cách sử dụng partials
• Khả năng tương thích trình duyệt chéo. Sass được biên dịch thành CSS và thêm tất cả các tiền tố nhà cung cấp cần thiết, do đó bạn không phải lo lắng về việc viết chúng ra theo cách thủ công

Các tính năng của Sass

Dướ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 Sass

Bạ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 biến bằng ký hiệu đô la

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

9 và sau đó tham chiếu biến đó ở nơi khác trong mã của bạn

________số 8_______

Làm tổ trong Sass

Hầ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,

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

Với Sass, đoạn mã trên có thể được viết như thế này

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

Bộ chọn gốc

Trong mã Sass ở trên, bạn có thể nhận thấy ký hiệu dấu và

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

0 được sử dụng với lớp giả di chuột. Đây được gọi là Bộ chọn gốc

Bộ chọn gốc,

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

0, là một bộ chọn đặc biệt do Sass phát minh ra, được sử dụng trong các bộ chọn lồng nhau để chỉ bộ chọn bên ngoài. Nguồn - Tài liệu Sass

Vì vậy, trong trường hợp mã ở trên,

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

0 sẽ đề cập đến cha mẹ là thẻ neo

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

3

Bạn có thể xem bài viết của tôi về cách triển khai Sass bằng phương pháp BEM

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

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

4 và thêm nó vào một tệp Sass khác bằng cách sử dụng chỉ thị

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

5

Ví dụ: nếu chúng tôi có

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

6,

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

7 và

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

8, chúng tôi có thể nhập chúng vào tệp SCSS chính

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

9

@import "globals";
@import "variables";
@import "buttons";

Bạn sẽ nhận thấy rằng dấu gạch dưới và

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

7 không được thêm vào. Đó là bởi vì Sass tự động giả định rằng bạn đang đề cập đến tệp

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

6 hoặc

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

7

Mixin trong Sass

Mộ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 gói gọn 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

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

3

Một ví dụ về thời điểm bạn sử dụng mixin là khi sử dụng Flexbox

@mixin flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  background: #ccc;
}

.card {
  @include flex-container;
}

.aside {
  @include flex-container;
}

Hàm và toán tử Sass

Sass 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ư

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

4,

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

5,

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

6,

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

7,

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

8 và

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

9, mà chúng ta có thể sử dụng với hàm

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

0

Dưới đây là một ví dụ sử dụng chức năng chuyển đổi pixel sang rem

@function pxToRem($pxValue) {
  $remValue: ($pxValue / 16) + rem;
  @return $remValue;
}

div {
  width: pxToRem(480);
}

Tuy nhiên, điều quan trọng cần lưu ý là toán tử

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

8 cho phép chia không được dùng nữa và sẽ bị xóa trong Dart Sass 2. 0. 0. Bạn có thể đọc về nó trong Tài liệu

Vì vậy, đây là cách nó nên được viết

@use "sass:math";

@function pxToRem($pxValue) {
  @return math.div($pxValue, 16px) * 1rem;
}

div {
  width: pxToRem(480px); // gives 30rem
}

Đây là một ví dụ về logic có điều kiện trong mixin

@mixin body-theme($theme) {
  @if $theme == "light" {
    background-color: $light-bg;
  } @else {
    background-color: $dark-bg;
  }
}

Sass cũng cung cấp các hàm

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

2 và

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

3 để điều chỉnh màu theo một tỷ lệ phần trăm nhất định

Ví dụ

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

0

Cách thiết lập Sass để phát triển địa phương

Tuyệt vời. 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 Sass

Có nhiều cách khác nhau để biên dịch các tệp Sass

• Tiện ích mở rộng mã VS
• Cài đặt bằng NPM trên toàn cầu
• Cài đặt bằng các ứng dụng mã nguồn mở như Compass. ứng dụng, Tải lại trực tiếp và Koala
• Cài đặt bằng Homebrew (dành cho MacOS)

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ã VS

Bướ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ã VS

Trong 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 —

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

7 (hoặc

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

6) – thành tệp

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

6

Bước 2. Đặt vị trí lưu

Bây giờ hãy thay đổi đường dẫn tệp để Sass được biên dịch vào thư mục

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

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

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

8

Trong Mã VS, đi tới Tệp> Tùy chọn> Cài đặt. Bây giờ hãy tìm kiếm

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

9 để thay đổi cài đặt chung

Nhấp vào

@import "globals";
@import "variables";
@import "buttons";

0

Bây giờ, trên một vài dòng đầu tiên, nơi bạn thấy mã này

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

1

Thay đổi

@import "globals";
@import "variables";
@import "buttons";

1 thành

@import "globals";
@import "variables";
@import "buttons";

2, vì vậy bây giờ nó trông như thế này

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

2

Bước 3. Biên dịch Sass

Bâ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.

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

6 và một

@import "globals";
@import "variables";
@import "buttons";

4 trong thư mục

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

7

Tuy 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 CSS

Sau đó, liên kết tệp CSS trong

@import "globals";
@import "variables";
@import "buttons";

6 của bạn. Trong trường hợp của chúng ta

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

3

Bâ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

• Chúng tôi có một đánh dấu cơ bản trong tệp

  @import "globals";
  @import "variables";
  @import "buttons";
  

  6 chứa tiêu đề và phần nhà/anh hùng
  • Nó chứa một liên kết đến tệp CSS mà tiện ích mở rộng đã biên dịch cho chúng tôi
  • Và một số JavaScript để chuyển đổi menu đáp ứng

• $primary-color: #24a0ed;
  
  .text {
    color: $primary-color;
  }
  button {
    color: $primary-color;
    border: 2px solid $primary-color;
  }
  

  9 được biên dịch và tệp CSS kết quả

  @import "globals";
  @import "variables";
  @import "buttons";
  

  9 là nội dung được nhập trong

  @import "globals";
  @import "variables";
  @import "buttons";
  

  6

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      display: inline-block;
    }
  
    a {
      display: block;
      text-decoration: none;
    }
  }
  

  4

• Tệp Scss chính

  $primary-color: #24a0ed;
  
  .text {
    color: $primary-color;
  }
  button {
    color: $primary-color;
    border: 2px solid $primary-color;
  }
  

  9 nhập tất cả các phần.

  @mixin flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background: #ccc;
  }
  
  .card {
    @include flex-container;
  }
  
  .aside {
    @include flex-container;
  }
  

  2,

  @mixin flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background: #ccc;
  }
  
  .card {
    @include flex-container;
  }
  
  .aside {
    @include flex-container;
  }
  

  3,

  @mixin flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background: #ccc;
  }
  
  .card {
    @include flex-container;
  }
  
  .aside {
    @include flex-container;
  }
  

  4,

  @mixin flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background: #ccc;
  }
  
  .card {
    @include flex-container;
  }
  
  .aside {
    @include flex-container;
  }
  

  5

  @mixin flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background: #ccc;
  }
  
  .card {
    @include flex-container;
  }
  
  .aside {
    @include flex-container;
  }
  

  6,

  $primary-color: #24a0ed;
  
  .text {
    color: $primary-color;
  }
  button {
    color: $primary-color;
    border: 2px solid $primary-color;
  }
  

  7

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      display: inline-block;
    }
  
    a {
      display: block;
      text-decoration: none;
    }
  }
  

  5

• Phần cơ sở chứa các mixin của

  @mixin flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background: #ccc;
  }
  
  .card {
    @include flex-container;
  }
  
  .aside {
    @include flex-container;
  }
  

  8 và

  @mixin flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background: #ccc;
  }
  
  .card {
    @include flex-container;
  }
  
  .aside {
    @include flex-container;
  }
  

  9 được bao gồm ở những nơi chúng tôi cần chúng

Phần kết luận

chú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

---

Ixraen Mitolu

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 để sử dụng SCSS trong vscode?

Tôi có thể sử dụng SCSS thay vì CSS không?

Làm cách nào để chuyển đổi SCSS sang CSS trong Visual Studio Code?

SCSS có khó hơn CSS không?