ScssPhp

Published : 6 March 2018 – updated on 6 April 2020 – by Mist. GraphX – 16 commentaires

1
2
3
4
5
4 Votes

Documentation en cours de rédaction du plugin ScssPhp

Dépot

Compile en CSS et mets en cache un fichier Scss
grace à https://scssphp.github.io/scssphp/
et dans l’idée d’utilise SASS avec diverses possibilités
cf :
http://seenthis.net/messages/199765
https://seenthis.net/messages/205041

Doc Scss:
http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html
http://linkdd.github.io/blog/post/24.html

Démo :
?page=demo/test_scss

Caractéristiques techniques importantes

Ce plugin demande d’avoir au minimum PHP 5.6.0 !
(il est possible d’utiliser la branche v1 du plugin avec PHP 5.4+, qui utilise la dernière version de la lib compatible avec PHP 5.4)

Dans sa dernière version, tout comme les version libsass ou Ruby, Scssphp, générera une erreur si vos variables ne sont pas initialisées avec !default (ce qui est censé être une « bonne pratique » dans beaucoup de langages).

Ex:

$base-spacing: 1.5rem !default;

Utilisation

La balise CSS : Chargement des styles

Exemple d’inclusion du fichier css/scss_demo.scss dans un squelette SPIP :

[<link rel="stylesheet" href="(#CSS{css/scss_demo.css}|direction_css)" type="text/css" />]
  • le fichier/lien doit porter l’extension .css même si c’est un fichier .scss
  • si une feuille css et un fichier scss portant le meme nom sont dans le même dossier, c’est la feuille css qui est retournée.
  • Une feuille de style insérée via la pipeline insert_head ne sera pas surchargé par un fichier .scss de même nom.
  • Comme pour le plugin lesscss, les chemin des images sont relatifs au fichier compilé, pour surcharger un image il faut donc la copier dans le dossier du fichier compilé.

Fichiers importés @import

A la différence de scss/sass, les chemins @import des scss importés doivent êtres définis depuis la racine du squelette ou plugin.

Ainsi pour un fichier theme.scss placé dans le dossier css d’un plugin/squelette, on déclarera :

// identique a la version ruby, les fichier _name.scss situé dans des sous-dossier
// peuvent être appelés sans le _ et l'extension
@import "css/libs/bourbon/core/bourbon";
@import "css/libs/include-media";
@import "css/settings";
// -------------------------------------------
// OUTPUT
// -------------------------------------------
@import "css/libs/sanitize";
@import "css/base/base";

Autre solution, pour simplifier la rédaction des @import déclarer dans paquet.xml le chemin du dossier css/scss

	<!-- Déclaration de notre dossier CSS pour ne pas avoir à préfixer "css/" dans nos @import -->
	<chemin path="./css" type="public" />
	<!--[> Et enfin le dossier du plugin pour SPIP <]-->
	<chemin path="" />

Debugage

Scssphp (depuis la version v0.7.3) permet l’utilisation de sourcemaps, indiquant dans les outils de debug de votre navigateur, le fichiers scss source qui a été appelé lors de la compilation.

Actuellement le plugin produit uniquement des sourcemaps de type inline (inclus dans le fichier compilé, il n’est donc pas recommandé d’activer cette option en la cumulant avec la compression des styles).

L’option est à définir depuis votre fichier option ainsi :

define('_SCSS_SOURCE_MAP', true);

A noter que sur certaines mixins, quand le niveau de récursion/imbriquation est important, le résultat renvoyé sera le fichier de la mixin, et non la ou elle est appelée. par exemple avec include-media

Injection de variables

Le plugin spip scssphp propose deux méthodes pour gérer l’injection de vos variables, ceci est utile quand vous souhaitez pouvoir rendre configurable via un formulaire une partie des styles compilés.

Utilisation d’un squelette spip

Utilisez un fichier mes_variables.scss.html, placé dans votre répertoire squelette. Ceci vous permet d’utiliser toute les boucles ou filtres de spip pour générer vos variables qui seront ensuite utilisés lors de la compilation.

