Scss nhập bên trong lớp

Để nhập tệp CSS tương đối vào Tailwind, bắt buộc phải có


1. Cài đặt nhập postcss

yarn add postcss-import

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình


2. thêm postcss. cấu hình. tập tin

postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình


3. Thêm postcss để xây dựng. kịch bản css

trong gói. json thêm --postcss


{
  "scripts": {
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Mới

{
  "scripts": {
    "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình


4. Tạo một lớp nút

Thêm một thành phần nút trong ứng dụng. Gió cùng chiều. css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply text-white bg-blue-500 rounded-lg hover:bg-blue-700;
  }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy xem nó, chúng tôi nhận được một nút màu xanh

  type="button" class="btn-blue">Save

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình


5. Hoán đổi chỉ thị tailwind để nhập

/* old */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* new */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình


6. Trích xuất lớp nút vào tệp riêng

trong ứng dụng. Gió cùng chiều. css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./components/buttons.css";
@import "tailwindcss/utilities";

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trong. /thành phần/nút. css

________số 8_______

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Một vài lưu ý từ tài liệu Tailwind

  • Không trộn css tùy chỉnh và nhập trong cùng một tệp
  • Bọc css tùy chỉnh trong các thành phần @layer để tránh các vấn đề về tính đặc hiệu

Quy tắc CSS tại @import được sử dụng để nhập quy tắc kiểu từ các biểu định kiểu hợp lệ khác. Quy tắc @import phải được xác định ở đầu biểu định kiểu, trước bất kỳ quy tắc nào khác (ngoại trừ @charset và @layer) và khai báo kiểu, nếu không nó sẽ bị bỏ qua

@import url;
@import url list-of-media-queries;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) list-of-media-queries;

ở đâu

url

Là một hàm , một hàm

@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

0 hoặc một hàm
@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

1 đại diện cho vị trí của tài nguyên cần nhập. URL có thể là tuyệt đối hoặc tương đối

danh sách truy vấn phương tiện truyền thông

Là một danh sách các truy vấn phương tiện được phân tách bằng dấu phẩy, danh sách này chỉ định các điều kiện phụ thuộc vào phương tiện để áp dụng các quy tắc CSS được xác định trong URL được liên kết. Nếu trình duyệt không hỗ trợ bất kỳ truy vấn nào trong số này, nó sẽ không tải tài nguyên được liên kết

tên lớp

Là tên của tầng xếp tầng mà nội dung của tài nguyên được liên kết được nhập vào

Các quy tắc đã nhập phải xuất hiện trước tất cả các loại quy tắc khác, ngoại trừ các quy tắc

@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

2 và lớp tạo câu lệnh
@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

3. Quy tắc @import không phải là một. Vì vậy, nó không thể được sử dụng bên trong

Để tác nhân người dùng có thể tránh truy xuất tài nguyên cho các loại phương tiện không được hỗ trợ, tác giả có thể chỉ định các điều kiện nhập phụ thuộc vào phương tiện. Các lần nhập có điều kiện này chỉ định các truy vấn phương tiện được phân tách bằng dấu phẩy sau URL. Trong trường hợp không có bất kỳ truy vấn phương tiện nào, việc nhập là vô điều kiện. Chỉ định

@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

5 cho
@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

6 cũng có tác dụng tương tự

Quy tắc @import cũng có thể được sử dụng để tạo lớp xếp tầng bằng cách nhập quy tắc từ tài nguyên được liên kết. Các quy tắc cũng có thể được nhập vào một tầng tầng hiện có. Từ khóa

@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

8 hoặc hàm
@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

9 được sử dụng với @import cho mục đích này. Các khai báo trong quy tắc kiểu từ biểu định kiểu đã nhập tương tác với tầng như thể chúng được viết theo nghĩa đen vào biểu định kiểu tại thời điểm nhập

@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

@import "custom.css";
@import url("chrome://communicator/skin/");

Hai ví dụ trên cho thấy cách chỉ định url dưới dạng hàm và hàm

@import = 
@import [ | ] [ layer | layer( ) ]? ;

=
url( * ) |
src( * )

=
[ '.' ]*

=
[ supports( [ | ] ) ]? ?

=
not |
[ and ]* |
[ or ]*

=
( ) |
|


=


=
[ ? ) ] |
[ ( ? ) ]

=
( )

1

@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);

Các quy tắc @import trong các ví dụ trên cho thấy các điều kiện phụ thuộc vào phương tiện cần phải đúng trước khi áp dụng các quy tắc CSS được liên kết. Vì vậy, chẳng hạn, quy tắc @import cuối cùng sẽ chỉ tải biểu định kiểu

@import "custom.css";
@import url("chrome://communicator/skin/");
5 trên một thiết bị màn hình theo hướng ngang

@import "theme.css" layer(utilities);

Trong ví dụ trên, một lớp xếp tầng có tên là

@import "custom.css";
@import url("chrome://communicator/skin/");
6 được tạo và lớp này sẽ bao gồm các quy tắc từ biểu định kiểu đã nhập
@import "custom.css";
@import url("chrome://communicator/skin/");
7

@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

Trong ví dụ trên, các quy tắc trong biểu định kiểu

@import "custom.css";
@import url("chrome://communicator/skin/");
8 và
@import "custom.css";
@import url("chrome://communicator/skin/");
9 xếp tầng trong cùng một lớp với quy tắc
@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
0

@import "theme.css" layer();
@import "style.css" layer;

Đây là một ví dụ về việc tạo hai lớp xếp tầng ẩn danh riêng biệt và nhập các quy tắc được liên kết vào từng lớp một cách riêng biệt. Tầng tầng được khai báo không có tên là tầng tầng ẩn danh. Các lớp xếp tầng ẩn danh được hoàn thiện khi tạo. chúng không cung cấp bất kỳ phương tiện nào để sắp xếp lại hoặc thêm các kiểu và chúng không thể được tham chiếu từ bên ngoài

Bạn có thể nhập trong SCSS không?

Quá trình nhập tệp CSS thông thường vào tệp SCSS. Bạn có thể tạo bất kỳ số lượng tệp CSS và SCSS nào và bạn có thể sử dụng chúng bằng cách sử dụng từ khóa 'nhập' . Ví dụ: tạo một tệp CSS và nhập tệp đó vào tệp SCSS, sau đó bạn có thể sử dụng thuộc tính đó trong dự án của mình.

Sự khác biệt giữa @USE và @import trong SCSS là gì?

Về cơ bản, cả hai quy tắc đều làm giống nhau - tải thành viên bên trong mô-đun khác. Sự khác biệt chính là cách họ đối xử với các thành viên . @import làm cho mọi thứ có thể truy cập được trên toàn cầu trong tệp đích.

Làm cách nào để nhập một lớp trong CSS?

Quy tắc tại @import CSS được sử dụng để nhập quy tắc kiểu từ các biểu định kiểu hợp lệ khác . Quy tắc @import phải được xác định ở đầu biểu định kiểu, trước bất kỳ quy tắc nào khác (ngoại trừ @charset và @layer) và khai báo kiểu, nếu không nó sẽ bị bỏ qua.

Làm cách nào để nhập tệp SCSS vào tệp SCSS khác trong Angular?

Để bắt đầu mọi thứ. .
Tạo một thư mục trong thư mục dự án src của bạn được gọi là phong cách
Di chuyển phong cách của bạn. scss vào thư mục kiểu mới tạo
Cập nhật góc cạnh của bạn. json để trỏ đến vị trí mới của các kiểu của bạn. tập tin scss