Cách sử dụng SCSS trong PHP

1. Hãy chắc chắn rằng bạn có nút. js trên máy tính của bạn

2. Đảm bảo CSS , Sass , Less, and File Watchers required plugins are enabled on the Settings/Preferences | Plugins plugin, tab Đã cài đặt , xem phần Quản lý plugin để biết chi tiết.

• Trong Terminal được nhúng [Alt+F12] , hãy nhập.

  npm install -g sass

  Tìm hiểu thêm từ trang web chính thức của Sass

• Trong Terminal được nhúng [Alt+F12] , hãy nhập.

  npm install --global less

  Tìm hiểu thêm từ trang web Ít chính thức

Tạo Trình theo dõi tệp

1. Trong hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], nhấp vào Trình theo dõi tệp< . Trang Trình theo dõi tệp mở ra hiển thị danh sách Trình theo dõi tệp đã được định cấu hình. under Tools. The File Watchers page that opens shows the list of already configured File Watchers.

2. Nhấp vào

   hoặc nhấn Alt+Insert. Tùy thuộc vào công cụ bạn sẽ sử dụng, hãy chọn Ít hơn , Sass, or SCSS predefined template from the list.

3. Trong trường Chương trình , chỉ định đường dẫn đến kho lưu trữ của trình biên dịch tùy thuộc vào mẫu được xác định trước đã chọn.

   • lessc cho Ít hơn.

   • sass cho Sass/SCSS.

   Nếu bạn tuân theo quy trình cài đặt tiêu chuẩn với npm, PhpStorm sẽ tự định vị các tệp được yêu cầu và tự động điền vào trường. Nếu không, hãy nhập đường dẫn theo cách thủ công hoặc nhấp vào

   và chọn vị trí tệp trong hộp thoại mở ra.

4. Tiến hành như được mô tả trong File Watchers

1. Tạo Trình theo dõi tệp thuộc loại SCSS . mở hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], đi tới Công cụ. Trình theo dõi tệp , nhấp vào trên thanh công cụ và chọn SCSS từ danh sách.

2. Trong hộp thoại Trình theo dõi tệp mới mở ra, tất cả các trường bắt buộc đều đã được điền vào.

   Trên thực tế, các cài đặt này đủ để chạy trình biên dịch thành công

3. Hãy thay đổi lưới. scss , ví dụ, thay thế margin-left: 0; ở dòng 31 bằng margin-left: 12px;. Điều này kích hoạt Trình theo dõi tệp của chúng tôi và các quy trình của trình biên dịch Trang. scss . Kết quả là hai tệp được tạo và hiển thị lồng nhau bên dưới Trang. scss .

   • Trang. css với mã CSS được biên dịch

   • Trang. css. bản đồ với bản đồ nguồn cho phép bạn xem qua ứng dụng của mình trong phiên gỡ lỗi.

Thay đổi hành động kích hoạt File Watcher

Trình xem tệp đánh thức và khởi chạy trình chuyển mã ngay khi dự án của bạn được lưu theo cách thủ công [ Tệp. Lưu tất cả hoặc Ctrl+S] hoặc tự động.

Nói chung, mã của bạn được lưu tự động khi bạn di chuyển tiêu điểm từ PhpStorm [khi hủy kích hoạt khung]. Với Trình theo dõi tệp, tính năng tự động lưu cũng được thực hiện khi bạn chỉnh sửa tệp từ phạm vi của Trình theo dõi tệp. Do đó, bộ chuyển đổi có thể chạy liên tục khi bạn nhập, điều này có thể gây ra các vấn đề về hiệu suất. Để giải quyết vấn đề, hãy tắt tự động lưu các tệp đã chỉnh sửa

Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Công cụ. Trình theo dõi tệp . . Chọn File Watcher được yêu cầu [ SCSS trong ví dụ của chúng tôi] và nhấp vào

Theo mặc định, Trình theo dõi tệp sẽ thức dậy ngay cả khi một tệp trong phạm vi của nó được chỉnh sửa từ bên ngoài PhpStorm. Để ghi đè hành vi này và chỉ chuyển mã tệp khi chỉnh sửa nội bộ, hãy bỏ chọn hộp kiểm Kích hoạt trình theo dõi khi thay đổi bên ngoài .

