Cách viết SCSS trong HTML

Question

Ví dụ trong mỗi chương

Công cụ "Hiển thị Sass" của chúng tôi giúp học Sass dễ dàng, nó hiển thị cả mã và kết quả

Nội dung chính Show

Ví dụ trong mỗi chương
Ví dụ Sass
Việc học của tôi
Tham chiếu hàm Sass
Tại sao nên sử dụng SCSS?
Cài đặt nhanh
Thiết lập HTML / SCSS (Bưu kiện)
Thiết lập React (tạo-ứng dụng phản ứng)
Thiết lập thư mục SCSS
Hỗn hợp truy vấn phương tiện
Danh sách biến
Kiểu cơ sở
Phong cách hoạt hình
Thành phần bổ sung
Tôi có thể sử dụng SCSS trực tiếp trong HTML không?
Làm cách nào để cài đặt SCSS trong HTML?
Làm thế nào để viết mã SCSS?
Làm cách nào để biên dịch SCSS thành CSS?

Ví dụ Sass

/* Xác định các biến và giá trị tiêu chuẩn cho trang web */
$bgcolor. lightblue;
$textcolor. darkblue;
$fontsize. 18px;

/* Sử dụng các biến */
body {
background-color. $bgcolor;
màu. $textcolor;
cỡ chữ. $fontsize;
}

Chạy ví dụ »

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning

Tham chiếu hàm Sass

Tại W3Schools, bạn sẽ tìm thấy các tài liệu tham khảo đầy đủ về tất cả các hàm Sass với cú pháp và ví dụ

SCSS là bộ xử lý trước cho CSS cho phép bạn sử dụng các tính năng bổ sung trong biểu định kiểu CSS của mình. Nó tự động biên dịch của bạn. tập tin scss vào. css để trình duyệt đọc

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

SCSS cho phép sử dụng các biến, bộ chọn lồng nhau, nhập, trộn và các tính năng khác chưa có trong CSS. Mặc dù cần thực hành một chút để thành thạo, nhưng bạn có thể viết CSS trực tiếp trong các tệp SCSS của mình

Cài đặt nhanh

Có thể tự biên dịch SCSS, tuy nhiên hầu hết các gói ứng dụng web đều dễ dàng sử dụng các thư viện của bên thứ ba để thực hiện việc này cho bạn. Trong hướng dẫn này, chúng ta sẽ thiết lập SCSS với dự án Vanilla JS Parcel cũng như ứng dụng React bằng cách sử dụng Create-React-App

Thiết lập HTML / SCSS (Bưu kiện)

Parcel là một gói ứng dụng web tương tự như Webpack, nhưng có ít cấu hình hơn (không). Bạn có thể làm theo hướng dẫn này để thiết lập và lưu trữ các ứng dụng Bưu kiện đơn giản hoặc chỉ cần làm theo bên dưới

mkdir parcel-project
npm init -y
npm install --save-dev sass

Ở đây chúng tôi đang tạo một dự án mới trong thư mục

touch index.html
touch styles.scss

7 và khởi tạo một ứng dụng nút mới. Tiếp theo, chúng tôi đã cài đặt mô-đun javascript

touch index.html
touch styles.scss

8 sẽ biên dịch biểu định kiểu

touch index.html
touch styles.scss

9 cho chúng tôi

Ghi chú. Sass là tên và gói ban đầu cho SCSS phổ biến hơn

touch index.html
touch styles.scss

Tiếp theo, chúng tôi sẽ tạo các tệp cho html và css của chúng tôi. Trong

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Setuptitle>
    <link rel="stylesheet" href="./styles.scss" />
  head>
  <body>
    <div class="container">
      <h1>Title goes hereh1>
      <p class="container__text">and text herep>
    div>
  body>
html>

0 thêm vào như sau

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Setuptitle>
    <link rel="stylesheet" href="./styles.scss" />
  head>
  <body>
    <div class="container">
      <h1>Title goes hereh1>
      <p class="container__text">and text herep>
    div>
  body>
html>

Parcel quản lý tất cả nội dung của chúng tôi và biên dịch scss cho chúng tôi, vì vậy tất cả những gì chúng tôi cần làm là nhập

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Setuptitle>
    <link rel="stylesheet" href="./styles.scss" />
  head>
  <body>
    <div class="container">
      <h1>Title goes hereh1>
      <p class="container__text">and text herep>
    div>
  body>
html>

1 như một biểu định kiểu thông thường

Trong

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Setuptitle>
    <link rel="stylesheet" href="./styles.scss" />
  head>
  <body>
    <div class="container">
      <h1>Title goes hereh1>
      <p class="container__text">and text herep>
    div>
  body>
html>

2 thêm vào như sau

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

Tệp

touch index.html
touch styles.scss

9 này đang sử dụng các bộ chọn lồng nhau để đơn giản hóa các kiểu css. Biểu tượng

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Setuptitle>
    <link rel="stylesheet" href="./styles.scss" />
  head>
  <body>
    <div class="container">
      <h1>Title goes hereh1>
      <p class="container__text">and text herep>
    div>
  body>
