SASS - utiliser des variables dans plusieurs fichiers

Je tiens à garder une centrale .scss fichier qui stocke toutes SASS des définitions de variables pour un projet.

//_master.scss 

$accent: #6D87A7;           
$error: #811702;
$warning: #F9E055;
$valid: #038144;
//etc...

Le projet aura un grand nombre de fichiers CSS, en raison de sa nature. Il est important que je déclare tous les projets de style à l'échelle des variables dans un seul endroit.

Est-il un moyen de le faire dans SCSS?

  • Je suis assez sûr que c'est pas possible, j'ai essayé la même chose il ya quelque temps et ne pouvait pas le faire fonctionner.
  • au contraire, elle est un élément central de SASS: sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials
  • Sweet! Je pense que j'ai peut-être mal lu cette déclaration: "les Directives qui sont autorisés uniquement au niveau de la base d'un document, comme mixin ou jeu de caractères ne sont pas autorisés dans les fichiers qui sont importés dans un contexte imbriqué." et de ne pas lire correctement les "imbriqués contexte de la partie".
InformationsquelleAutor dthree | 2013-07-11
  1. 289

    Vous pouvez le faire comme ceci:

    J'ai un dossier nommé services publics et à l'intérieur que j'ai un fichier nommé _variables.scss

    dans ce fichier, je déclare les variables comme ceci:

    $black: #000;
$white: #fff;

    puis-je avoir le style.scss fichier dans lequel je importer tous mes autres fichiers scss comme ceci:

    //Utilities
@import "utilities/variables";

//Base Rules
@import "base/normalize";
@import "base/global";

    puis, dans l'un des fichiers que j'ai importé, je devrais être en mesure d'accéder à des variables que j'ai déclaré.

    Assurez-vous simplement d'importer le fichier de variable avant toutes les autres que vous aimeriez utiliser.

    • Parfait. Juste ce que je voulais dire et nécessaire. Dernière question: est-ce tous les fichiers importés devrait commencer par un caractère de soulignement? Vous permet de souligner votre nom de fichier, mais ne parviennent pas à sur le @déclarations d'importation.
    • ces fichiers sont considérés comme des fichiers partiels et les noms doivent commencer par un caractère de soulignement, vous le laissez sortir lors de l'importation si. il y a un très bon article qui explique pourquoi ici: alistapart.com/article/getting-started-with-sass
    • Notez que vous pouvez déclarer par défaut à l'intérieur de vos modules: $black: #000 !default;. Le !default thingie empêche la variable d'être remis à zéro si elle existe déjà.
    • cela ne fonctionne pas pour moi.
    • SALUT @joel pourquoi n'avez-vous pas importer les fichiers avec les extensions?
    • Une suggestion, si vous êtes en cours d'exécution Rails 4+, assurez-vous que votre application.le fichier css est changé à la demande.scss, puis à l'intérieur de ce fichier, ajouter @import "global.scss"; (qui contient vos variables d'e.g $blanc: #F1FFFA;). Puis redémarrez votre application ctrl+C, et actualisez votre page web.
    • Pourquoi nous avoir à vider toutes les variables dans un seul fichier? Ne peut-on pas diviser et de les déposer dans le fichier respectifs qui en a besoin? Par exemple, les variables nécessaires pour boîte de dialogue modale ne pouvons pas nous placer dans _modal.scss?
    • bien sûr, vous pouvez le faire, il ne nuire en rien. Merci Joel à l'aide de cette méthode maintenant et fonctionne parfaitement. Fatigué de la copie des variables d'un fichier vers un autre fichier.
    • pensez-vous travaillez avec une douzaine de composant de l'interface utilisateur, et maintenant vous avez besoin de définir un thème principal de la couleur de chaque pièce scss des fichiers de référence.

    InformationsquelleAutor Joel
  2. 75

    Cette réponse montre comment je me suis retrouvé à l'aide de cette et les autres pièges que j'ai frappé.

    J'ai fait un master SCSS fichier. Ce fichier doit ont un trait de soulignement au début pour qu'il soit importé:

    //assets/_master.scss 
$accent: #6D87A7;           
$error: #811702;

    Puis, dans l'en-tête de tous mes autres .SCSS fichiers, j'ai importer le maître:

    //When importing the master, you leave out the underscore, and it
//will look for a file with the underscore. This prevents the SCSS
//compiler from generating a CSS file from it.
@import "assets/master";

//Then do the rest of my CSS afterwards:
.text { color: $accent; }

    IMPORTANT

    Ne comprennent pas quelque chose, mais variables, les déclarations de fonction et d'autres SASS les fonctionnalités de votre _master.scss fichier. Si vous incluez des CSS, il sera possible de reproduire cette CSS dans chaque fichier que vous importez le maître dans de.

    • Merci beaucoup pour votre commentaire sur le fichier ayant besoin de commencer avec un trait de soulignement! Je viens de passer 3 heures à essayer de comprendre pourquoi j'ai été absent un tas de Fondation styles. Changé le nom de ma Fondation fichier de paramètres pour démarrer avec un trait de soulignement et hop! Mais maintenant, quand j'ai changer le nom de fichier dos à nouveau, il est encore au travail? Ce que l'....? Eh bien... Soupirs et les accepte, il travaille maintenant
    • Ne pas le changer en arrière - c'est probablement le "travail" hors certains CSS généré à partir de votre fichier SCSS quand il travaillait. Utilisez simplement le trait de soulignement. Mais sinon, le grand de travail!
    • il peut travailler parce que sass utilise un cache, de sorte qu'il pourrait être mis en cache. Pas sûr à 100% à travers.
    • de même pour le sass??
    • En fonction de votre compilateur, il pourrait être à l'aide d'une "dernière bonne configuration connue" l'approche. Je sais MVC Core projets ne compile pas les fichiers endommagés et vous aurez l'ancien fichier encore.
    InformationsquelleAutor dthree
  3. 2

    Créer un index.scss et là, vous pouvez importer tous les fichiers de structure que vous avez. Je vais coller mon index à partir d'un projet d'entreprise, il se peut que d'autres de la façon de structurer les fichiers css:

    @import 'base/_reset';

@import 'helpers/_variables';
@import 'helpers/_mixins';
@import 'helpers/_functions';
@import 'helpers/_helpers';
@import 'helpers/_placeholders';

@import 'base/_typography';

@import 'pages/_versions';
@import 'pages/_recording';
@import 'pages/_lists';
@import 'pages/_global';

@import 'forms/_buttons';
@import 'forms/_inputs';
@import 'forms/_validators';
@import 'forms/_fieldsets';

@import 'sections/_header';
@import 'sections/_navigation';
@import 'sections/_sidebar-a';
@import 'sections/_sidebar-b';
@import 'sections/_footer';

@import 'vendors/_ui-grid';

@import 'components/_modals';
@import 'components/_tooltip';
@import 'components/_tables';
@import 'components/_datepickers';

    Et vous pouvez regarder avec gulp/grunt/webpack etc, comme:

    gulpfile.js

    //SASS Tâche

    var gulp = require('gulp');
var sass = require('gulp-sass');
//var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function(){
    return gulp
            .src('sass/**/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(concat('styles.css'))
            .pipe(uglifycss({
                "maxLineLen": 80,
                "uglyComments": true
            }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./build/css/'));
});

gulp.task('watch', function () {
    gulp.watch('sass/**/*.scss', ['styles']);
});

gulp.task('default', ['watch']);
    • N'êtes-vous pas censé omettre le trait de soulignement de @déclarations d'importation?
    • Sass '@import' fonctionne dans les deux sens. vous pouvez écrire les URI avec ou sans le trait de soulignement. aussi avec ou sans le".scss " mettre fin.
    InformationsquelleAutor Carnaru Valentin
  4. 0

    Comment sur l'écriture d'un peu de couleur à base de classe mondiale sass fichier, donc nous n'avons pas besoin de soins où les variables sont. Tout comme le suivant:

    //base.scss 
@import "./_variables.scss";

.background-color{
    background: $bg-color;
}

    et puis, on peut utiliser le background-color classe dans un fichier.
    Mon point est que je n'ai pas besoin d'importer variable.scss dans un fichier, il suffit d'utiliser il.

    • Évidente est une mauvaise idée, vous pouvez avoir beaucoup de variables et est plus propre à conserver l'index avec juste les importations, et chaque fichier est propre proposons.
    InformationsquelleAutor gary gao