Làm cách nào để nhập CSS vào SCSS?

Chào bạn. Nếu bạn đang đọc bài viết này, chắc hẳn bạn đang muốn hiểu Sass là gì và nó hoạt động như thế nào

Sass là một bộ tiền xử lý CSS giúp bạn quản lý các tác vụ trong các dự án lớn nơi các biểu định kiểu ngày càng lớn, bạn có một số dòng mã CSS và việc duy trì mã CSS của bạn trở nên khó khăn

Đây là lúc Sass trở nên hữu ích, vì nó có các tính năng chưa có trong CSS như lồng, tạo hàm với mixin, kế thừa, v.v. Các tính năng này sẽ giúp bạn viết mã CSS có thể bảo trì

Sass cho phép bạn sử dụng lại mã của mình, chia mã thành các tệp và nó cũng giúp bạn tạo các hàm, biến, lồng bộ chọn CSS và các phím tắt khác

Cách thức hoạt động của Sass

Tuy nhiên, trình duyệt web không hiểu mã Sass – nó chỉ hiểu mã CSS. Điều này có nghĩa là bạn phải chuyển đổi mã Sass thành mã CSS

Để làm điều này, trình biên dịch sẽ tạo một tệp có mã CSS. Sự biến đổi này được gọi là biên dịch. Khi bạn viết mã Sass trong một. scss, nó được biên dịch thành một tệp CSS thông thường mà trình duyệt sẽ sử dụng để hiển thị nó trên trang web

Tại sao nên sử dụng Sass?

Có nhiều lợi thế khi sử dụng Sass, vì vậy bây giờ chúng ta hãy xem xét một số lợi thế

Đầu tiên, Sass rất dễ hiểu nếu bạn biết CSS. Vì nó là một bộ tiền xử lý CSS nên cú pháp của nó cũng tương tự

Ngoài ra, nếu bạn sử dụng Sass, mã CSS của bạn sẽ tương thích với mọi phiên bản trình duyệt

Sass cũng cho phép sử dụng lại mã của bạn bằng cách tạo các biến và hàm với mixin (cắt các đoạn mã) 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à cho phép bạn viết mã nhanh hơn

Nói về tiết kiệm thời gian, Sass giảm bớt việc viết mã CSS lặp đi lặp lại. Điều này là nhờ các tính năng của nó như hàm, biến, kế thừa, v.v.

Cuối cùng, 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 để bạn không phải lo lắng về việc viết chúng theo cách thủ công

Cách cài đặt và cấu hình Sass

Trong bài viết này, tôi sẽ chỉ cho bạn hai cách để cài đặt Sass

Cách cài đặt Sass với nút. js

Đầu tiên, chúng tôi sẽ tải xuống và cài đặt Node. Sau đó, chúng tôi sẽ sử dụng trình quản lý gói JavaScript npm để cài đặt Sass và định cấu hình nó trong dự án của bạn

Chúng tôi sẽ thực hiện cài đặt toàn cầu, vì điều này sẽ giúp bạn không phải cài đặt nó mỗi khi bạn định làm việc trong các dự án của mình với Sass

Sau đây là các bước thực hiện để cài đặt và thiết lập Sass trong một dự án

Đầu tiên, mở terminal của bạn và gõ

npm install -g scss

Một lần nữa, đây là cài đặt toàn cầu. Nếu bạn làm điều này, bạn sẽ tránh được việc cài đặt nó mỗi khi bạn định làm việc với Sass trong các dự án của mình

Sau đó, trong thư mục dự án, hãy tạo một tệp Sass trong tệp bạn sẽ làm việc

style.css

style.css

2 là tên tệp và

style.css

3 là tên mở rộng Sass

Sau đó, bạn sẽ sử dụng lệnh sau để tạo kiểu. css từ tệp SASS

sass --watch style.scss style.css

style.css

4 là tệp nguồn và

style.css

5 là tệp đích nơi Sass tạo mã CSS

Bây giờ quá trình cài đặt và cấu hình đã hoàn tất. Bạn có thể sử dụng Sass trong các dự án của mình

Nhưng trước khi chúng ta tìm hiểu cách sử dụng Sass, tôi muốn chỉ cho bạn cách thứ hai để làm điều đó. Tôi khuyên dùng cách này, vì đây là cách đơn giản và dễ dàng nhất để cài đặt và cấu hình Sass

Cách cài đặt Sass bằng mã VS

Trước tiên, hãy tải xuống và cài đặt trình soạn thảo VS Code của Microsoft nếu bạn chưa có. Sau đó khởi chạy trình chỉnh sửa để bạn có thể tải xuống tiện ích mở rộng Live Sass Compiler