Thay đổi phạm vi

Theo mặc định, PhpStorm theo dõi các thay đổi trong tất cả các tệp bằng . scss trong toàn bộ dự án. Điều này làm việc cho ví dụ của chúng tôi. Tuy nhiên, bạn có thể thay đổi phạm vi để xử lý, ví dụ: chỉ những thay đổi chưa được cam kết. Trong một dự án lớn, điều này sẽ tiết kiệm thời gian.

Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Công cụ. Trình theo dõi tệp . , chọn File Watcher được yêu cầu [ SCSS trong ví dụ của chúng tôi] và nhấp vào trên thanh công cụ. Trong hộp thoại Chỉnh sửa trình theo dõi tệp , hãy chọn phạm vi áp dụng từ danh sách. Tìm hiểu thêm từ Phạm vi và màu tệp.

Vị trí đầu ra tùy chỉnh

Theo mặc định, được tạo. css và . css. các tệp bản đồ được lưu trữ trong thư mục chứa tệp gốc và được hiển thị dưới dạng tệp con trong cửa sổ công cụ Dự án . Bạn có thể thay đổi hành vi mặc định này để lưu trữ tất cả đã tạo. css và . css. map trong một thư mục riêng.

Hãy bắt đầu với một trường hợp đơn giản. Giả sử bạn có custom_output. scss trong thư mục gốc của dự án.

Hãy chỉnh sửa custom_output. scss , ví dụ, thay thế fill-opacity: abs[50]; ở dòng 6 bằng fill-opacity: abs[60];. Với cấu hình File Watcher mặc định, các tệp được tạo custom_output. css và custom_output. css. map sẽ được lưu trữ trong thư mục gốc của dự án và được hiển thị dưới dạng con của custom_output. scss .

Sẽ thuận tiện nếu lưu trữ tất cả đầu ra trong một thư mục riêng, ví dụ: css . Hãy tạo một SCSS_custom_output Trình theo dõi tệp tùy chỉnh với thư mục css làm đầu ra .

Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Công cụ. Trình theo dõi tệp . , sau đó tạo Trình theo dõi tệp SCSS như được mô tả ở trên.

Cập nhật cài đặt mặc định như sau

• Trong trường Đối số , hãy nhập.

  $FileName$. $ProjectFileDir$/css/$FileNameWithoutExtension$. css

• Trong trường Đường dẫn đầu ra để làm mới , hãy nhập.

  $ProjectFileDir$/css/$FileNameWithoutExtension$. css. $ProjectFileDir$/css/$FileNameWithoutExtension$. css. bản đồ

Lưu Trình theo dõi tệp mới và đảm bảo rằng nó đã được bật

Bây giờ, nếu bạn chỉnh sửa custom_output. scss , ví dụ, thay thế fill-opacity: abs[50]; ở dòng 6 bằng fill-opacity: abs[60];, PhpStorm tạo một thư mục css và lưu trữ < . css custom_output.css và custom_output. css. map các tệp trong đó.

Vị trí đầu ra tùy chỉnh. giữ nguyên cấu trúc thư mục gốc

Bây giờ chúng ta hãy xem xét một ví dụ trong đó . ví dụ: tệp scss được lưu trữ trong cấu trúc thư mục.

Với Trình theo dõi tệp mặc định, các tệp được tạo sẽ được lưu trữ bên cạnh gốc. scss tệp. Nếu chúng tôi sử dụng Trình theo dõi tệp tùy chỉnh như được mô tả ở trên, tất cả các tệp được tạo sẽ được lưu trữ trong cùng một thư mục css .

Để PhpStorm bảo toàn cấu trúc thư mục, hãy tạo một Trình theo dõi tệp tùy chỉnh khác

Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Công cụ. Trình theo dõi tệp . , sau đó tạo Trình theo dõi tệp SCSS như được mô tả ở trên.

Cập nhật cài đặt mặc định như sau

• Trong trường Đối số , hãy nhập.

  $FileName$. $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$. css

• Trong trường Đường dẫn đầu ra để làm mới , hãy nhập.

  $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$. css. $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$. css. bản đồ

Lưu Trình theo dõi tệp mới và đảm bảo rằng nó đã được bật

