Sass dans WordPress

Question

J'aimerais utiliser SASS dans l'un de mes projets wordpress (qui sera une sorte de modèle pour de futurs projets). Je souhaite le faire en respectant les critères suivants :

• Passess sass-lint
• Respecter les normes Wordpress (par exemple, les en-têtes de thème)
• Propre, cohérent et facile à entretenir

J'ai eu quelques idées, mais aucune ne répond aux critères ci-dessus.

1. Retirez style.css et utiliser uniquement Sass

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

Après avoir exécuté sass le site style.css sera créé dans le répertoire racine.

Pour :

• Cohérence
• Facile à entretenir

Cons :

• SCSS-Lint n'aime pas le "commentaire d'en-tête du thème WordPress", car il préfère // commentaires
• Sans compiler sass, il est impossible de sélectionner le thème dans l'interface de WordPress.

2. Utilisez le style.css et Sass simultanément

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

Pour :

• En gros, cela résout le contre de (1)
• Même il ne devrait pas en être ainsi ; des changements rapides peuvent être facilement ajoutés à la style.css sans aucun outil

Cons :

• Incohérence
• Redondance
• Nécessite plusieurs requêtes CSS (une pour style.css un pour le sass compilé)

Mon plus gros problème ici est aussi de savoir où mettre le SASS compilé ? En le concaténant avec le style.css semble assez étrange.

Des idées ? Merci !

Answer 1

Pourquoi avons-nous besoin de "style.css" ?

Avant de donner ma solution, je pense qu'il est important de passer en revue les raisons pour lesquelles nous avons besoin de style.css dans Wordpress

Dans Wordpress, le style.css est nécessaire pour afficher les informations relatives au thème dans le fichier backend .

style.css est également utilisé comme sortie par défaut de get_stylesheet_uri() . Toutefois, il est possible de le personnaliser en utilisant l'option stylesheet_uri filtre.

À mon avis, le fait que Wordpress vous oblige à avoir les informations de votre thème en style.css est tout simplement mal conçu, car il ajoute environ 1032 octets. Ce n'est pas beaucoup, mais c'est complètement inutile, surtout si cela peut être évité, car la taille du fichier est peut-être le facteur qui a le plus d'impact sur les performances du site.

Contrairement au CMS Drupal où les informations sur votre thème sont stockées dans un fichier séparé tel que yourtheme.info et n'est donc jamais exposé à l'utilisateur final

---

Solution 1

Maintenant que nous avons éliminé ce point, voici la solution !

La meilleure approche, à mon avis, serait la suivante :

• Compilez tous vos fichiers sass dans un seul fichier (tel que style.min.css ), en utilisant des importations et des partiels (voir http://sass-lang.com/guide#topic-5 ). N'hésitez pas à lui donner un autre nom.
• Laissez tous les en-têtes de votre thème wordpress dans style.css .

Par exemple, comme ceci :

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;} ...

Vous pouvez ensuite vous assurer que la nouvelle feuille de style est ajoutée sur chaque page du frontend en utilisant le code suivant dans votre fichier functions.php fichier :

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

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Voir : https://codex.wordpress.org/Function_Reference/wp_enqueue_style pour plus d'informations

Ainsi, lorsque votre course wp_head() dans votre head de votre document, il ajoutera automatiquement le bon fichier CSS.

Ensuite, vous pouvez exécuter sass-lint sur vos fichiers sass, mais conservez les informations relatives à votre thème dans votre fichier style.css ce qui permet d'obtenir le meilleur des deux mondes.

Avantages

• Passe sass-lint car aucun des fichiers sass ne contient de commentaires du type /* ... */ car les en-têtes du thème sont dans style.css PAS style.min.css
• Taille de fichier plus petite pour la feuille de style, comme le style.min.css ne contient plus les informations d'en-tête du thème, car elles sont stockées dans le fichier style.css
• Meilleures performances du site : Comme tous vos fichiers SCSS sont compilés en un seul fichier CSS, le nombre de requêtes HTTP envoyées à votre serveur diminue, ce qui améliore les performances globales de votre site.

Inconvénients

• Deux fichiers CSS . Ce n'est pas vraiment un inconvénient, car l'utilisateur sur le front-end ne reçoit que l'adresse de l'utilisateur. style.min.css et non le style.css
• Peut confondre les utilisateurs de la communauté Wordpress . La plupart des utilisateurs de Wordpress s'attendent à ce que vos styles soient dans le format style.css . Cependant, je doute que cela soit un gros problème (surtout si vous ne publiez pas votre thème) et peut être rectifié par un simple commentaire.

Solution 2