Và đó là tất cả những gì bạn phải làm. Sau khi cài đặt xong, bạn sẽ có thể sử dụng Sass trong các dự án của mình. Dễ dàng, phải không?

Cách sử dụng Sass trong một dự án

Để hiểu cách sử dụng Sass, chúng tôi sẽ làm việc trên một dự án ví dụ nơi chúng tôi sẽ tạo hai lưới. Ý tưởng ở đây không phải là tìm hiểu mọi thứ về Sass mà những gì bạn thấy chủ yếu là những gì bạn cần biết để bắt đầu sử dụng Sass

Dưới đây là tổng quan về những gì chúng tôi sẽ tạo để hiểu Sass

Chắc bạn đang thắc mắc tại sao tôi lại lấy ví dụ về grid?

Trước hết, bạn nên biết rằng chúng tôi sẽ thực hiện tất cả mã hóa trong tệp Sass (kiểu. scss) và không theo phong cách. tập tin css. Chính Sass sẽ tạo một tệp CSS cho chúng tôi với cùng một mã

Để bắt đầu, hãy tạo một thư mục có hai thư mục bên trong, CSS và hình ảnh. Sau đó, bên trong thư mục CSS, hãy tạo một tệp có phần mở rộng Sass - trong trường hợp của tôi, đó là kiểu. scss

Sau đó mở lên sẽ dò ra file ngay. Bên dưới trình chỉnh sửa, một nút sẽ xuất hiện có tên Watch Sass. Chỉ cần nhấp vào nó để yêu cầu Sass xem tệp này và bắt đầu tạo mã (biên dịch) trong tệp CSS

Sau khi SASS biên dịch xong, nó sẽ tạo ba tệp trong thư mục CSS của dự án. Phong cách. css, phong cách. scss và phong cách. css. bản đồ. Nó theo dõi tất cả các thay đổi và sẵn sàng tạo mã CSS

Nếu bạn quay lại sớm để tiếp tục làm việc, tất cả những gì bạn phải làm là mở tệp có phần mở rộng. scss. Sau đó nhấp vào Watch Sass for Sass để bắt đầu tạo các sửa đổi trong tệp CSS (nếu không sẽ không có gì được tạo trong tệp CSS)

Tôi hy vọng nó sẽ ổn cho đến nay. Bạn vừa xem cách cài đặt, định cấu hình và bắt đầu sử dụng Sass trong dự án của mình. Vì vậy, bây giờ hãy tiếp tục với ví dụ về lưới để hiểu các chức năng khác nhau mà Sass mang lại

Cách sử dụng biến trong Sass

Trước khi xem cách tạo biến Sass, hãy tạo một chỉ mục. sao chép tệp html và dán mã bên dưới vào tệp

      
            
            
            
            
      
      
            
            

                  
                  

                        
Lorem
                        
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum porro dolores sapiente.
                  
            

            

                  
                  

                        
Lorem
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque amet obcaecati nihil.
                  
            

      

Chạy tệp trong trình duyệt của bạn để xem kết quả

Sass cho phép bạn tạo các biến, nhưng tôi muốn cho bạn thấy sự khác biệt giữa Sass và CSS

________số 8

Nếu bạn nhìn vào ví dụ này, đó là CSS. Nhưng nếu trong dự án tôi muốn sử dụng lại bất kỳ màu, phần đệm hoặc phông chữ nào, tôi phải viết lại mã tương tự (bằng CSS)

Nhưng với Sass, tôi có thể tạo các biến để có thể sử dụng lại các tính năng này. Để tạo một biến trong Sass, chúng tôi sử dụng ký hiệu đô la $ theo sau là tên biến và dấu hai chấm cho giá trị. Hãy nhớ rằng tốt nhất là tạo một tên phản ánh đối tượng bạn sẽ sử dụng

/* Creating and Using Variables */
    
$fonts: 'Poppins', Helvertica, sans-serif;
$primary-color: #ab99ca;
$spacing: 2rem;
   
