Thiết lập SCSS trong html

Cài đặt SASS

Có hai cách để sử dụng sass, ứng dụng hoặc Dòng lệnh. Tôi thích sử dụng dòng lệnh hơn vì có cài đặt tối thiểu

Để cài đặt sass, trước tiên hãy cài đặt nút js. Các phiên bản trước của sass đã sử dụng ruby. Đây là hướng dẫn từng bước để cài đặt sass bằng nodejs

Cài đặt sass bằng nodejs

cài đặt npm -g sass

Kiểm tra sass đã được cài đặt chưa?

1. 43. 5 được biên dịch với dart2js 2. 14. 4

sass --version

Khi sass được cài đặt thành công, chúng ta có thể sử dụng npm. Nhưng trước đó, hãy học sass trước

biến sass

biến sass được sử dụng để lưu trữ giá trị css trong biến. Nó giống như javascript, chúng ta khai báo một biến ở trên cùng và sử dụng sau

Đầu tiên tạo một kiểu tệp sass. scss hoặc phong cách. sass trong thư mục css. Bây giờ hãy mở tệp sass/scss của bạn trong trình chỉnh sửa mã và nhập. Sự khác biệt duy nhất giữa tệp sass và scss là sass không cần dấu chấm phẩy (;) và các khối khai báo, i. e {}

Biến trong scss

    $bgcolor:#eee;
    $fontcolor:#333;
    $fontsize:14px;
    $fontfamily:'helvetica neue', helvetica, sans-serif;
    

Biến trong sass

    $bgcolor:#eee
    $fontcolor:#333
    $fontsize:14px
    $fontfamily:'helvetica neue', helvetica, sans-serif    
    

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

Để sử dụng các biến trên trong sass/scss, hãy sử dụng đoạn mã sau sau khi khai báo biến. Khai báo biến nên được thực hiện ở trên cùng và sau đó chúng ta có thể gọi

    /*in scss*/
$bgcolor:#eee;
$fontcolor:#333;
$fontsize:14px;
$fontfamily:'helvetica neue', helvetica, sans-serif;    

.panel{ 
    background:$bgcolor; 
    color:$fontcolor; 
    font:$fontsize $fontfamily;
}
    

làm tổ

Sass Nesting có thể viết các bộ chọn css ở dạng lồng nhau. Chúng ta cũng có thể sử dụng bộ chọn hậu duệ/con và bộ chọn giả trong lồng. Xem ví dụ

    /*in scss*/
$bg:#333;
$color:#fff;
$ib:inline-block; 
   
.nav{ 
    background:$bg; 
    ul{
       list-style:none;
       padding:0;
        li{
           display:$ib;
            a{
                display:$ib;
                color:#fff;
            }
        }
    }
}
    

    /*in css after compilation*/
    
.nav{
    background:#333; 
}
.nav ul{
    list-style:none;
    padding:0; 
}
.nav ul li{
    display:inline-block;
}    
.nav ul li a{
    display:inline-block;
    color:#fff;
}    

    

Nhập khẩu SASS

Với sass, chúng ta có thể chia tệp sass hoặc scss lớn thành các tệp nhỏ và sau đó coi từng tệp đơn lẻ là mô-đun và nhập tất cả các tệp sass hoặc scss vào một

Để bao gồm tệp sass/scss, hãy sử dụng @use hoặc @import (trong các phiên bản trước) và sau đó đặt tên tệp (không có phần mở rộng). Xem ví dụ

    /*reset.scss*/

*{ margin:0; box-sizing:border-box;}
ul{ list-style:none; padding:0}   
a{ text-decoration:none} 
img{ vertical-align:bottom}
iframe{ border:none}    

________số 8

    /*style.css after compilation*/
    
*{ margin:0; box-sizing:border-box;}
ul{ list-style:none; padding:0}   
a{ text-decoration:none} 
img{ vertical-align:bottom}
iframe{ border:none}
.container{ width:1200px; margin:auto}    