Vous pouvez trouver un exemple d’utilisation de cette technique dans le squelette Html5Up_editorial :
https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_editorial/css/vars_spip.scss.html

Utilisation de la pipeline scss_variables

ScssPhp permet l’injection de variables, directement depuis php, via un array.

http://leafo.github.io/scssphp/docs/#preset-variables

Limitations de cette méthode :

-  les variables dans vos fichiers doivent êtres initalisés avec le flag !default (ce qui est censé être une «bonne pratique»).
-  la valeur de la variable est de type chaine/string et est interprété comme du scss (cf : exemple).
-  le tableau n’est pas multi-dimentionnel : les valeur de type array ne sont pas converties en scss maps, il faut les rédiger comme une chaine (cf : exemple).

Utilisation dans un plugin :

Dans votre paquet.xml :

<necessite nom="scssphp" compatibilite="[1.4.5;[" />
<pipeline nom="scss_variables" inclure=plugin_pipelines.php" />

Dans votre fichier pipeline.php :

function prefixeduplugin_scss_variables($variables){
  $variables = array(
    // ici la valeur est une map
    'header' => '(background:pink,height:2rem,)', 
    // une fonction
    'base-background-body'=>'shade(#b83768,20%)',
  );
  return $variables;
}

Discussion

5 years 1 year 3 months Without limit
par date
Filter

6 discussions

  • 2
    nicod_

    En relisant la doc, je ne comprends pas cette remarque :

    Scssphp, générera une erreur si vos variables ne sont pas initialisées avec !default

    Je n’ai jamais eu d’erreur à cause de ça, est ce toujours d’actualité ?

    • Mist. GraphX

      Hello,

      Oui j’avais noté ça à l’époque, je ne sais pas si c’est encore valable n’ayant pas utilisé la version php depuis quelques temps. peut être que ce n’est affiché que en mode debug ?

      Néanmoins, ça reste une “bonne pratique” a priori, https://sass-guidelin.es/fr/#le-flag-default

      De cette manière, un développeur peut définir sa propre variable $baseline avant d’importer votre bibliothèque sans risquer de voir sa valeur redéfinie.

      Après si ton thème ou lib n’est pas amené a être portable sur une autre version de scss (dart, libsass), ni a être surchargé par un-e dev , et que ça ne couine pas à la compilation ...

    • Mist. GraphX

      Ha non en relisant mieux , c’est/était requis quand on injecte les variables via php au moment de la compilation que les variables a surcharger doive avoir étés definies ave le flag !default.

    Reply to this message

  • 5
    guilaind

    Après être passé de 2.5.3 à 2.7.0 mes pages publiques n’ont plus d’habillage et j’obtiens le message 1 erreur dans le squelette

    SCSS : Echec compilation fichier squelettes/css/main.scss
