Carnet Wiki

Version 5 — March 2018 nicod_

Documentation en cours de rédaction du plugin ScssPhp

Compile en CSS et mets en cache un fichier Scss
grace à http://leafo.net/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

Utilisation

Inclusion du fichier css/scss_demo.scss dans un squelette SPIP :

  1. [<link rel="stylesheet" href="(#CSS{css/scss_demo.css}|direction_css)" type="text/css" />]

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 :

@import "css/libs/bourbon/core/bourbon";
@import "css/libs/include-media";
@import "css/settings";
// -------------------------------------------
// OUTPUT
// -------------------------------------------
@import "css/libs/sanitize";
@import "css/base/base";

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 (incluse dans le fichiers compilé, il n’est donc pas recommandé d’activé 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);

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