Bây giờ, nếu bạn chỉnh sửa custom_output_body. scss , custom_output_header. scss hoặc custom_output_footer. scss , PhpStorm tạo một thư mục css với cấu trúc của các thư mục con giữ nguyên cấu trúc của styles_structured.

1. Tạo Trình theo dõi tệp thuộc loại Ít hơn . mở hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], đi tới Công cụ. Trình theo dõi tệp , nhấp vào trên thanh công cụ và chọn Ít hơn từ danh sách.

   Hoặc, nhấp vào Có trong Bật Trình theo dõi tệp để biên dịch LESS thành CSS? pane at the top of the editor tab with a .less tệp.

2. Trong hộp thoại Trình theo dõi tệp mới mở ra, tất cả các trường bắt buộc đều đã được điền vào.

   Trên thực tế, các cài đặt này đủ để chạy trình biên dịch thành công

3. Hãy thay đổi phong cách của tôi. less , ví dụ: thay đổi giá trị của @color ở dòng 1. Điều này kích hoạt Trình theo dõi tệp của chúng tôi. Kết quả là, hai tệp được tạo và hiển thị lồng nhau trong my-styles. bớt .

   • kiểu của tôi. css với mã CSS được biên dịch

   • kiểu của tôi. css. bản đồ với bản đồ nguồn cho phép bạn xem qua ứng dụng của mình trong phiên gỡ lỗi.

Thay đổi hành động kích hoạt File Watcher

Trình xem tệp đánh thức và khởi chạy trình chuyển mã ngay khi dự án của bạn được lưu theo cách thủ công [ Tệp. Lưu tất cả hoặc Ctrl+S] hoặc tự động.

Nói chung, mã của bạn được lưu tự động khi bạn di chuyển tiêu điểm từ PhpStorm [khi hủy kích hoạt khung]. Với Trình theo dõi tệp, tính năng tự động lưu cũng được thực hiện khi bạn chỉnh sửa tệp từ phạm vi của Trình theo dõi tệp. Do đó, bộ chuyển đổi có thể chạy liên tục khi bạn nhập, điều này có thể gây ra các vấn đề về hiệu suất. Để giải quyết vấn đề, hãy tắt tự động lưu các tệp đã chỉnh sửa

Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Công cụ. Trình theo dõi tệp . . Chọn Trình xem tệp được yêu cầu [ Ít hơn trong ví dụ của chúng tôi] và nhấp vào trên thanh công cụ. Trong hộp thoại Chỉnh sửa trình theo dõi tệp , hãy mở rộng khu vực Tùy chọn nâng cao và xóa . Auto-save edited files to trigger the watcher checkbox.

Thay đổi phạm vi

Theo mặc định, PhpStorm theo dõi các thay đổi trong tất cả các tệp bằng . scss trong toàn bộ dự án. Điều này làm việc cho ví dụ của chúng tôi. Tuy nhiên, bạn có thể thay đổi phạm vi để xử lý, ví dụ: chỉ những thay đổi chưa được cam kết. Trong một dự án lớn, điều này sẽ tiết kiệm thời gian.

Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Công cụ. Trình theo dõi tệp . , chọn Trình xem tệp được yêu cầu [ Ít hơn trong ví dụ của chúng tôi] và nhấp vào trên thanh công cụ. Trong hộp thoại Chỉnh sửa trình theo dõi tệp , hãy chọn phạm vi áp dụng từ danh sách. Tìm hiểu thêm từ Phạm vi và màu tệp.

Vị trí đầu ra tùy chỉnh

Theo mặc định, được tạo. css và . css. các tệp bản đồ được lưu trữ trong thư mục chứa tệp gốc và được hiển thị dưới dạng tệp con trong cửa sổ công cụ Dự án . Bạn có thể thay đổi hành vi mặc định này để lưu trữ tất cả đã tạo. css và . css. map trong một thư mục riêng.

Hãy bắt đầu với một trường hợp đơn giản. Giả sử bạn có custom_output. less trong thư mục gốc của dự án.

Hãy chỉnh sửa custom_output. less , ví dụ: thay đổi giá trị của @color ở dòng 1. Với cấu hình File Watcher mặc định, các tệp được tạo custom_output. css và custom_output. css. map sẽ được lưu trữ trong thư mục gốc của dự án và được hiển thị dưới dạng con của custom_output. bớt .