body {
    font-family: $fonts;
    background-color: $primary-color;
    padding: $spacing;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Thêm đoạn mã trên theo phong cách. tập tin scss. Vì chúng tôi đang làm việc với tệp Sass và HTML không nhận ra Sass, để xem kết quả, chúng tôi sẽ chỉ định tệp CSS đã được tạo trong chỉ mục tệp của chúng tôi. html

Cách liên kết tệp CSS

Điều thực sự quan trọng là liên kết tệp CSS với chỉ mục. html, để cho phép tệp CSS áp dụng các kiểu CSS cho HTML. Nếu không, sẽ không có kiểu dáng nào được áp dụng và bạn sẽ chỉ thấy mã do HTML tạo ra

Vì vậy, chúng tôi sẽ liên kết tệp CSS của bạn trong chỉ mục. tệp html. Trong trường hợp của tôi

style.css

0

Chạy tệp trong trình duyệt của bạn để xem kết quả.

Bây giờ chúng ta sẽ xem cách sắp xếp mã nhờ IMPORTS. Mã sẽ được cắt thành các tệp trong khi chúng tôi tiếp tục sử dụng ví dụ của mình

Khi tạo tệp, tên tệp sẽ được theo sau bởi dấu gạch dưới (_) ở đầu để tránh bị Sass biên dịch

Tạo ba tệp

• style.css
  

  6. để thêm các biến

• style.css
  

  7. để thêm các chức năng mà chúng tôi sẽ sử dụng lại

• style.css
  

  8. để thêm các kiểu thẻ của chúng tôi

Sao chép và dán các biến bạn đã tạo trong kiểu. scss và đặt chúng vào tệp

style.css

6

style.css

5

Đối với tệp

style.css

7, đây là nơi chúng tôi sẽ tạo các hàm có thể sử dụng lại bằng mixin

Mixins cho phép bạn tạo các chức năng có thể tái sử dụng. Để khai báo một hàm, bạn phải nhập

sass --watch style.scss style.css

1 hoặc nếu hàm của bạn có tham số, bạn phải nhập

sass --watch style.scss style.css

2

Để sử dụng mixin, bạn phải nhập nó bằng cách gõ

sass --watch style.scss style.css

3 giúp tiết kiệm thời gian trong một dự án lớn

Thêm mã này vào tệp

style.css

7

style.css

1

Đối với tệp

style.css

8, hãy thêm mã này vào tệp

style.css

3

Trong đoạn mã trên, chúng tôi đang sử dụng lồng nhau và bí danh. Việc lồng ghép giúp chúng tôi đơn giản hóa cách chúng tôi viết các kiểu CSS của mình và cho phép chúng tôi lồng các bộ chọn CSS

Đối với bí danh, bạn có thể sử dụng (&) hoặc (và) theo sau là tên lớp sẽ tiếp tục mã của bộ chọn gốc

Để sử dụng bí danh, bạn phải nhập bí danh đó bằng cách nhập bí danh theo sau là tên của biến (&_dark)

Nếu bạn cố chạy chỉ mục. html, sẽ không có gì thay đổi. Nó không thay đổi vì chúng tôi đã tạo các tệp không liên quan đến chỉ mục. html và phong cách của chúng tôi. sass chỉ tạo mã mà nó có

Để khắc phục điều này, chúng tôi sẽ nhập tất cả các tệp chúng tôi đã tạo vào kiểu. sass để khi SASS thực hiện giám sát, nó sẽ tạo mã của các tệp đó

style.css

0

cho phong cách. scss, thêm đoạn mã trên. phong cách. tệp scss phải như thế này

style.css

1

Trong đoạn mã trước, tôi đã nhập các tệp (nhập SASS) vào kiểu. css để có thể theo dõi và tạo mã khi có thay đổi

Chạy chỉ mục. html trong trình duyệt của bạn để xem kết quả

Nếu bạn nhận được kết quả giống như trong ảnh chụp ở trên, xin chúc mừng, giờ bạn đã hiểu cách thức hoạt động của Sass

Đây là liên kết xem trước cho dự án chúng tôi đã xây dựng. https. //adalbertpungu. github. io/card_with_sass/

Và đây là liên kết kho lưu trữ GitHub

GitHub - AdalbertPungu/card_with_sass. thẻ với sass

thẻ với sass. Đóng góp cho sự phát triển của AdalbertPungu/card_with_sass bằng cách tạo một tài khoản trên GitHub

AdalbertPunguGitHub

Phần kết luận

Trong bài viết này, bạn đã học cách Sass hoạt động bằng cách xây dựng một lưới ảnh đơn giản. Trong dự án nhỏ này, chúng tôi đã đề cập đến nhiều tính năng cốt lõi của Sass, nhưng không phải tất cả chúng. Vì vậy, tôi hy vọng bạn sẽ bắt đầu sử dụng nó trong các dự án của mình để tìm hiểu thêm

Bạn có thể kiểm tra tài liệu nếu muốn tìm hiểu sâu hơn. https. // sass-lang. com/tài liệu

Đó là tất cả cho bài viết này. Cảm ơn bạn đã đọc. Tôi nghĩ bạn đã sẵn sàng thử sử dụng Sass

Mã hóa vui vẻ

Theo dõi tôi trên Twitter. Twitter. com/AdalbertPungu

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

QUẢNG CÁO

---

Adalbert Pungu

nhà phát triển web. Nhà phát triển JavaScript

---

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 để chuyển đổi tệp CSS thành SCSS?

Tôi có thể viết CSS trong tệp SCSS không?

Tôi có thể kết hợp CSS và SCSS không?