Sass 在 WordPress

問題描述

我想在我的一個 WordPress 項目中使用 SASS(這將是未來項目的樣板) 。我希望以遵循以下標準的方式：

• Passess sass-lint

• 遵循 Wordpress 標準 (例如主題標題)

• 清潔，一致& 容易維護

我有幾個想法，但沒有一個符合上述標準。

1. 刪​​除 style.css，並單獨使用 Sass

/index.php
/... other wordpress files ...
/assets/sass/main.scss
/assets/sass/...other sass files...

運行 sass 後，將在根目錄中創建 style.css 。

優點：

• 一致性

• 容易維護

缺點：

• SCSS-Lint 不喜歡 「WordPress 主題標題評論」，因為它更喜歡//評論

• 在沒有編譯 sass 的情況下，不可能在 WordPress 後端中選擇主題

2. 同時使用 style.css 和 Sass

/index.php
/style.css
/...other wordpress files...
/assets/sass/main.scss
/assets/sass/... other sass files...

優點：

• 基本上解決了 (1)

• 即使不應該是這樣; 快速更改可以輕鬆添加到 style.css 沒有任何工具

缺點：

• 前後矛盾

• 冗餘

• 需要多個 CSS 請求 (一個用於 style.css，一個用於編譯的 sass)

另外我最大的問題是：在哪裏放編譯的 SASS？將其與 style.css 連接似乎相當奇怪。

有任何想法嗎？謝謝！

最佳解決方案

為什麼我們需要”style.css”？

在給出我的解決方案之前，我認為重要的是要了解我們在 Wordpress 中需要 style.css 的原因

在 Wordpress 中，需要 style.css 文件才能查看後台中的主題信息。

style.css 也用作 get_stylesheet_uri()的默認輸出。但是，可以使用 stylesheet_uri 過濾器進行定製。

在我看來，Wordpress 強制您在 style.css 中擁有主題信息的事實只是糟糕的設計，因為它增加了約 1032 個字節。這不是很多，但完全不必要; 特別是如果可以避免，文件大小可能是影響站點性能的最大因素。

這與 Drupal CMS 不同，您的主題信息存儲在諸如 yourtheme.info 的單獨文件中，因此永遠不會暴露給最終用户

---

解決方案 1

現在我們得到了，這裏是解決方案！

我認為最好的辦法是：