Une autre solution à votre problème est de désactiver temporairement la règle scss-lint Comment en utilisant ce qui suit :

// 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;
}

Notez également l'utilisation de commentaires forts (c'est-à-dire /*! ... */ au lieu de /* ... */ ) . Cela signifie essentiellement que ce commentaire ne doit pas être supprimé dans les versions miniaturisées de sass.

Avantages

• Un fichier CSS
• Moins de risques de confusion pour les utilisateurs de la communauté Wordpress.
• Passe sass-lint car les règles de commentaires sont temporairement désactivées !
• Meilleures performances du site : (même raison que la solution 1)

Inconvénients

• Taille de fichier plus importante pour la feuille de style, car le fichier CSS compilé contient les informations d'en-tête du thème. Il ne s'agit toutefois que d'une faible augmentation.

Qu'en est-il des utilisateurs finaux qui n'utilisent pas Sass ou Grunt/Gulp ?

Dans un autre commentaire, vous avez dit que vous vouliez que les utilisateurs puissent modifier des éléments mineurs sans installer sass ou un outil d'automatisation de la construction.

Cela ne signifie pas que VOUS ne pouvez pas utiliser un outil d'automatisation de la construction. Cela signifie simplement que votre fichier CSS compilé à partir de la solution 1 ou 2, ne doit pas être minifié, car les utilisateurs ne peuvent pas facilement modifier le fichier ! Malheureusement, cela signifie que la taille du fichier de votre site sera beaucoup plus importante et qu'il sera donc plus lent.

Alternativement, vous pouvez avoir deux fichiers : - website.min.css : la version miniaturisée du SCSS compilé - website.css : la version étendue du SCSS compilé

[Encore une fois, nommez-les comme vous le souhaitez]

Ensuite, si l'utilisateur souhaite effectuer des modifications rapides sans sass ou Grunt/Gulp, il peut le faire à l'adresse suivante website.css (cependant, l'utilisateur doit également modifier le fichier qui est chargé en functions.php )

De plus, les utilisateurs expérimentés qui ont une expérience de sass ou les utilisateurs qui ne veulent pas faire de changements ne doivent pas faire de compromis, car ils peuvent toujours profiter de la vitesse de minification. website.min.css version !

Le meilleur des deux mondes !

Answer 2

Pourquoi ne pas utiliser styles.css pour sortir votre sass ? C'est ce que je fais et cela a résolu beaucoup de vos problèmes :

• Assurez-vous que vous travaillez dans un thème enfant.
• Vous pouvez travailler sur une installation locale de wordpress plutôt que sur un serveur. Ce site lien vous aidera dans la plupart de ces démarches. C'est un bon moyen de contourner la sélection du bon thème. Vous pouvez utiliser le compilateur pour diriger la sortie vers le bon fichier. J'utilise Koala mais il y en a un tas de très bons parmi lesquels choisir.
• créez vos fichiers scss sous forme partielle (c.-à-d. _theme.scss , _responisve.scss , _animate.scss etc).
• créez-en un styles.scss fichier.
• Injectez autant de ressources scss que possible au lieu d'utiliser leur css. Par exemple, Bootstrap a ses propres scss, tout comme Font Awesome et Animate.
• @import tous ces fichiers partiels dans votre styles.scss et diriger la sortie vers style.css ou, de préférence, une version minifiée (compressée) - styles.min.css .
• Nettoyez votre header.php de toutes les feuilles de style interrogées que vous importez déjà dans votre nouveau fichier scss.
• Vérifiez et nettoyez votre function.php pour la même chose.

Et il n'y a vraiment plus grand chose d'autre.

EDIT

Si vos concepteurs manquent d'expérience en matière de SCSS, ils peuvent coder en CSS à l'intérieur du fichier SCSS et celui-ci sera toujours compilé en tant que style.min.css. Naturellement, il est préférable de tirer parti des fonctionnalités SCSS, mais il s'agit là d'un problème lié à l'expérience et aux connaissances requises. La compilation transparente de SCSS dans un seul fichier (style.css) est toujours réalisée.

CRÉDIT À cale_b - vous pouvez créer un fichier "custom.scss", destiné à être utilisé par vos concepteurs (qui peuvent utiliser les CSS classiques), et importé en DERNIER, de sorte que ses styles remplacent toutes les autres règles scss".

Answer 3

J'utilise gulp avec sass et wordpress, j'envoie le sass compilé dans style.css. voici mon flux de travail normal :

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';

Answer 4

La façon dont je procède est la suivante : j'ai un fichier main.css dans lequel tous les SASS sont compilés, puis je l'importe dans le style.css par le biais d'une importation CSS classique.