Tôi nên sử dụng css hay scss gì?

Vẫn còn một số trường hợp cạnh mà các bộ tiền xử lý CSS như Sass hoặc Less có ích, chẳng hạn nếu bạn muốn thực sự xác định các hàm màu phức tạp. Nhưng hầu hết thời gian, các thư viện này được sử dụng cho hai mục đích sau và chúng không nên

Tôi sẽ sử dụng cú pháp SCSS cho các ví dụ bên dưới, nhưng các khái niệm cơ bản mà tôi đang nói đến là giống nhau trong mọi bộ tiền xử lý

Biến

SCSS cho phép bạn xác định các biến chứa các giá trị để sử dụng trên tất cả các ứng dụng web của bạn

$primary-color: #333;

button {
  color: $primary-color;
}

Điều này khá hữu ích nếu bạn có, giả sử, một thiết kế công ty với một bộ màu phải được sử dụng trong tất cả các thành phần giao diện người dùng

Nhưng trong một thời gian rất dài, CSS hỗ trợ cú pháp riêng của nó cho các biến. Ví dụ tiếp theo có tác dụng tương tự như ví dụ trên, nhưng không có bất kỳ bộ tiền xử lý nào

body {
  --primary-color: #333;
}button {
  color: --var(--primary-color);
}

Như bạn có thể thấy, không có nhiều điều để suy nghĩ lại ở đó. Nếu bạn quyết định loại bỏ SCSS, bạn thậm chí có thể thay đổi toàn bộ CSS của mình bằng một RegEx tìm kiếm và thay thế toàn văn phức tạp hoặc một lệnh

body {
  --primary-color: #333;
}button {
  color: --var(--primary-color);
}

6 trên thiết bị đầu cuối

Có gì khác biệt?

Trước hết, ít phụ thuộc hơn. Mặc dù các gói như Sass sẽ không được đưa vào gói cuối cùng của bạn, nhưng nó vẫn mang lại sự bình yên bên trong khi có một danh sách phụ thuộc ngắn hơn trong dự án của bạn, phải không?

Thứ hai, nếu bạn chia dự án của mình thành nhiều thành phần nhỏ, có thể tái sử dụng (điều mà bạn chắc chắn nên làm), thì rất có thể bạn cũng chia các biến SCSS của mình thành một tệp bổ sung. Điều này buộc bạn phải viết một câu lệnh

body {
  --primary-color: #333;
}button {
  color: --var(--primary-color);
}

7 trong mọi tệp mà bạn muốn sử dụng các biến đó. Các biến CSS không cần điều đó

Ngoài ra, như bạn có thể thấy trong ví dụ, chúng tôi đã xác định biến trên phần tử

body {
  --primary-color: #333;
}button {
  color: --var(--primary-color);
}

8. Vì vậy, các biến CSS có thể nằm trong phạm vi một phần nhất định trong ứng dụng của bạn. Điều này không có nhiều ý nghĩa đối với ví dụ thiết kế công ty của tôi ở trên, nhưng tôi chắc chắn rằng bạn sẽ tìm thấy cách sử dụng cho điều đó

Bây giờ đến phần thứ hai, phần quan trọng hơn trong lời cầu xin của tôi

làm tổ

Nếu bạn làm việc nhiều với các bộ tiền xử lý CSS, có lẽ bạn đã từng gặp một số dấu ngoặc nhọn như thế này

div#navigation {  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      
      i {
        margin-right: 5px;
      }
    }
  }
}

Vì đây không phải là cú pháp CSS hợp lệ và chúng ta đang nói về tiền xử lý, nên công cụ Sass sẽ tạo CSS sau từ cú pháp đó

div#navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}div#navigation ul li i {
  margin-right: 5px;
}

Khối mã thứ hai khó đọc đối với các nhà phát triển giao diện người dùng, đó là lý do tại sao chúng tôi có xu hướng lồng các bộ chọn CSS vào nhau để có mã sạch hơn. Bằng cách này, các nhà phát triển có thể điều chỉnh kiến ​​thức của họ về cấu trúc HTML của trang web và biết nơi tìm kiếm CSS có liên quan, vì mọi thứ thuộc về điều hướng đều nằm trong khối

body {
  --primary-color: #333;
}button {
  color: --var(--primary-color);
}

9

Nhưng hãy tập trung vào một trong những bộ chọn này tại đây.

div#navigation {  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      
      i {
        margin-right: 5px;
      }
    }
  }
}

0.
Đối với nhà phát triển, điều này có vẻ khá đơn giản. Chúng tôi đang tìm kiếm phần tử chính

body {
  --primary-color: #333;
}button {
  color: --var(--primary-color);
}

0, sau đó là danh sách bên trong nó và muốn tạo kiểu cho các thẻ i (có thể được sử dụng cho các biểu tượng) nằm trong các mục danh sách của nó. Đây là cách đọc tự nhiên.

Ngoài ra, chúng tôi có thể cung cấp cho các phần tử

body {
  --primary-color: #333;
}button {
  color: --var(--primary-color);
}

1 đó một thuộc tính

body {
  --primary-color: #333;
}button {
  color: --var(--primary-color);
}

2 và nhắm mục tiêu trực tiếp đến chúng

.navigation-icon {
  margin-right: 5px;
}

Có gì khác biệt?

Hiệu suất. Vấn đề là như thế này. Trình duyệt đọc bộ chọn từ phải sang trái.
Trình duyệt diễn giải bộ chọn CSS ở trên sẽ.

1. Tìm kiếm tất cả các yếu tố

   body {
     --primary-color: #333;
   }button {
     color: --var(--primary-color);
   }

   1 trên trang (có thể là vài trăm),
2. lọc chúng xuống thành phần tử

   body {
     --primary-color: #333;
   }button {
     color: --var(--primary-color);
   }

   1 trong phần tử

   body {
     --primary-color: #333;
   }button {
     color: --var(--primary-color);
   }

   5 (vẫn còn rất nhiều),
3. lọc những phần tử này xuống thành phần tử

   body {
     --primary-color: #333;
   }button {
     color: --var(--primary-color);
   }

   5 trong phần tử

   body {
     --primary-color: #333;
   }button {
     color: --var(--primary-color);
   }

   7,
4. lọc các phần tử này xuống thành phần tử

   body {
     --primary-color: #333;
   }button {
     color: --var(--primary-color);
   }

   7 trong phần tử

   body {
     --primary-color: #333;
   }button {
     color: --var(--primary-color);
   }

   9 có id

   body {
     --primary-color: #333;
   }button {
     color: --var(--primary-color);
   }

   0

Đây là một vấn đề hiệu suất. Bạn sẽ không cảm thấy bất kỳ sự khác biệt nào với ví dụ trên, nhưng hãy tưởng tượng các bộ chọn như thế này trên tất cả ứng dụng của bạn. Nhắm mục tiêu các yếu tố trực tiếp có thể tạo sự khác biệt

Sự kết luận

Rất nhiều nhà phát triển giao diện người dùng có xu hướng sử dụng công cụ tiền xử lý CSS trước tiên khi bắt đầu một dự án. Hầu hết thời gian, chúng ta không thực sự cần đến chúng, hoặc tệ hơn, chúng có thể dẫn đến các kiểu làm chậm chúng ta hoặc trình duyệt

Dùng SCSS hay CSS thì tốt hơn?

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

CSS hay SCSS hay SASS cái nào tốt hơn?

Ưu điểm của SCSS so với CSS là gì?