SASS - use variables across multiple files

Question

I would like to keep one central  scss file that stores all SASS variable definitions for a project       master scss    accent   6D87A7              error   811702   warning   F9E055   valid   038144     etc       The project will have a large number of CSS files  due to its nature  It is important that I declare all project-wide style variables in one location   Is there a way to do this in SCSS

User · Answer

This answer shows how I ended up using this and the additional pitfalls I hit.

I made a master SCSS file. This file must have an underscore at the beginning for it to be imported:

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

Then, in the header of all of my other .SCSS files, I import the master:

// 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

Do not include anything but variables, function declarations and other SASS features in your _master.scss file. If you include actual CSS, it will duplicate this CSS across every file you import the master into.

User · Answer

This question was asked a long time ago so I thought I d post an updated answer  You should now avoid using  import  Taken from the docs   Sass will gradually phase it out over the next few years  and eventually remove it from the language entirely  Prefer the  use rule instead   A full list of reasons can be found here You should now use  use as shown below   variables scss  text-colour   262626    otherFile scss  use  variables      Path to  variables scss Notice how we don t include the underscore or file extension  body        namespace  variable-name      namespace is just the last component of its URL without a file extension   color  variables  text-colour     You can also create an alias for the namespace   otherFile scss  use  variables  as v   body        alias  variable-name   color  v  text-colour     EDIT As pointed out by  und3rdg at the time of writing  November 2020   use is currently only available for Dart Sass and not LibSass  now deprecated  or Ruby Sass  See https   sass-lang com documentation at-rules use for the latest compatibility

User · Answer

You can do it like this   I have a folder named utilities and inside that I have a file named   variables scss  in that file i declare variables like so    black   000   white   fff    then I have the style scss file in which i import all of my other scss files like this      Utilities  import  utilities variables       Base Rules  import  base normalize    import  base global     then  within any of the files I have imported  I should be able to access the variables I have declared   Just make sure you import the variable file before any of the others you would like to use it in

User · Answer

Create an index scss and there you can import all file structure you have  I will paste you my index from an enterprise project  maybe it will help other how to structure files in 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     And you can watch them with gulp grunt webpack etc  like   gulpfile js     SASS Task  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

User · Answer

How about writing some color-based class in a global sass file  thus we don t need to care where variables are  Just like the following      base scss   import     variables scss     background-color      background   bg-color      and then  we can use the background-color class in any file  My point is that I don t need to import variable scss in any file  just use it

User · Answer

In angular v10 I did something like this  first created a master scss file and included the following variables  master scss file    theme  blue    button color  red    label color  gray   Then I imported the master scss file in my style scss at the top  style scss file   use    master  as m   Make sure you import the master scss at the top  m is an alias for the namespace  Use  use instead of  import according to the official docs below  https   sass-lang com documentation at-rules import Then in your styles scss file you can use any variable which is defined in master scss like below  someClass       backgroud-color  m  theme      color  m  button color      Hope it  ll help    Happy Coding

[css] SASS - use variables across multiple files

IMPORTANT

Examples related to css

Examples related to sass