[WordPress] 外掛分享: SCSS Happy Compiler – Compile SCSS to CSS & Automatic Enqueue

首頁外掛目錄 › SCSS Happy Compiler – Compile SCSS to CSS & Automatic Enqueue
⚠ 此外掛已下架 — 不再更新維護,建議勿安裝。
3,000+
安裝啟用
★★★★★
5/5 分(6 則評價)
1238 天前
最後更新
問題解決
WordPress 4.0+ PHP 7.0+ v1.3.10 上架:2021-09-03

內容簡介

自動將您的 SCSS 檔案編譯成 CSS 檔案

在您的伺服器上不需要安裝 SASS,即可自動地將您的 SCSS 代碼編譯成 CSS 檔案。您可以選擇何時和如何進行編譯。

SCSS 是一種 CSS 預處理語言,其添加了許多功能,例如變數、mixin、引入、巢狀、調色、函數和控制指令。在此外掛中,支援所有這些功能。

工作方式

在此外掛的設置頁面中,您可以選擇包含所有 SCSS 檔案的資料夾以及包含生成的 CSS 檔案的資料夾。

此外掛以遞迴方式編譯您的 SCSS 檔案,因此也可以編譯子資料夾中的 SCSS 檔案,並創建與 SCSS 資料夾相同路徑的文件夾以重建路徑中的 SCSS 資料夾。

由於每個人的需求不同,因此您可以設置一些有用的選項。

自動佇列 CSS 檔案

此選項讓您要求外掛自動將生成的 CSS 檔案包含在您的 header 中,因此您不必手動佇列這些檔案。

編譯選項

選擇您希望外掛生成 CSS 檔案的時間:

總是:如果您正在開發中,並確定每次載入頁面時都會編譯所有 CSS 檔案
當 SCSS 已更改:如果您只想在編輯某個 SCSS 檔案時進行編譯,則此選項會考慮到包含和子資料夾,因此已變更的包含 SCSS 檔案將觸發包含它的檔案的編譯
如果已登入:如果您只想讓登錄的使用者觸發編譯
如果管理者已登入:如果您只想讓登錄的管理者觸發編譯

另外,您可以選擇生成 CSS 檔案的 Source map 檔案,以更好地在除錯時視覺化生成的代碼。
示例:main.css 將生成 source map 檔案 main.css.map。

最小化選項

根據您的需求,您可以完全或部分最小化生成的 CSS 代碼。下面是可用的最小化模式:
* 展開
* 壓縮
為了讓您看到所有這些選項之間的差異,在您更改它時即時預覽。

錯誤顯示選項

選擇在前台顯示編譯錯誤的方式:
* 總是
* 如果您的 WordPress 安裝中 WP_DEBUG 常數為 true(在 wp_options.php 中)
* 如果已登入:如果您只希望已登錄的使用者看到編譯錯誤
* 如果管理員已登入:如果您只希望已登錄的管理員看到編譯錯誤
* 從不
如果您不希望在後台中顯示錯誤,請選擇最後一個選項:
* 從不,即使在後台中也不顯示

在「進階路徑」選項卡中從您的 WordPress 安裝中的每個資料夾編譯 CSS

從 WordPress 安裝的任何資料夾(主題、外掛等)編譯 SCSS。
在兩個文字區域中,您可以每行指定一個路徑:左側為 SCSS 資料夾路徑,右側為 CSS 資料夾路徑。
您可以添加任意數量的路徑!

在「匯入/匯出」選項卡中匯入/匯出設置

立即下載 .json 檔案中的設置,可將它們用於其他網站或儲存它們。
將此 .json 檔案上傳到所有安裝有此外掛的網站上以覆寫設置。

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.3.10) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「SCSS Happy Compiler – Compile SCSS to CSS & Automatic Enqueue」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

AUTOMATICALLY COMPILE YOUR SCSS FILES TO CSS FILES
Compile easily your SCSS code to CSS automatically, directly on your server and without installing SASS. You choose when and how to compile.
SCSS is a CSS preprocessor language that adds many features like variables, mixins, imports, nesting, color manipulation, functions, and control directives. All theses features are supported in the plugin.
HOW IT WORKS
In the plugin settings pages, you can choose the folder which will contain all of your SCSS files, and the folder which will contain generated CSS files.
The plugin compile your SCSS files recursively, so that SCSS files in subfolders can be compiled too, creating the missing folders to recreate the same path in the CSS folder than the SCSS folder.
As everyone has not the same needs, you will be able to set some useful options.
ENQUEUE CSS FILES AUTOMATICALLY
This option let you ask the plugin to automatically include your generated CSS files in your header, thus you won’t have to enqueue these files manually.
COMPILATION OPTIONS
Choose when you want the plugin to generate the CSS files:

Always: if you are in development and be sure that all CSS files will be compiled everytime you load a page
When SCSS has changed: if you just want to compile if you have edited one of your SCSS files ; this option takes into account inclusions and subfolders, so that an included scss file that has been changed will trigger the compilation of the file which includes it
If logged in: if you want only logged in users to trigger compilation
If admin logged in: if you want only logged in administrators to trigger compilation

Also, you can choose to generate source map files with your CSS files to better visualize your generated code while debugging.
Exemple: main.css will generate the source map main.css.map.
MINIFICATION OPTIONS
Your generated CSS code can be fully or partially minified according to your needs. Here are the minification modes available:
* Expanded
* Compressed
To let you see the difference between all these options, they are previewed live when you change it.
ERRORS DISPLAYING OPTIONS
Choose how to display compiling errors in front office:
* Always
* If the WP_DEBUG constant of your WordPress installation is true (in wp_options.php)
* If Logged In: if you want only logged in users to see compilation errors
* If Admin Logged In: if you want only logged in administrators to see compilation errors
* Never
And if you don’t want to display errors even in BO, select the last option :
* Never, even in Back Office
COMPILE CSS FROM EVERY FOLDERS IN YOUR WORDPRESS INSTALLATION in the ‘Advanced Paths’ tab
Compile SCSS from any folder of your WordPress installation : themes, plugins, …
In two textareas, you can specify one path per row: SCSS folder path on the left, CSS folder path on the right.
And you can add as many paths as you need!
IMPORT / EXPORT SETTINGS in the ‘Import / Export’ tab
Download immediately your settings in a .json file, either to use them on another site or to save them.
Upload this .json file on every websites with this plugin installed to overwrite settings.

延伸相關外掛

文章
Filter
Apply Filters
Mastodon