hỗn hợp

Sass mixins được sử dụng tốt nhất để viết một thuộc tính css3 và sass sẽ viết cùng một mã với tất cả các tiền tố của nhà cung cấp. Đối với tất cả các thuộc tính như vậy, chúng ta phải tạo một lệnh @mixin và sau đó sử dụng lại các mixin bằng cách sử dụng @include. Xem ví dụ

    $bgcolor:#eee
    $fontcolor:#333
    $fontsize:14px
    $fontfamily:'helvetica neue', helvetica, sans-serif    
    

    $bgcolor:#eee
    $fontcolor:#333
    $fontsize:14px
    $fontfamily:'helvetica neue', helvetica, sans-serif    
    

Mở rộng/Kế thừa

quy tắc mở rộng được sử dụng để sử dụng lại nhiều lần một tập hợp các thuộc tính css. %properties được sử dụng để tạo quy tắc và sử dụng, sử dụng @extend. Xem ví dụ

    $bgcolor:#eee
    $fontcolor:#333
    $fontsize:14px
    $fontfamily:'helvetica neue', helvetica, sans-serif    
    

    $bgcolor:#eee
    $fontcolor:#333
    $fontsize:14px
    $fontfamily:'helvetica neue', helvetica, sans-serif    
    

nhà điều hành

Toán tử toán học như +, -, *, / và % có thể được sử dụng trong sass để tính giá trị của các thuộc tính, như tỷ lệ phần trăm. Xem ví dụ

    $bgcolor:#eee
    $fontcolor:#333
    $fontsize:14px
    $fontfamily:'helvetica neue', helvetica, sans-serif    
    

    $bgcolor:#eee
    $fontcolor:#333
    $fontsize:14px
    $fontfamily:'helvetica neue', helvetica, sans-serif    
    

Biên dịch SASS sang CSS

Sau khi hoàn thành tệp SASS hoặc SCSS, chúng tôi phải biên dịch sass thành css. Đây là bước cuối cùng. Chỉ cần nhớ, trình duyệt chỉ hiểu tệp css, không sass hoặc scss

Để biên dịch sass thành css, hãy mở terminal hoặc cmd và làm theo các bước sau

Biên dịch sass bằng terminal hoặc dấu nhắc lệnh

1. Mở terminal trong mac/linux hoặc gõ cmd trong run (Windows OS)
2. Thay đổi thư mục thành thư mục css của dự án bằng lệnh cd, exp cd desktop/sass/css
3. Loại kiểu sass. phong cách scss. css hoặc kiểu sass. phong cách hỗn xược. css .
4. Liên kết tệp css đã biên dịch với html
5. Chạy trang html trong trình duyệt web

Biên dịch sass bằng Mã VS

1. Mở thiết bị đầu cuối trong Mã VS
2. Chọn dấu nhắc lệnh trong Mã VS cho hệ điều hành windows. (mặc định là powershell)
3. gõ

   
       $bgcolor:#eee
       $fontcolor:#333
       $fontsize:14px
       $fontfamily:'helvetica neue', helvetica, sans-serif    
       

   7 để thay đổi thư mục
4. gõ

   
       $bgcolor:#eee
       $fontcolor:#333
       $fontsize:14px
       $fontfamily:'helvetica neue', helvetica, sans-serif    
       

   8 để biên dịch
5. Liên kết biên dịch tệp css sang trang html

Ví dụ biên dịch SASS

Giả sử tên dự án của tôi là techaltum, được lưu trữ trong máy tính để bàn. Tệp css nằm trong thư mục techaltum. Chúng ta phải thay đổi thư mục thành css của techaltum trong máy tính để bàn để chạy trình biên dịch sass

Làm cách nào để thiết lập SCSS trong HTML?

Làm thế nào để viết mã SCSS?

Làm cách nào để liên kết SCSS với HTML trong VSCode?