Hướng dẫn how is css compiled to sass? - css được biên dịch thành sass như thế nào?

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

SASS là bộ xử lý tiền xử lý CSS giúp bạn quản lý các nhiệm vụ trong các dự án lớn trong đó các bảng phong cách trở nên lớn hơ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à nơi SASS trở nên hữu ích, vì nó có các tính năng chưa tồn tại trong CSS như làm tổ, tạo ra các chức năng 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ể duy trì.

SASS cho phép bạn sử dụng lại mã của mình, chia nó thành các tệp và nó cũng giúp bạn tạo các chức năng, biến, làm tổ các bộ chọn CSS của bạn 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.

Để thực hiện điều này, trình biên dịch sẽ tạo một tệp có mã CSS. Chuyển đổi này được gọi là tổng hợp. Khi bạn viết mã SASS trong tệp .SCSS, nó được biên dịch thành 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 sử dụng SASS?

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

Đầu tiên, Sass dễ hiểu nếu bạn biết CSS. Vì đó là bộ tiền xử lý CSS của nó là 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 tất cả các phiên bản trình duyệt.

SASS cũng có thể sử dụng lại mã của bạn bằng cách tạo các biến và chức năng 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 mã hóa nhanh hơn.

Nói về thời gian tiết kiệm, SASS giảm sự lặp lại của mã CSS. Điều này là nhờ các tính năng của nó như các chức năng, biến, kế thừa, v.v.

Cuối cùng, SASS được biên soạn cho 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à định 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 Node.js

Đầu tiên, chúng tôi sẽ tải xuống và cài đặt nút. Sau đó, chúng tôi sẽ sử dụng NPM Trình quản lý gói JavaScript để 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, bởi vì điều này sẽ giúp bạn cài đặt nó mỗi khi bạn dự định làm việc trong các dự án của mình với SASS.

Dưới đây là các bước cần theo dõi để cài đặt và thiết lập SASS trong một dự án:

Đầu tiên, hãy mở thiết bị đầu cuối và loại của bạn:

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 tránh cài đặt nó mỗi khi bạn có kế hoạch 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 không có tệp bạn sẽ làm việc:

style.css

style.css

style.css

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

sass --watch style.scss style.css

style.css

style.css

Bây giờ 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 bạn.

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

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

Đầu tiên, tải xuống và cài đặt trình chỉnh sửa mã vs 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 trình biên dịch SASS trực tiếp.

Và đó là tất cả những gì bạn phải làm. Sau khi cài đặt hoàn thành, 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à một cái nhìn tổng quan về những gì chúng ta sẽ tạo ra để hiểu SASS.

Bạn có thể tự hỏi tại sao tôi lấy ví dụ về lưới điện? Chà, vì chúng ta thường sử dụng lưới trong các trang web và chúng đơn giản để hiểu.

Trước hết, bạn nên biết rằng chúng tôi sẽ thực hiện tất cả các mã hóa trong tệp SASS (style.scss) chứ không phải trong tệp style.css. Đó là 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 với hai thư mục bên trong, CSS và hình ảnh. Sau đó, bên trong thư mục CSS tạo một tệp với tiện ích mở rộng SASS - trong trường hợp của tôi là style.scss.CSS and images. Then inside the CSS folder create a file with the Sass extension – in my case it's style.scss.

Sau đó mở nó và tập tin sẽ được phát hiện ngay lập tức. 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ó để nói với SASS để xem tệp này và bắt đầu tạo mã (biên dịch) trong tệp CSS.Watch Sass. Just click on it to tell Sass to watch this file and start generating (compiling) code in the CSS file.

Khi SASS hoàn thành biên dịch, nó sẽ tạo ba tệp trong thư mục CSS của dự án: style.css, style.scss và style.css.map. Nó theo dõi tất cả các thay đổi và nó đã sẵn sàng để tạo mã CSS.style.css, style.scss,and style.css.map. It tracks all the changes and it is ready to generate CSS code.

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 cho 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 thấy cách cài đặt, định cấu hình và bắt đầu sử dụng SASS trong dự án của bạn. Vì vậy, bây giờ chúng ta hãy tiếp tục với ví dụ của chúng tôi về các lưới để hiểu các chức năng khác nhau mà Sass mang lại.

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

Trước khi xem cách tạo các biến SASS, hãy tạo bản sao tệp index.html và dán mã bên dưới trong tệp:index.html file copy and paste the code below in the file:

      
            
            
            
            
      
      
            
            

                  
                  

                        
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.

body {
    font-family: 'Poppins', Helvertica, sans-serif;
    background-color: #ab99ca;
    padding: 2rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

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, đệm hoặc phông chữ nào, tôi phải viết lại cùng một mã (trong CSS).

Nhưng với SASS, tôi có thể tạo các biến để tôi 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 dấu 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 cái tên phản ánh đối tượng bạn sẽ sử dụng.$ followed by the variable name and a colon for the value. Keep in mind that it's best to create a name that reflects the object you're going to use.

/* 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 mã trên trong tệp style.scss. Vì chúng tôi đang làm việc với một 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 tệp tệp của chúng tôi.html.index.html.

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

Điều thực sự quan trọng để liên kết tệp CSS với index.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 được áp dụng và bạn sẽ chỉ thấy mã được tạo bởi HTML.

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

Run the file in your browser to see the result.

Bây giờ chúng ta sẽ xem cách tổ chức mã nhờ nhập khẩu. 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 chúng tôi.

Khi tạo một tệp, tên tệp sẽ được theo sau bởi một dấu gạch dưới (_) lúc đầu để ngăn nó được biên dịch bởi SASS.

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 tệp style.scss và đặt chúng vào tệp

style.css

style.css

    $fonts: 'Poppins', Helvetica, sans-serif;
    $primary-color: #ab99ca;
    $spacing: 2rem;
    $dark-grey: #999;

Đối với tệp

style.css

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

sass --watch style.scss style.css

sass --watch style.scss style.css

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

sass --watch style.scss style.css

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

style.css

@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* $radius is the parameter of the function */

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

Đối với tệp

style.css

.card {
    background-color: white;
    width: 20rem;
    overflow: hidden;
    margin: 2rem;
    box-shadow: 5px 5px 5px 5px #000;
    @include border-radius(0.5rem); /* using the mixins function */
    
    img {
        height: 15rem;
        background-size: cover;
        background-position: center center;
    }

    .card_content {
        padding: $spacing;
    }

    .card_title {
        margin: 0;
        color: black;
    }

    .card_description {
        margin: 0;
        color: $dark-grey;
    }

    &_dark {

        background-color: black;

        .card_title {
            color: white;
        }
    }

}

Trong mã trên, chúng tôi đang sử dụng làm tổ và bí danh. Nesting 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àm tổ CSS.nesting and aliases. Nesting helps us simplify the way we write our CSS styles and allows us to nest CSS selectors.

Đối với các 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 cha mẹ.&) or (and) followed by the class name that will resume the parent selector's code.

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

Nếu bạn cố gắng chạy tệp index.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 index.html và tệp style.sass của chúng tôi chỉ tạo mã nó có.

Để sửa lỗi này, chúng tôi sẽ nhập tất cả các tệp chúng tôi đã tạo vào tệp style.sass để khi SAS thực hiện giám sát, nó sẽ tạo mã của các tệp đó.

style.css

Đối với tệp style.scss, thêm mã trên. Tệp style.scss sẽ như thế này:

style.css

Trong mã trước, tôi đã nhập các tệp (nhập SASS) vào style.css để chúng có thể được theo dõi và tạo mã khi có thay đổi.SASS import) into style.css so that they can be tracked and generate code when there are changes.

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

Nếu bạn nhận được kết quả tương tự như trong việc bắt giữ ở trên, xin chúc mừng, bây giờ bạn hiểu cách SASS hoạt động.

Dưới đâ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.

AdalbertpungugithubGitHub

Sự kết luận

Trong bài viết này, bạn đã học đượ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, 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 bạn để tìm hiểu thêm.

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

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

Mã hóa hạnh phúc.

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