Clever Geek Handbook

How NOT to combine all CSS into one file with SASS and bootstrap

I am relatively new to SASS and bootstrap. I am using bootstrap with SASS and struggling a bit with the concept.

I've always used CSS like this: one base CSS file with a base layout (like base.css). Each template includes a different CSS file (e.g. sitemap.css, team.css, news.css). These CSS files contain only parts of the corresponding templates. So I can overwrite definitions in previous files.

In SASS, everything is compiled into one file. Combined with bootstrap, I am actually wrestling with the concept I have used so far.

Every time I want to add a new CSS file to existing definitions I get an error because I need to re-enable the full bootstrap framework. But if I return it, all the bootstrap code is written to additional files (e.g. sitemap.css, team.css, news.css). If I include both files in my HTML tree, bootstrap definitions (for example, the whole normalization block) are defined two or more times.

I have this setup:

- css
|-- source
| |-- base.scss
| |-- team.scss
| |-- vendors
| | |-- bootstrap...
└-- output
  |-- base.css
  └-- team.css

In base.scss I include bootstrap stuff. I also need bootstrap stuff in team.scss, but not all basic stuff, how to normalize things.

How can I achieve this? Is this possible, or do I need to switch my css needs by adding a css class to the body tag (like body.team)? But then I have to carry all the CSS stuff of each page in one file. Isn't that a crab?

Edit to clear things up a bit: This is in base.scss:

@import "settings/vars";
@import "vendors/bootstrap";
...
header {
    @extend .container;
    ...
    .contentbox {
        margin-top: $mainGap;
    }
    ...
}
...

and this is in the .scss command:

header .contentbox {
    @extend .sr-only;
}

It is quite clear that "@ extend.sr-only;" doesn't work in .scss command due to lack of bootstrap. But if you enable bootstrap with

@import "vendors/bootstrap";

on the first line of team.scss, I will automatically add all standard 16kb boot files to team.css. However, these definitions are already in base.css. Therefore, I would have avoidable overhead.

I think I know there is no way to say "hey bootstrap. I already included you in base.scss. So you no longer need to write all the basic definition of yourself in team.scss. Because I love you as a usable framework So please provide me with all the functions and variables. " But probably?

+3


source to share


2 answers


In this case, I have to compile base.scss

with Bootstrap and all the base code and my custom _variables.scss

. Then if I want to add team.scss

, I just import mixins and custom variables that I will need to use from Bootstrap. Sounds great!

but ...

Since .sr-only

others are just provided as classes instead of SASS mixins, you can't do @include

it as you could with mixing .transition

, for example.



So, for now, if you are using SASS, you have 2 options:

  • Import Bootstrap module with class you want to extend / reuse

    //contain the .sr-only definition
@import "vendors/bootstrap/_scaffolding"; 
@import "vendors/bootstrap/_variables";

header .contentbox {
    @extend .sr-only;
}

  • Copy / Paste the class from the Bootstrap source and continue:

    @import "vendors/bootstrap/_variables";

// Copy/Paste the .sr-only class to reuse, very un-DRY
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

header .contentbox {
  @extend .sr-only;
}
+1


source


What you are looking for is called partial in Sass, I think:

If you have an SCSS or Sass file that you want to import but don't want to compile into a CSS file, you can add an underscore to the beginning of the file name. This will tell Sasu not to compile it into a regular CSS file. Then you can import these files without using underscores.

For example, you may have _colors.scss

. Then no file will be created _colors.css

and you can do

@import "colors";

and _colors.scss

will be imported.



FYI, in LESS this will be the import parameter :@import (reference) "colors"

0


source






More articles:


All Articles