• 通過使用導入和部分 (請參閲 http://sass-lang.com/guide#topic-5) 將所有 sass 文件編譯成單個文件 (如 style.min.css) 。隨意命名其他東西。

• 將所有您的 WordPress 主題標題留在 style.css 中。

例如：

style.css 文件

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange
Text Domain: twentythirteen

Use it to make something cool, have fun, and share what you've learned with others.
*/

style.min.css

p{color:red;}h1{color:blue;} ...

然後，您可以使用 functions.php 文件中的以下代碼確保在前端的每個頁面上添加的新樣式表：

function theme_name_stylesheets() {
    wp_enqueue_style('style-name', get_template_directory_uri() . '/style.min.css');
}

add_action( 'wp_enqueue_scripts', 'theme_name_stylesheets' );

有關更多信息，請參閲：https://codex.wordpress.org/Function_Reference/wp_enqueue_style

因此，當您在文檔的 head 中運行 wp_head()時，將自動添加正確的 CSS 文件。

然後，您可以在您的 sass 文件上運行 sass-lint，但仍然在 style.css 中提供您的主題信息，這兩個世界都是最好的。

優點

• 通過 sass-lint，因為沒有一個 sass 文件包含/* ... */形式的註釋，因為主題頭在 style.css NOT style.min.css

• 樣式表較小的文件大小，因為 style.min.css 不再包含主題頭信息，因為它存儲在 style.css

• 更好的網站性能：由於所有 SCSS 文件都被編譯成單個 CSS 文件，所以發送到服務器的 HTTP 請求數量減少，從而提高了整體站點性能。

缺點

• 兩個 CSS 文件。沒有太多的缺點，因為 front-end 上的用户只發送了 style.min.css，而不是 style.css

• 可能會混淆 Wordpress 社區中的用户。大多數 Wordpress 用户希望您的樣式在 style.css 。但是，我懷疑這將是一個很大的問題 (特別是如果你不發佈你的主題)，也可以通過一個簡單的評論來糾正。

解決方案 2

您的問題的另一個解決方案是使用以下方法臨時禁用 scss-lint 註釋規則：

// scss-lint:disable Comment
/*!
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange
Text Domain: twentythirteen

Use it to make something cool, have fun, and share what you've learned with others.
*/
// scss-lint:enable Comment
p {
  font-size: 16px;
}

還要注意使用響亮的評論 (即/*! ... */而不是/* ... */) 。這基本上意味着這個評論不應該在最簡化的 sass 版本中刪除。

優點

• 一個 CSS 文件

• 不太可能在 Wordpress 社區中混淆用户

• 通過 sass-lint，因為評論規則暫時被禁用！

• 更好的網站性能 (與解決方案 1 相同)

缺點

• 較大的樣式表的文件大小，因為編譯的 CSS 文件包含主題頭信息。這只是一個小的增長。

那些沒有使用 Sass 或 Grunt /Gulp 的 end-users 怎麼樣？

從您提到的另一個評論中，您表示希望用户能夠在不安裝 sass 或構建自動化工具的情況下更改小事情。

這並不意味着您不能使用構建自動化工具。這意味着您從解決方案 1 或解決方案 2 編譯的 CSS 文件不應該被細化，因為用户不能輕易地編輯文件！不幸的是，這意味着你的網站在文件大小上會更大，因此結果會減慢。

或者，您可以有兩個文件： – website.min.css：編譯的 SCSS 的最小化版本 – website.css：編譯 SCSS 的擴展版本

[再次，按你的意願命名]

那麼如果用户希望在沒有 sass 或 grunt /gulp 的情況下進行快速更改，那麼他/她可以這樣做到 website.css(但是，用户還需要更改 functions.php 中加載的文件)

另外，有經驗的用户誰有 sass 的經驗或用户不想進行任何更改，不必妥協，因為他們仍然可以利用快速最小化的 website.min.css 版本！

兩全其美的！

次佳解決方案

如何使用 styles.css 輸出你的 sass？這是我做的，它已經解決了你的許多問題：

• 確保你在一個小孩主題工作。

• 您可能希望在本地安裝 wordpress 而不是在服務器上工作。該 link 將幫助您大部分此過程。這是選擇正確主題的好方法。您可以使用他的編譯器將輸出路徑到正確的文件。我使用 Koala，但有一些偉大的在那裏可供選擇。

• 以部分形式 (即_theme.scss，_responisve.scss，_animate.scss 等) 創建您的 scss 文件。

• 創建一個 styles.scss 文件。

• 注入儘可能多的 scss 資源，而不是使用他們的 CSS 。例如，Bootstrap 擁有自己的 scss，Font Awesome 和 Animate 也是如此。

• @import 您的 styles.scss 中的所有這些部分文件，並將輸出引導到 style.css，或者最好是一個 minified(壓縮的) 版本，而不是 style.min.css 。

• 清理您 header.php 從您已經在您的新的 scss 文件中導入的所有被標記的樣式表。

• 檢查並清理您的 function.php 相同。

真的沒有太多的餘地。

編輯

如果您的設計師缺乏 SCSS 的經驗，他們可以在 SCSS 文件中編寫 CSS，並且仍然會作為 style.min.css 進行編譯。自然地，利用 SCSS 功能要好得多，但這是與需要經驗和知識有關的問題。將 SCSS 無縫編譯成一個文件 (style.css) 仍然可以實現。

信用於 cale_b – 「您可以創建一個”custom.scss” 文件，該文件適用於您的設計人員 (並且可以使用 vanilla CSS)，並且導入 LAST，因此它的樣式會覆蓋任何其他 scss 規則」

第三種解決方案

我使用 gass 與 sass 和 wordpress，我輸出編譯的 sass 到 style.css 這裏是我的正常工作流程：

gulpfile.js

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    wiredep = require('wiredep').stream,
    $ = gulpLoadPlugins(),
    browserSync = require('browser-sync');
    p = require('./package.json');

gulp.task('sass', function (){
    return gulp.src('scss/**/*.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass())
    .pipe($.concat('style.css'))
    .pipe($.autoprefixer())
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

gulp.task('sass-prod', function (){
    gulp.src('scss/**/*.scss')
    .pipe($.sass())
    .pipe($.cssmin())
    .pipe($.concat('style.css'))
    .pipe($.autoprefixer())
    .pipe(gulp.dest('.'))
});

main.scss

/*!
Theme Name: example
Theme URI: http://example.com
Author: xxxxxx
Author URI: xxxx
Description: xxxxx
Version: 1.0
*/

@import 'vars', 'typography', 'header', 'layout', 'proyectos', 'forms', 'libs';

參考文獻

• Sass within WordPress [closed]

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。