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

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

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

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

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

[css] SASS - use variables across multiple files

Examples related to css

Examples related to sass