`$\28xlarge\29` is not a valid Selector in `.\312u\28xlarge\29, . \312u$\28xlarge\29`: failed at `$\28xlarge\29` ScssPhp\ScssPhp\Compiler::evalSelectors on line 1, at column 27       

    En regardant /squelettes/css/main.scss, le seul ’xlarge" que je trouve est xlarge: '(max-width: 1680px)',
    En revenant en 2.5.3, tout revient à la normale

    • Pierre

      Je constate le même problème ici, la css en faute vient du squelettes html5up “editorial”. Enfin la faute, ça marche en 2.5.3.

    • Rainer Müller

      Moi de mon coté c’est le message suivant “Incompatible units em and px”. J’ai d’ailleurs ouvert un ticket : https://git.spip.net/spip-contrib-extensions/scssphp/issues/8
      Vous pouvez l’alimenter avec vos bugs constatés

    • Philippe ROBIN

      bonjour

      pareil avec Editorial HTML5

      en essayant de repasser en scss 2.5.3, il est donné obsolète,..

      Phil

    • Pierrot

      Bonjour,

      A télécharger depuis https://git.spip.net/spip-contrib-extensions/scssphp/releases ... Puis dévalider la 2.7.0, téléverser la 2.5.3 en respectant la même structure dans le dossier plugin ... de mémoire plugins/auto/scssphp/v2.5.3/ , ce dernier dossier doit contenir les fichiers du plugin, il faut éventuellement faire du renommage, ce dernier dossier doit être à côté du v2.7.0 et tout ceci permet que les 2 versions du plugins apparaissent côte à côte dans votre liste de plugins inactifs, il faut ensuite bien sûr activer la 2.5.3.
      Pierre

    Reply to this message

  • bruno31

    Bonjour

    BUG sur la version v2.6.0. Il manque un fichier :

    Warning: include_once(/home/spip32/public_html/plugins/auto/scssphp/v2.6.0/lib/scssphp/src/Exception/SassScriptException.php): failed to open stream: No such file or directory in /home/spip32/public_html/plugins/auto/scssphp/v2.6.0/lib/scssphp/scss.inc.php on line 15

    J’ai vérifié, le fichier n’est pas présent dans le ZIP.

    Reply to this message

  • 2
    mossad

    Bonjour, je suis nouveau sur spip et utilise le plugin.

    Pour inclure un font face, je fait actuellement
    url($urlBase+"/css/font/2919517cb534a742df4474836ca67452.ttf") format("truetype"),

    où la varible $urlBase est l’url de base du site. Je me demandais s’il y avait un moyen plus convenable et moins compliqué.

    J’avais utilisé l’injection de variable avec php décrit ici pour définir $urlBase.

    Merci

    • Mist. GraphX

      Hello,

      Pour les webfonts la meilleur strategie est de placer l’appel dans le head, le plus tôt possible, dans une balise style, plutôt que dans un fichier css compilé (qui mettra plus de temps a charger et être parsé surtout si on utilise un framework entier ex: bootstrap), tout du moins en production.

      C’est ce que fait googlefont si tu regarde ce qui est chargé quand on fait un appel a l’API.

      Je n’ai pas mes notes sous la main mais de mémoire j’ai lu cet article récemment qui est à jour et explicite :

      https://web.dev/optimize-webfont-loading/

      et plus ancien mais toujours d’actualité sur les différentes techniques de chargement :

      https://www.zachleat.com/web/comprehensive-webfonts/

    • mossad

      Hello,

      Merci pour ta réponse, je vais essayer de faire comme ça.

    Reply to this message

  • 1
    Henry

    Bonjour, j’ai mis à jour le plugin ScsscPhp et deux erreurs s’affichent.
    1 SCSS : Echec compilation fichier ie8.scss
    `libs/vars` file not found for @import : plugins/auto/html5up_editorial/v1.1.16/css/ie8.scss on line 1, at column 0

    2 SCSS : Echec compilation fichier ie9.scss
    `libs/vars` file not found for @import : plugins/auto/html5up_editorial/v1.1.16/css/ie9.scss on line 1, at column 0

    J’ai installé en local la dernière version de html5 Editorial et c’est identique.

    Par ailleurs et cela n’a rien à voir l’icône de la loupe qui permet de lancer le moteur de recherche ne le lance pas, il fait taper sur la touche « Entrée » pour lancer la recherche.
    Merci pour vos retours.

    Henry
    il y a 4 secondes
    Salut
    J’utilise la version 1.1.17 et j’ai le même problème.
    La solution n’est pas dans HTML5SUP mais dans SCSSPHP.
    Le problème se produit avec la version 2.2.3.
    J’ai changé pour la version précédente avec laquelle je travaillais avec SCSSPHP v1.4.10 et le problème a été résolu.
    J’espère que cela fonctionne pour vous.

    Henry

    En español :
    Hola
    Estoy utilizando la version 1.1.17 y tengo tu mismo problema.
    La solución no está en HTML5SUP sino en SCSSPHP.
    El problema se presenta con la version 2.2.3.
    Yo cambié a la versión anterior con la que trabajé 1.4.10 y se solucionó el problema.
    Espero que esto te sirva a ti.

    Henry

    • HirisBen

      Bonjour,
      Même problème pour moi aujourd’hui ! la dernière version du plugin ne colle pas avec la version 1.1.17 de html5up...
      Merci Henry pour ce truc provisoire qui sauve quand-même la vie !

    Reply to this message

  • Natacha Courcelles

    Bonjour
    j’ai un gros soucis avec Makicatta plus exactement avec le plugin scssphp qui est obligatoire
    c’est la première fois que je déploie Makicatta pour un client et je n’avais jamais encore rencontré ce genre de problème
    le serveur est en php 7.1 (8 coeurs 16 Go) et héberge une cinquantaine de site Spip
    j’ai poussé max_execution_time à 120 au lieu de 30 par défaut suite aux premières erreurs

    PHP Fatal error:  Maximum execution time of 30 seconds exceeded in /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php on line 1011

    à l’appel de l’admin -> 504 Gateway Time-out The server didn’t respond in time.
    et des slow logs ... voir plus bas avant et après maj scssphp
    après vidage manuel des caches j’ai réussi à mettre à jour scssphp v2.1.7 en V2.2
    mais c’est pareil
    avez vous déjà rencontré ce problème ?
    merci pour votre aide
    Natacha Courcelles

    [24-Jan-2020 10:10:27]  [pool cedresbleus] pid 123596
