Taghéritage

[Magento 1.9] Un héritage propre des fichiers SASS dans un thème Custom

Source officielle : Magento 1.9 Responsive Web Design Developer’s Guide > Advanced topics > SASS fallback structure.

Un des soucis majeurs de l’utilisation de SASS est qu’on ne peut pas utiliser de variable dans les chemins d’imports des fichiers *.scss. Ceci reviendrait à devoir, lorsqu’on crée un thème custom, copier l’intégralité des fichiers *.scss du thème parent (y-compris donc ceux qui ne feront l’objet d’aucune surcharge ou ré-écriture). Résultat : énormément de doublons dans les styles chargés en front, puisqu’on récupère l’intégralité des styles du thème parent et ceux du thème enfant.

La solution est d’ajouter la ligne suivante dans le fichier config.rb du thème enfant (ATTENTION: la doc officielle est fausse puisqu’elle recommande de faire la modification dans le fichier config.rb du thème parent !

Si on choisit le thème Rwd et le package Default en tant que fallback :

Les chemins sont relatifs, donc attention à modifier cet exemple en fonction de l’emplacement de votre fichier config.rb (et de votre arbo en général si elle est custom).

Pour plus d’infos, cf la doc officielle donnée en lien plus haut.

[Magento 1.9] Héritage : définir un thème parent

Dans app/design/frontend/nom_du_package/nom_du_theme/etc/theme.xml :

Dans cet exemple, votre thème héritera du thème Default du package Rwd.

[CSS] Les règles d’héritage

Demo JSFiddle.net

A part !important, est-ce qu’il existe des trucs propres pour qu’un style prenne le dessus sur un autre avec lequel il est en concurrence?

La surcharge par ordre de déclaration dans la CSS :

Pour prendre la main, t’as la surcharge : tu déclares .box { padding: 12px; } puis plus loin, tu re-déclares .box { padding: 22px; }.

C’est toujours la dernière déclaration rencontrée pour un élément donné qui est prise en compte et qui écrase toutes les précédentes.

Le ciblage par précision dans le chemin (dans le DOM) qui permet d’atteindre l’élément :

Code HTML :

Dans l’ordre de priorité tu as :

  1. .riri .fifi .loulou{ font-size: 12px } (le + important)
  2. .fifi .loulou { font-size: 22px; }
  3. .loulou { font-size: 42px; } (le – important)

Et là, plus tu seras précis dans la manière (le chemin) de cibler ton élément, plus tes styles prendront le dessus peu importe l’ordre dans lequel ils sont déclarés dans ta/tes CSS.

Il y a encore un cas supplémentaire dans la demo JSFiddle.net, donc à voir et à utiliser pour manipuler d’autres cas à l’avenir.

[Change cross commerce] Déclarer une dépendance d’un thème existant dans un nouveau thème.

Dans App/Themes/<plugin>/<module>/Setup/Install.php, dans la classe Install extends \Change\Plugins\ThemeInstallBase :

© 2020 devfrontend.info

Theme by Anders NorénUp ↑