Twitter Bootstrap Question posted in

Why variables are defined in a separate scss file in libraries – Twitter bootstrap

I’ve been SCSS lately for new project. One thing I noticed in libraries like twitter bootstrap or materializecss is, they’ve dumped all the variables belongs to all components in a single _variables.scss file. What is the problem of dropping the variables in the respective component scss file? Doesn’t that make the code more self-contained? Is something like this SCSS doesn’t allow?

Tags:

2

Answers


  1. 0

    I believe the reason for this is to simplify the editing of these variables for the developer. It’s also a good way to share common properties across different components, like an accent color.

    I myself also use this approach in my projects, creating an environment.scss file that contains a map of all the properties, be it colors, fonts, sizes, or anything. This way, there’s only ever one file to modify if I want to change these values, and they are easily shared across components, too.

    Login or Signup to reply.
  2. 0

    The reason its because, if you import a package like materialize, and you want to access a variable from a button (like $button-width or something) from a file of your project, you should have to import that specific file (_button.scss). And if you need to use another variable, like $popover-background, you will have to import it too!.

    So you will have a lot of imports, and its ugly and difficult, thats why you should keep all your variables in a single file, so you only need to import 1 file to access it, and, plus that, its more human readable, simple, and fast to edit in a single file.

    But mainly to just import 1 file. In complex projects, you will have a lot of files, and its really unclean to have a lot of imports.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search