html>

4 đề cập đến tên của bộ chọn hiện tại, vì vậy mã này sẽ biên dịch CSS sau

touch index.html
touch styles.scss

2

Bạn có thể tự kiểm tra nó trong trình duyệt bằng lệnh terminal sau

touch index.html
touch styles.scss

3

Thiết lập React (tạo-ứng dụng phản ứng)

Scss có thể được sử dụng trong dự án tạo-phản ứng-ứng dụng bằng cách đơn giản

cài đặt phụ thuộc nhà phát triển

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Setuptitle>
    <link rel="stylesheet" href="./styles.scss" />
  head>
  <body>
    <div class="container">
      <h1>Title goes hereh1>
      <p class="container__text">and text herep>
    div>
  body>
html>

5

1. nhập tệp
```
touch index.html
touch styles.scss
```
  9 vào các thành phần của bạn

Để thiết lập dự án SCSS React mới, hãy nhập các lệnh sau (riêng)

touch index.html
touch styles.scss

6

create-react-app sẽ xây dựng ứng dụng React với biểu định kiểu

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Setuptitle>
    <link rel="stylesheet" href="./styles.scss" />
  head>
  <body>
    <div class="container">
      <h1>Title goes hereh1>
      <p class="container__text">and text herep>
    div>
  body>
html>

7 mà chúng ta có thể chỉ cần thay đổi thành

touch index.html
touch styles.scss

9

Đảm bảo cũng thay đổi câu lệnh

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Setuptitle>
    <link rel="stylesheet" href="./styles.scss" />
  head>
  <body>
    <div class="container">
      <h1>Title goes hereh1>
      <p class="container__text">and text herep>
    div>
  body>
html>

9 trong tệp

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

0

touch index.html
touch styles.scss

1

Vì chúng tôi luôn có thể viết css bên trong các tệp scss của mình, hãy khởi động ứng dụng để bắt đầu sử dụng SCSS

touch index.html
touch styles.scss

2

Bạn có thể kiểm tra ứng dụng bằng cách thêm SCSS sau vào

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

1

touch index.html
touch styles.scss

4

Ở đây chúng tôi đang sử dụng các biến

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

2 bằng cách khai báo chúng sau dấu

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

3. Các biến có thể được đặt một lần và được sử dụng trong nhiều bộ chọn (và tệp) để cho phép thay đổi quy mô lớn nhanh chóng

Hướng dẫn tạo ứng dụng phản ứng này có nhiều chi tiết hơn về cách thức hoạt động của công cụ

Thiết lập thư mục SCSS

SCSS cũng cho phép nhập các tệp

touch index.html
touch styles.scss

9 ở các định dạng khác. tập tin scss. Điều này cho phép chúng tôi tạo một tệp

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

5 nhập tất cả các cá nhân của chúng tôi. tập tin scss. Chúng tôi sẽ tạo một số tệp

touch index.html
touch styles.scss

9 khác nhau để xử lý các chức năng hoặc tính năng nhất định trên trang của chúng tôi. Thiết lập này cho phép chúng tôi mở rộng quy mô ứng dụng của mình trong khi vẫn làm cho biểu định kiểu của chúng tôi có thể đọc và truy cập được. Thêm các thư mục và tệp sau vào ứng dụng của bạn ngay bây giờ

touch index.html
touch styles.scss

0

Trong thiết lập thư mục SCSS sau đây, chúng tôi sẽ sử dụng

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

5 làm biểu định kiểu chính và nhập nó vào ứng dụng React của chúng tôi (trong cả hai ứng dụng. js hoặc chỉ mục. js). Thêm các mục nhập sau vào

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

5 ngay bây giờ

touch index.html
touch styles.scss

1

Khi bạn tạo các tính năng hoặc thành phần mới, hãy thêm các mục nhập bổ sung ở cuối trang này. Mỗi tệp được nhập theo thứ tự, vì vậy chúng tôi sẽ đảm bảo nhập

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

9 và

touch index.html
touch styles.scss

20 trước

Hỗn hợp truy vấn phương tiện

Chúng tôi có thể đơn giản hóa các truy vấn phương tiện của mình thành các thiết bị cụ thể làm ví dụ mixin. Thêm phần sau vào

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

9

touch index.html
touch styles.scss

2

Giờ đây, chúng tôi có quyền truy cập vào các truy vấn phương tiện trên điện thoại, tab-port, tab-land và big-desktop nếu chúng tôi muốn phát triển cụ thể cho bên ngoài 1040px-1500px (trong trường hợp này). Vui lòng thay đổi các giá trị này cho bất kỳ điểm ngắt nào có ý nghĩa nhất đối với bạn. Cũng có thể thêm các điểm dừng bổ sung bằng cách sử dụng cùng một mẫu

