Sass et les sélecteurs spéciaux

Bonjour,

Pour une petite intro, c'est par ici..

Voilà maintenant que Sass ne reconnait pas mes sélecteurs spéciaux :

hr[data-hr]

ou encore :

article[role=main]

J'obtiens cette erreur :

This selector doesn't have any properties and won't be rendered.
("Ce sélecteur n'a aucune propriété et ne sera pas rendu.")

Je commence à me demander si je n'ai pas un problème de configuration car je n'ai pas retrouvé ce problème sur CodePen. Pourtant j'utilise la dernière version de Dart Sass (1.57.1)...
Modifié par Olivier C (10 Jan 2023 - 00:39)

Hello,

L'erreur semble indiquer que le problème est que la règle est vide (elle ne contient pas de déclaration) et non que le sélecteur n'est pas reconnu.
En testant rapidement sur le bac à sable https://www.sassmeister.com/ ça fonctionne très bien.

Je pense que le souci vient que tu as installé le mauvais package. Normalement, il te faut node-sass et non dart-sass

Voilà le package.json de mon starter front

{
  "name": "kit-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup --config",
    "start": "rollup --config --watch dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "node-sass": "^4.14.1",
    "rollup": "^2.21.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-scss": "^2.5.0",
    "rollup-plugin-terser": "^6.1.0"
  }
}

Modifié par niuxe (10 Jan 2023 - 11:06)

Raphael a écrit :
L'erreur semble indiquer que le problème est que la règle est vide (elle ne contient pas de déclaration) et non que le sélecteur n'est pas reconnu.

J'ai montré les sélecteurs, mais il y avait bien des déclarations.

niuxe a écrit :
Je pense que le souci vient que tu as installé le mauvais package. Normalement, il te faut node-sass et non dart-sass

En fait, comme je le disais ailleurs, node-sass est basé sur LibSass, une bibliothèque plus maintenue depuis 2018, ce qui a conduit Sass à abandonner cette branche du projet.

Voir la page npm node-sass, et aussi l’explication sur les différents projets abandonnés (LibSass et RubySass) sur le site de Sass.
Modifié par Olivier C (10 Jan 2023 - 23:09)

Oups, je n'avais pas fait le rapprochement.

sass a écrit :

....
LibSass and Node Sass will continue to be maintained indefinitely on a best-effort basis, including fixing major bugs and security issues and maintaining compatibility with the latest Node versions.
....

Ceci dit, quand tu lis (l'article ci-dessous [^1]), les évolutions sont gelées.

[^1] LibSass is Deprecated
Modifié par niuxe (10 Jan 2023 - 16:33)

Certes "les évolutions sont gelés" :
- sur le plan des nouvelles fonctionnalités ce n'est pas grave,
- mais j'avais aussi noté que cela veut dire qu'il n'y aurait plus de garantie de compatibilité avec la syntaxe CSS future.

Sur ce dernier point c'est pas glop (et du coup je me retrouverais dans mon impasse actuelle avec Stylus).

Au final j'ai relevé quelques petites subtilités pour les syntaxes CSS avec Sass. Deux exemples :

Cette valeur d'attribut ne sera pas reconnu par Sass, il faudra l'entourer de guillemets :

[tabindex=-1] // CSS ok, Sass nope
[tabindex="-1"] // CSS et Sass ok

Quand je vais arriver à mes fichiers de formulaire, il va falloir que je rajoute des guillemets à tour de bras !

Édit : ah ! ça dépend : pour les classes ça fonctionne :

[class^=column]

Pour les couleurs hsl(), si manipulation des variables il y a, il faudra utiliser les virgules pour la séparations des valeurs :

hsl($deg 80% 40% / .5) // nope
hsl($deg, 80%, 40%, .5) // ok

Sass n'est pas aussi transparent que ça au CSS vanilla au final.

Ceci étant dit, ce soir je m'en sort mieux, je commence à maîtriser la bête. Certaines erreurs ne sont pas revenues, je n'ai pas réussi à déterminer pourquoi, peut-être un effet de cascade suite à une erreur corrigée en amont. Édit : peut-être une histoire de virgule oubliée (à ajouter entre les sélecteurs, contrairement à Stylus).
Modifié par Olivier C (11 Jan 2023 - 22:47)