Sass в WordPress

28

Я хотел бы использовать SASS в одном из моих проектов Wordpress (который будет своего рода шаблоном для будущих проектов). Я хочу сделать это таким образом, чтобы он соответствовал следующим критериям:

  • 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", поскольку он предпочитает // comments
  • Без компиляции 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 кажется довольно странной.

Любые идеи? Спасибо!

  • 1
    Будет только один запрос CSS. Для своих проектов я использую style.css только для предоставления информации о теме для администратора, но я не загружаю ее в интерфейс. Но я думаю, что style.css должен быть загружен, чтобы пользователь мог добавить свойство css на стороне администратора ... это зависит от того, что вам нужно.
  • 0
    mhs.github.io/scout-app вы можете использовать Scout sass компилятор
Показать ещё 6 комментариев
Теги:
sass

4 ответа

16
Лучший ответ

Зачем нам нужен "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!

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

Поделиться
  • 1
    Решение 1 - это то, что я использую почти все время. style.css используется только Wordpress для получения информации о теме, поэтому я просто не использую ее для внешнего интерфейса. Кстати, вы можете поместить скомпилированный Sass в папку css, что, IMO, более удобно.
  • 1
    Спасибо за ваш пост; Я реализовал это таким образом (решение 1). Надеюсь, наши дизайнеры будут так же довольны, как и я.
Показать ещё 2 комментария
9

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

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

ИЗМЕНИТЬ

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

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

Поделиться
  • 0
    См. Минусы пункта 1. Отсутствие style.css без запуска обработчика задач (или компиляции sass вручную) - не совсем то, чего я хочу достичь. Я хочу, чтобы дизайнеры могли менять мелочи, не устанавливая SASS и все такое.
  • 0
    Будут ли ваши дизайнеры знать SCSS?
Показать ещё 6 комментариев
7

Я использую 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';
Поделиться
  • 0
    ОП упомянул, что не хочет использовать систему сборки (по какой-то странной причине) в качестве комментария для другого ответа. Также спасибо за предложение загрузки комментариев. Не знал об этом!
  • 0
    Я не видел, что спасибо за разъяснения
Показать ещё 4 комментария
-1

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

Поделиться
  • 0
    Хотите уточнить детали голосования?
  • 1
    Возможно, вы были отвергнуты качеством вашего ответа. Это также не основывается на других ответах. Возможно, предоставьте некоторый код, объяснение, преимущества и недостатки и т. Д. (Хотя я вас и не понижал)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню