Ответ 1

Зачем нам нужен "style.css"?

Прежде чем я даю свое решение, я думаю, что важно пройти через то, что нам нужно style.css в Wordpress

В Wordpress файл style.css требуется для просмотра информации о теме в бэкэнд.

style.css также используется как выход по умолчанию get_stylesheet_uri(). Однако это можно настроить с помощью фильтра stylesheet_uri.

На мой взгляд, тот факт, что Wordpress заставляет вас иметь информацию о вашей теме в style.css, является просто плохим дизайном, так как он добавляет примерно 1032 байта. Это не много, но совершенно ненужно; особенно если этого можно избежать, так как размер файла, пожалуй, самый большой фактор, влияющий на производительность сайта.

Это не похоже на Drupal CMS, где информация о вашей теме хранится в отдельном файле, таком как yourtheme.info, поэтому никогда не предоставляется конечному пользователю

Решение 1

Теперь мы поняли это, вот решение!

Лучший подход, на мой взгляд, будет заключаться в следующем:

• Скомпилируйте все ваши sass файлы в один файл (например, style.min.css), используя импорт и частичные (см. http://sass-lang.com/guide#topic-5). Не стесняйтесь называть его чем-то другим.
• Оставьте все заголовки темы 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 для получения дополнительной информации

Таким образом, при запуске wp_head() в вашем head вашего документа он автоматически добавит правильный файл CSS.

Затем вы можете запускать sass-lint в ваших sass файлах, но все еще иметь свою тему в своем style.css, предоставляя лучшее из обоих миров.

<сильные > Преимущества

• Пропускает sass-lint, так как ни один из sass файлов не содержит комментариев формы /* ... */, поскольку заголовки тем в style.css NOT style.min.css
• Меньший размер файла для таблицы стилей, так как style.min.css больше не содержит информацию заголовка темы, поскольку она хранится в style.css
• Лучшая производительность сайта. Поскольку все ваши файлы SCSS скомпилированы в один файл CSS, количество HTTP-запросов, отправленных на ваш сервер, уменьшается, тем самым улучшая общую производительность сайта.

Недостатки

• Два файла CSS. На самом деле это не так уж и много, поскольку пользователь на интерфейсе отправляет только 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?

Из другого комментария, который вы упомянули, вы сказали, что хотите, чтобы пользователи могли изменять незначительные вещи без установки sass или инструмента автоматизации сборки.

Это не означает, что вы не можете использовать инструмент автоматизации сборки. Это просто означает, что ваш скомпилированный CSS файл из решения 1 или решения 2 не должен быть уменьшен, так как пользователи не могут легко редактировать файл! К сожалению, это означает, что ваш сайт будет намного больше в размере файла и, следовательно, медленнее в результате.

В качестве альтернативы вы можете иметь два файла:

• website.min.css: сокращенная версия скомпилированного SCSS
• website.css: расширенная версия скомпилированного SCSS

[Назовите их, как вы пожелаете]

Затем, если пользователь хочет сделать быстрые изменения без sass или Grunt/ Gulp, он может сделать это до website.css (однако пользователю также необходимо изменить файл, который загружается в functions.php)

Кроме того, опытные пользователи, у которых есть опыт работы с сайтом или пользователи, которые не хотят вносить какие-либо изменения, не должны компрометировать, так как они все еще могут использовать быстро сокращенную версию website.min.css!

Лучшее из обоих миров!

Ответ 2

Как насчет использования styles.css для вывода вашего sass? Это то, что я делаю, и он решил многие из ваших проблем:

• Убедитесь, что вы работаете в дочерней теме.
• Возможно, вам захочется работать с локальной установкой wordpress вместо сервера. Эта ссылка поможет вам в большинстве этого процесса. Это хороший способ обойти выбор правильной темы. Вы можете использовать его компилятор для вывода вывода в нужный файл. Я использую Koala, но есть куча замечательных там, на которых можно выбрать.
• создайте ваши scss файлы в частичной форме (т.е. _theme.scss, _responisve.scss, _animate.scss и т.д.).
• создать один styles.scss файл.
• введите как можно больше scss-ресурсов, а не используйте их css. Например, Bootstrap имеет собственный scss, а также Font Awesome и Animate.
• @import все эти частичные файлы в вашем styles.scss и направьте вывод на style.css или предпочтительно мини-(сжатую) версию - styles.min.css.
• Очистите header.php от всех введенных таблиц стилей, которые вы уже импортируете в новый файл scss.
• Проверьте и очистите function.php для того же.

И это действительно не так много осталось.

ИЗМЕНИТЬ

Если вашим дизайнерам не хватает опыта в SCSS, они могут кодировать CSS в файле SCSS и все равно будут компилироваться как style.min.css. Разумеется, гораздо лучше использовать функции SCSS, но это проблема, связанная с наличием необходимого опыта и знаний. По-прежнему достигается плавная компиляция SCSS в один файл (style.css).

КРЕДИТ В cale_b  - "вы можете создать файл" custom.scss ", который предназначен для работы ваших дизайнеров (и они могут использовать ванильный CSS), и импортируется LAST, так что стили переопределяют любые другие правила scss"

Ответ 3

Я использую gulp с 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';

Ответ 4

Как я это делаю, у меня есть файл main.css, который все SASS компилирует и затем импортирует в style.css через регулярный импорт CSS.