script_filename = /home/users/cedresbleus/html/www/ecrire/index.php
[0x00007f3ea342d310] preg_match() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1011
[0x00007f3ea342d170] match() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:2840
[0x00007f3ea342d0a0] keyword() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1871
[0x00007f3ea342c8e0] value() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1618
[0x00007f3ea342c5c0] expression() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1541
[0x00007f3ea342c370] genericList() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1522
[0x00007f3ea342c300] spaceList() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1541
[0x00007f3ea342c0b0] genericList() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1507
[0x00007f3ea342bfd0] valueList() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:2412
[0x00007f3ea342bcd0] interpolation() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:2230
[0x00007f3ea342b7d0] string() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1856
[0x00007f3ea342b010] value() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1618
[0x00007f3ea342acf0] expression() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1541
[0x00007f3ea342aaa0] genericList() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1480
[0x00007f3ea342a900] argValue() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1541
[0x00007f3ea342a6b0] genericList() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1452
[0x00007f3ea342a610] argValues() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1979
[0x00007f3ea342a310] func() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1872
[0x00007f3ea3429b50] value() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1618
[0x00007f3ea3429830] expression() /home/users/cedresbleus/html/www/plugins/auto/scssphp/v2.1.7/lib/scssphp/src/Parser.php:1541
 
[24-Jan-2020 10:16:37]  [pool cedresbleus] pid 124213
script_filename = /home/users/cedresbleus/html/www/ecrire/index.php
[0x00007f3ea3426660] preg_match() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1092
[0x00007f3ea3426040] whitespace() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1077
[0x00007f3ea3425f10] literal() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1546
[0x00007f3ea3425cc0] genericList() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1452
[0x00007f3ea3425c20] argValues() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1979
[0x00007f3ea3425920] func() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1872
[0x00007f3ea3425160] value() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1618
[0x00007f3ea3424e40] expression() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1541
[0x00007f3ea3424bf0] genericList() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1522
[0x00007f3ea3424b80] spaceList() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1541
[0x00007f3ea3424930] genericList() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:1507
[0x00007f3ea3424850] valueList() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:727
[0x00007f3ea3422910] parseChunk() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Parser.php:191
[0x00007f3ea3422540] parse() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Compiler.php:4562
[0x00007f3ea34222f0] importFile() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Compiler.php:2243
[0x00007f3ea3421fe0] compileImport() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Compiler.php:2407
[0x00007f3ea341f5f0] compileChild() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Compiler.php:1919
[0x00007f3ea341f380] compileChildrenNoReturn() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Compiler.php:4570
[0x00007f3ea341f130] importFile() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Compiler.php:2243
[0x00007f3ea341ee20] compileImport() /home/users/cedresbleus/html/www/plugins/scssphp/lib/scssphp/src/Compiler.php:2407

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom