Développer un plugin, des CSS en SASS

Par Franck, . Lien permanent Dotclear

Comme évoqué hier, les feuilles de styles définies spécifiquement pour l’usage du plugin dans Dotclear sont assez copieuses, en particulier celle dédiée à l’administration.

On peut se simplifier un peu la vie, et pas que vous le verrez aussi, en utilisant un pré-processeur CSS, Sass en l’occurence. Notez que je ne vais pas détailler son installation, qui peut varier d’un environnement à l’autre, mais uniquement montrer ses avantages.

1er avantage, on peut imbriquer des déclarations CSS ; d’autre part il existe un sélecteur particulier, le &, qui sert à rappeler le sélecteur parent. Ça permet essentiellement d’éviter de ré-écrire sans cesse des sélecteurs, qui dans notre cas peuvent s’avérer plutôt verbeux.

Voyez dans l’exemple ci-dessous, qui est la feuille de style public.css :

/* Dyslexia font */

@font-face {
  font-family: 'opendys';
  src: url('index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff2') format('woff2'), url('index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button,
body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button {
  border: none;
  width: 2.5em;
  height: 2.5em;
  background-size: 2.5em 2.5em;
  margin: .5em;
  overflow: hidden;
  color: transparent;
}

body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button {
  background-image: url(index.php?pf=a11yConfig/img/visual-deficiency.svg), none;
}

body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button {
  background-image: url(index.php?pf=a11yConfig/img/wheelchair.svg), none;
}

#accessconfig.a11yc-vd button:hover, #accessconfig.a11yc-wc button:hover,
#accessconfig.a11yc-vd button:active, #accessconfig.a11yc-wc button:active {
  cursor: pointer;
}

div#accessconfig:not(.widget) {
  margin: 0 .5em;
}

Une fois écrite en langage Sass :

// Dyslexia font
@font-face {
  font-family: 'opendys';
  src: url('index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff2') format('woff2'), url('index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

// Button as an image
body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) {
  #accessconfig.a11yc-vd, #accessconfig.a11yc-wc {
    button {
      border: none;
      width: 2.5em;
      height: 2.5em;
      background-size: 2.5em 2.5em;
      margin: .5em;
      overflow: hidden;
      color: transparent;
      &:hover, &:active {
        cursor: pointer;
      }
    }
  }
  #accessconfig.a11yc-vd button {
    background-image: url(index.php?pf=a11yConfig/img/visual-deficiency.svg), none;
  }
  #accessconfig.a11yc-wc button {
    background-image: url(index.php?pf=a11yConfig/img/wheelchair.svg), none;
  }
}

// Button
div#accessconfig:not(.widget) {
  margin: 0 .5em;
}

Ce fichier, nommé public.scss est placé dans un nouveau sous-répertoire nommé scss.

Une commande permet ensuite de convertir ce fichier en une feuille de style standard qui sera écrite dans le sous-répertoire css, comme auparavant.

Voilà la commande (à lancer dans une fenêtre terminal une fois positionné dans le répertoire racine du plugin) :

sass -s compressed --no-source-map  ./scss:./css

Cette commande récupère tous les fichiers présents dans le sous-répertoire scss et les convertit dans le répertoire css.

L’usage de l’option -s compressed, 2e avantage, permet d’obtenir une CSS passablement compacte. Voyez plutôt :

@font-face{font-family:"opendys";src:url("index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff2") format("woff2"),url("index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff") format("woff");font-weight:normal;font-style:normal}body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button,body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button{border:none;width:2.5em;height:2.5em;background-size:2.5em 2.5em;margin:.5em;overflow:hidden;color:transparent}body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button:hover,body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button:active,body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button:hover,body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button:active{cursor:pointer}body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button{background-image:url(index.php?pf=a11yConfig/img/visual-deficiency.svg),none}body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button{background-image:url(index.php?pf=a11yConfig/img/wheelchair.svg),none}div#accessconfig:not(.widget){margin:0 .5em}

Idem pour la feuille de style de l’administration, ré-écrite en Sass dans le fichier admin.scss (toujours dans le répertoire scss):

// Access42 library

// Dyslexia font
@font-face {
  font-family: 'opendys';
  src: url('index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff2') format('woff2'), url('index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

// Button as an image
body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) {
  #accessconfig.a11yc-vd, #accessconfig.a11yc-wc {
    button {
      border: none;
      width: 2em;
      height: 2em;
      background-size: 2em 2em;
      overflow: hidden;
      color: transparent;
      background-image: none;
      &:hover, &:active {
        cursor: pointer;
      }
    }
  }
  #accessconfig.a11yc-vd button {
    background-image: url(index.php?pf=a11yConfig/img/visual-deficiency.svg), none;
  }
  #accessconfig.a11yc-wc button {
    background-image: url(index.php?pf=a11yConfig/img/wheelchair.svg), none;
  }
}

// Button
div#accessconfig {
  display: inline-block;
  float: left;
  margin: 0 .5em 0 0;
  button {
    margin: 0 .5em 0 0;
  }
}

// AccessConfig options dialog
#a42-ac {
  font-size: 1em;
  h1 {
    text-indent: initial;
    @media screen and (max-width: 80em) {
      background: initial;
    }
  }
  legend {
    border: none;
    background: transparent;
  }
}
#a42-ac-close {
  color: initial;
  background: initial;
  filter: none;
}

// Dotclear admin
// ==============

// Remove background image on some elements (button, …)
// An issue has been opened about this topic (https://github.com/access42/AccessConfig/issues/2)
button, input[type=button], input.button, input[type=reset], input[type=submit], input[type=submit].reset, input.reset, input[type=submit].delete, input.delete, a.button, a.button.delete, a.button.reset {
  body.a42-ac-inv-contrast &, body.a42-ac-high-contrast & {
    background-image: none;
    &:hover, &:focus {
      filter: invert(100%);
    }
  }
}

// Editors
// -------

// Legacy Editor
body.a42-ac-inv-contrast, body.a42-ac-high-contrast {
  .jstElements button {
    width: inherit;
    span {
      display: inline-block;
    }
  }
}

// Cancel contrast CSS for CKEditor as it makes it unusable */
body.a42-ac-inv-contrast, body.a42-ac-high-contrast {
  .cke * {
    color: initial !important;
    background-color: initial !important;
  }
}

// 3rd party plugins
// -----------------

// cloneEntry
body.a42-ac-inv-contrast, body.a42-ac-high-contrast {
  input[type=submit].clone {
    background-image: none;
  }
}

// dcRevisions
body.a42-ac-inv-contrast, body.a42-ac-high-contrast {
  .button.add {
    background-image: none;
  }
}

Convertie en :

@font-face{font-family:"opendys";src:url("index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff2") format("woff2"),url("index.php?pf=a11yConfig/lib/css/fonts/opendyslexic-regular-webfont.woff") format("woff");font-weight:normal;font-style:normal}body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button,body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button{border:none;width:2em;height:2em;background-size:2em 2em;overflow:hidden;color:transparent;background-image:none}body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button:hover,body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button:active,body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button:hover,body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button:active{cursor:pointer}body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-vd button{background-image:url(index.php?pf=a11yConfig/img/visual-deficiency.svg),none}body:not(.a42-ac-inv-contrast):not(.a42-ac-high-contrast):not(.a42-ac-text-img) #accessconfig.a11yc-wc button{background-image:url(index.php?pf=a11yConfig/img/wheelchair.svg),none}div#accessconfig{display:inline-block;float:left;margin:0 .5em 0 0}div#accessconfig button{margin:0 .5em 0 0}#a42-ac{font-size:1em}#a42-ac h1{text-indent:initial}@media screen and (max-width: 80em){#a42-ac h1{background:initial}}#a42-ac legend{border:none;background:transparent}#a42-ac-close{color:initial;background:initial;filter:none}body.a42-ac-inv-contrast button,body.a42-ac-high-contrast button,body.a42-ac-inv-contrast input[type=button],body.a42-ac-high-contrast input[type=button],body.a42-ac-inv-contrast input.button,body.a42-ac-high-contrast input.button,body.a42-ac-inv-contrast input[type=reset],body.a42-ac-high-contrast input[type=reset],body.a42-ac-inv-contrast input[type=submit],body.a42-ac-high-contrast input[type=submit],body.a42-ac-inv-contrast input[type=submit].reset,body.a42-ac-high-contrast input[type=submit].reset,body.a42-ac-inv-contrast input.reset,body.a42-ac-high-contrast input.reset,body.a42-ac-inv-contrast input[type=submit].delete,body.a42-ac-high-contrast input[type=submit].delete,body.a42-ac-inv-contrast input.delete,body.a42-ac-high-contrast input.delete,body.a42-ac-inv-contrast a.button,body.a42-ac-high-contrast a.button,body.a42-ac-inv-contrast a.button.delete,body.a42-ac-high-contrast a.button.delete,body.a42-ac-inv-contrast a.button.reset,body.a42-ac-high-contrast a.button.reset{background-image:none}body.a42-ac-inv-contrast button:hover,body.a42-ac-inv-contrast button:focus,body.a42-ac-high-contrast button:hover,body.a42-ac-high-contrast button:focus,body.a42-ac-inv-contrast input[type=button]:hover,body.a42-ac-inv-contrast input[type=button]:focus,body.a42-ac-high-contrast input[type=button]:hover,body.a42-ac-high-contrast input[type=button]:focus,body.a42-ac-inv-contrast input.button:hover,body.a42-ac-inv-contrast input.button:focus,body.a42-ac-high-contrast input.button:hover,body.a42-ac-high-contrast input.button:focus,body.a42-ac-inv-contrast input[type=reset]:hover,body.a42-ac-inv-contrast input[type=reset]:focus,body.a42-ac-high-contrast input[type=reset]:hover,body.a42-ac-high-contrast input[type=reset]:focus,body.a42-ac-inv-contrast input[type=submit]:hover,body.a42-ac-inv-contrast input[type=submit]:focus,body.a42-ac-high-contrast input[type=submit]:hover,body.a42-ac-high-contrast input[type=submit]:focus,body.a42-ac-inv-contrast input[type=submit].reset:hover,body.a42-ac-inv-contrast input[type=submit].reset:focus,body.a42-ac-high-contrast input[type=submit].reset:hover,body.a42-ac-high-contrast input[type=submit].reset:focus,body.a42-ac-inv-contrast input.reset:hover,body.a42-ac-inv-contrast input.reset:focus,body.a42-ac-high-contrast input.reset:hover,body.a42-ac-high-contrast input.reset:focus,body.a42-ac-inv-contrast input[type=submit].delete:hover,body.a42-ac-inv-contrast input[type=submit].delete:focus,body.a42-ac-high-contrast input[type=submit].delete:hover,body.a42-ac-high-contrast input[type=submit].delete:focus,body.a42-ac-inv-contrast input.delete:hover,body.a42-ac-inv-contrast input.delete:focus,body.a42-ac-high-contrast input.delete:hover,body.a42-ac-high-contrast input.delete:focus,body.a42-ac-inv-contrast a.button:hover,body.a42-ac-inv-contrast a.button:focus,body.a42-ac-high-contrast a.button:hover,body.a42-ac-high-contrast a.button:focus,body.a42-ac-inv-contrast a.button.delete:hover,body.a42-ac-inv-contrast a.button.delete:focus,body.a42-ac-high-contrast a.button.delete:hover,body.a42-ac-high-contrast a.button.delete:focus,body.a42-ac-inv-contrast a.button.reset:hover,body.a42-ac-inv-contrast a.button.reset:focus,body.a42-ac-high-contrast a.button.reset:hover,body.a42-ac-high-contrast a.button.reset:focus{filter:invert(100%)}body.a42-ac-inv-contrast .jstElements button,body.a42-ac-high-contrast .jstElements button{width:inherit}body.a42-ac-inv-contrast .jstElements button span,body.a42-ac-high-contrast .jstElements button span{display:inline-block}body.a42-ac-inv-contrast .cke *,body.a42-ac-high-contrast .cke *{color:initial !important;background-color:initial !important}body.a42-ac-inv-contrast input[type=submit].clone,body.a42-ac-high-contrast input[type=submit].clone{background-image:none}body.a42-ac-inv-contrast .button.add,body.a42-ac-high-contrast .button.add{background-image:none}

Par ailleurs, quand je modifie les feuilles de styles sources dans mon éditeur favori[1], donc les fichiers .scss, je lance auparavant la commande suivante, toujours dans un terminal, pour surveiller et convertir à la volée le résultat de mes modification à chaque fois qu’un des fichiers est sauvegardé :

sass --watch -s compressed --no-source-map  ./scss:./css

Une fois finie l’édition je fais un simple CTRL+C dans la fenêtre terminal pour stopper la surveillance.

Notez que toutes les commandes doivent être lancées une fois positionné dans le répertoire racine du plugin.

Note

[1] Pour l’instant c’est SublimeText

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/14450

Haut de page