Sẽ thuận tiện nếu lưu trữ tất cả đầu ra trong một thư mục riêng, ví dụ: css . Hãy tạo một Less_custom_output File Watcher tùy chỉnh với thư mục css làm đầu ra .

Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Công cụ. Trình theo dõi tệp . , sau đó tạo Trình theo dõi tệp ít hơn như được mô tả ở trên.

Cập nhật cài đặt mặc định như sau

• Trong trường Đối số , hãy nhập.

  $FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$. css --source-map

• Trong trường Đường dẫn đầu ra để làm mới , hãy nhập.

  $ProjectFileDir$/css/$FileNameWithoutExtension$. css $ProjectFileDir$/css/$FileNameWithoutExtension$. css. bản đồ

Lưu Trình theo dõi tệp mới và đảm bảo rằng nó đã được bật

Bây giờ, nếu bạn chỉnh sửa custom_output. less , ví dụ: thay đổi giá trị của @color ở dòng 1, PhpStorm tạo thư mục css và lưu trữ thư mục đã tạo . css custom_output.css và custom_output. css. map các tệp trong đó.

Vị trí đầu ra tùy chỉnh. giữ nguyên cấu trúc thư mục gốc

Bây giờ chúng ta hãy xem xét một ví dụ trong đó . less tệp được lưu trữ trong cấu trúc thư mục, chẳng hạn.

Với Trình theo dõi tệp mặc định, các tệp được tạo sẽ được lưu trữ bên cạnh gốc. bớt tệp. Nếu chúng tôi sử dụng Trình theo dõi tệp tùy chỉnh như được mô tả ở trên, tất cả các tệp được tạo sẽ được lưu trữ trong cùng một thư mục css .

Để PhpStorm bảo toàn cấu trúc thư mục, hãy tạo một Trình theo dõi tệp tùy chỉnh khác

Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Công cụ. Trình theo dõi tệp . , sau đó tạo Trình theo dõi tệp ít hơn như được mô tả ở trên.

Cập nhật cài đặt mặc định như sau

• Trong trường Đối số , hãy nhập.

  $FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$. css --source-map

• Trong trường Đường dẫn đầu ra để làm mới , hãy nhập.

  $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$. css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$. css. bản đồ

Lưu Trình theo dõi tệp mới và đảm bảo rằng nó đã được bật

Bây giờ, nếu bạn chỉnh sửa custom_output_body. ít hơn , custom_output_header. ít hơn hoặc custom_output_footer. less , PhpStorm tạo thư mục css với cấu trúc của thư mục con giữ nguyên cấu trúc của styles_structured.

1. Trong hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], đi tới Trình chỉnh sửa. Bảng màu. Ít hơn/Sass/SCSS .

2. Chọn bảng phối màu, chấp nhận cài đặt đánh dấu kế thừa từ cài đặt mặc định hoặc tùy chỉnh chúng như được mô tả trong Màu sắc và phông chữ

   Làm cách nào để gọi tệp SCSS trong PHP?

   php hoặc sử dụng trình tải tự động do trình soạn thảo tạo của bạn, sau đó gọi lớp \ScssPhp\ScssPhp\Compiler. request_once "scssphp/scss. tập đoàn. php"; sử dụng ScssPhp\ScssPhp\Compiler; $compiler = new Compiler[]; echo $compiler->compileString[' $color. #abc; . làm sáng[$color, 20%];

   Tôi có thể sử dụng Sass với PHP không?

   Vấn đề khi sử dụng Sass là nó không tích hợp tốt với các dự án dựa trên PHP . Sass được viết bằng Ruby, vì vậy mọi người trong nhóm phải cài đặt Ruby trên máy phát triển của họ và sau đó cài đặt Sass gem. Đó không phải là một rắc rối lớn, nhưng nó nằm ngoài quy trình làm việc của dự án.

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

   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.

   SCSS và Sass có giống nhau không?

   SASS [Syntactally Awesome Style Sheets] là ngôn ngữ kịch bản tiền xử lý sẽ được biên dịch hoặc diễn giải thành CSS. Bản thân SassScript là một ngôn ngữ kịch bản trong khi SCSS là cú pháp chính cho SASS được xây dựng dựa trên cú pháp CSS hiện có .