Để sử dụng các mixin điểm dừng này, bên trong bất kỳ bộ chọn CSS nào, hãy thêm phần sau

touch index.html
touch styles.scss

3

Cú pháp này,

touch index.html
touch styles.scss

22 có thể được sử dụng với các mixin trên. Thêm tham chiếu này vào các truy vấn phương tiện mà chúng tôi thiết lập trong

touch index.html
touch styles.scss

23

Danh sách biến

Biểu định kiểu

touch index.html
touch styles.scss

20 sẽ bao gồm tất cả các biến của chúng tôi về màu sắc, phông chữ và kích cỡ. Ví dụ: bao gồm đoạn mã sau trong tệp

touch index.html
touch styles.scss

20 của bạn

touch index.html
touch styles.scss

4

Mỗi biến bạn đưa vào đây sẽ có sẵn trong các biểu định kiểu được tải sau nó (mọi thứ trừ

.container {
  & h1 {
    color: green;
  }
  &__text {
    color: blue;
  }
}

9). Bằng cách bao gồm các biến này trước tiên, chúng tôi có thể thiết lập một vị trí duy nhất để lưu trữ các giá trị màu sắc, kích thước và phông chữ. Điều này cho phép chúng tôi điều chỉnh giao diện trang web của mình một cách nhanh chóng và hoàn toàn bằng cách thay đổi các biến được tham chiếu trên toàn trang

Kiểu cơ sở

Gọi tệp này theo ý thích của bạn, ở đây chúng tôi sẽ bao gồm các kiểu chung mà chúng tôi muốn đưa vào trang của mình. Thêm phần sau vào

touch index.html
touch styles.scss

27

touch index.html
touch styles.scss

5

Phong cách hoạt hình

Cuối cùng, trong tệp

touch index.html
touch styles.scss

28, chúng tôi có thể bao gồm bất kỳ hoạt ảnh khung hình chính nào mà chúng tôi muốn sử dụng

touch index.html
touch styles.scss

6

Thành phần bổ sung

Trong ví dụ này, chúng tôi cũng thiết lập các tệp

touch index.html
touch styles.scss

29 và

touch index.html
touch styles.scss

30. Sử dụng các tệp này (và cú pháp) để thêm biểu định kiểu dành riêng cho tính năng khi bạn tạo chúng. Bằng cách tách biệt càng nhiều chức năng cốt lõi càng tốt, SCSS quản lý để đơn giản hóa việc thiết lập và duy trì các kiểu

Tôi có thể sử dụng SCSS trực tiếp trong HTML không?

Bạn không thể "đính kèm" tệp SASS/SCSS vào tài liệu HTML . SASS/SCSS là bộ tiền xử lý CSS chạy trên máy chủ và biên dịch thành mã CSS mà trình duyệt của bạn hiểu được.

Làm cách nào để cài đặt SCSS trong HTML?

TL; . .

npm cài đặt nút-sass gật đầu --save-dev

tại gói. json "tập lệnh" thêm "css". "nút-sass --include-path đường dẫn scss/đến/tệp. đường dẫn scss/đến/đầu ra. css" và "xem". "gật đầu -e scss -x 'npm run css'"

Bây giờ thiết lập của bạn đã được thực hiện, hãy tận hưởng. CSS uglify sẽ được giới thiệu trong phần thưởng của bài viết này

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

SASS có thể được viết bằng hai cú pháp. .

Cú pháp thụt lề hoặc SASS. Nó sử dụng thụt đầu dòng thay vì dấu ngoặc và dòng mới. Các tệp sử dụng phần mở rộng SASS

hỗn xược CSS hoặc SCSS. Nó là superset của CSS3. Các tệp của nó sử dụng phần mở rộng SCSS. Mỗi CSS hợp lệ là SCSS hợp lệ

Làm cách nào để biên dịch SCSS thành CSS?

Sau khi Sass được cài đặt, bạn có thể biên dịch Sass của mình thành CSS bằng cách sử dụng lệnh sass . Bạn sẽ cần cho Sass biết nên xây dựng tệp nào và xuất CSS sang đâu. Ví dụ: chạy sass input. đầu ra scss. css từ thiết bị đầu cuối của bạn sẽ lấy một tệp Sass duy nhất, đầu vào. scss và biên dịch tệp đó thành đầu ra. css.

programming html

Cách viết SCSS trong HTML

Ví dụ trong mỗi chương

Ví dụ Sass

Việc học của tôi

Tham chiếu hàm Sass

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

Cài đặt nhanh

Thiết lập HTML / SCSS (Bưu kiện)

Thiết lập React (tạo-ứng dụng phản ứng)

Thiết lập thư mục SCSS

Hỗn hợp truy vấn phương tiện

Danh sách biến

Kiểu cơ sở

Phong cách hoạt hình

Thành phần bổ sung

Tôi có thể sử dụng SCSS trực tiếp trong HTML không?

Làm cách nào để cài đặt SCSS trong HTML?

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

Làm cách nào để biên dịch SCSS thành CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội