web-dev-qa-db-fra.com

Sass @import utilisant le soulignement de tête

Je comprends qu'il est préférable d'importer des partiels SASS/SCSS sans utiliser le soulignement principal; par exemple.

@import 'normalize-scss/normalize'; 
// this imports ./normalize-scss/_normalize.scss

Ma question pour l'exhaustivité ringard est, y a-t-il des conséquences si le fichier est importé en utilisant le trait de soulignement?

@import 'normalize-scss/_normalize';
sasspartials
27
Timidfriendly

Non. Si votre fichier est _foo.scss, toutes ces importations ont des résultats identiques tant que vous n'avez pas de noms de fichiers ambigus (sauf les effets secondaires qui pourraient exister):

@import "foo";
@import "foo.scss";
@import "_foo";
@import "_foo.scss";

Fichiers portant le même nom mais une extension différente

La seule fois où une extension est nécessaire est si vous avez à la fois _foo.scss et _foo.sass dans le même chemin de recherche. Vous obtiendrez l'erreur suivante si vous ne spécifiez pas laquelle:

    error sass/test.scss (Line 7: It's not clear which file to import for '@import "test/bar"'.
Candidates:
  test/_bar.sass
  test/_bar.scss
Please delete or rename all but one of these files.
)

Fichiers portant le même nom, mais l'un est préfixé par un trait de soulignement

Si vous avez à la fois foo.scss et _foo.scss, alors foo.scss aura la priorité. Si vous préférez _foo.scss, vous devrez ajouter le trait de soulignement à votre instruction d'importation.

@import "test/_foo";

Sass vous lancera un avertissement à chaque fois que vous enregistrerez, quelle que soit votre déclaration d'importation:

WARNING: In /path/to/test:
  There are multiple files that match the name "bar.scss":
    _bar.scss
    bar.scss
20
cimmanon

Si vous ajoutez un trait de soulignement au début du nom de fichier, Sass ne le compilera pas. Donc, si vous ne voulez pas colors.scss pour compiler en colors.css, nommez le fichier _colors.scss au lieu. Les fichiers ainsi nommés sont appelés partiels dans la terminologie Sass.

Plus d'informations sur la fonction d'importation dans Sass, vous pouvez trouver ici

11
Nesha Zoric