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

前言介紹

  • 這款 WordPress 外掛「SCSS Happy Compiler – Compile SCSS to CSS & Automatic Enqueue」是 2021-09-03 上架。 目前已經下架不再更新，不建議安裝使用。
  • 目前有 3000 個安裝啟用數。
  • 上一次更新是 2022-10-28，距離現在已有 919 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 4.0 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
  • 有 6 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

happymonkeyagency |

外掛標籤

css | sass | scss |

內容簡介

自動將您的 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 檔案上傳到所有安裝有此外掛的網站上以覆寫設置。

原文外掛簡介

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.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「SCSS Happy Compiler – Compile SCSS to CSS & Automatic Enqueue」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | 1.0.6 | 1.1.0 | 1.1.1 | 1.1.2 | 1.1.3 | 1.1.4 | 1.2.0 | 1.2.1 | 1.3.0 | 1.3.1 | 1.3.2 | 1.3.3 | 1.3.4 | 1.3.5 | 1.3.6 | 1.3.7 | 1.3.8 | 1.3.9 | trunk | 1.3.10 |

延伸相關外掛（你可能也想知道）

  • WP-SCSS 》此外掛使用 ScssPhp，在 WordPress 安裝中編譯 .scss 檔案。包含設定頁面，可配置目錄、錯誤報告、編譯選項和自動佇列。, 此外掛僅在更改 .scss 檔案時進行編...。
  • CodeKit – Custom Codes Editor 》使用 CodeKit 外掛，您可以在 WordPress 網站中加入自訂的 SASS、CSS、JS、PHP 和 HTML 代碼，並使用最先進且簡單的自訂程式碼編輯器。從未如此容易更改您的...。
  • Instant CSS 》在 WordPress 中使用 Visual Studio Code 的威力寫你的 CSS 或 SCSS。, 該外掛使用 autoprefixer 將你的 CSS/SCSS 解析成可在舊版瀏覽器上運行的 CSS，不需要...。
  • WP Compiler 》WP Compiler 可以讓您在佈景主題或外掛中使用預處理的 CSS 和壓縮的 JS 能力，不需要任何複雜的安裝或建置工具。只需告訴 WP Compiler 您的原始檔案位置和編...。
  • SCSS-Library 》這個外掛讓你可以直接在 wp_enqueue_style 中使用 SCSS 檔案，只需要將該檔案添加到樣式清單中，外掛會在需要時進行編譯。, 這個外掛的基礎受到 WP...。
  • Lenix scss compiler 》一個非常實用的外掛，專門為開發者撰寫 SCSS 而設計。, 此外掛允許您直接在伺服器上（通過 FTP）編寫 SCSS，無需本地編譯器。, 如何運作？, 選擇一個包含 SCS...。
  • Tuxedo CSS Editor 》使用此外掛能夠即時在自訂器中編輯 CSS/Sass/Less（CSS 預處理器），並立即更新。, 功能, , 支援使用進階的 CSS 預處理器 Sass 或 Less。, 支援 Autoprefixer...。
  • WordPress SASS 》SASS 是一種可編程的樣式表方法，它新增了一些很酷的功能。它可以讓樣式表更容易閱讀、更新，同時還添加了一些強大的功能，例如函數、變數和導入。 (請參閱 h...。
  • Sassify 》這個外掛新增了支援 SCSS 樣式表到 wp_enqueue_style。只要使用 wp_enqueue_style 加載你的樣式表，當需要時它就會自動編譯。, 變數可以通過 sassify_compile...。
  • SyntaxHighlighter Evolved: SASS Brush 》此外掛使用官方的 SASS brush，該 brush 由 Alex Gorbatchev 所提供。, 我的所有插件列表都可在我的WordPress Plugin 頁面上找到，該頁面位於我的網站kau-boy...。
  • Woocommerce Woowrap 》Woowrap 是一個 Woocommerce 擴充套件，可關閉預設的 Woocommerce 樣式並添加 Bootstrap 類別以使 Woocommerce 前端具有響應式特性。, 若要交換側邊欄和主要...。
  • SASS Compiler 》透過這個外掛，您可以從 WordPress 儀錶板中編寫 SASS 並編譯樣式表，同時也可以編輯您的變數。, 閱讀文件, , , 以與 CSS 相同的方式註冊和加載 SASS 樣式表...。
  • Simple Compiler SCSS 》總結：SCS 是一個簡單的外掛程式，用於即時編譯 SCSS 檔案，當請求詢問不存在的 CSS 檔案時，但同名的 SCSS 檔案存在。由開發者為開發者而製作。, , 問題與答...。
  • SCSS-4-WP 》使用 ScssPhp 在 WordPress 安裝中編譯 scss 檔案成單一的輕量級 CSS 檔案。該外掛提供設定頁面，可設定目錄、錯誤報告、編譯選項和自動佇列等功能。, 為了讓...。
  • Custom CSS for Blocks 》Custom CSS for Blocks 讓您輕鬆為 WordPress 網站上的任何區塊或文章撰寫自訂CSS，讓您完全控制您內容的設計。您可以利用 SASS 支援程式碼，撰寫整潔高效能...。

文章
Filter
Apply Filters
Close
Mastodon