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


Tags: css,twitter-bootstrap,sass

Problem :

I'm relatively new to SASS and bootstrap. I use bootstrap with SASS and struggle a little bit with a concept.

I always used CSS like this: one base CSS-file with the basic layout (eq. base.css). Every template includes additionally a different CSS-file (eq. sitemap.css, team.css, news.css). This CSS-files only contain the parts of the respective templates. So I can overwrite the definitions in the previous files.

In SASS everything is compiled in one file. In combination with bootstrap I actually struggle with the concept I used until now.

Every time I want to add a new CSS-file to the existing definitions, I get an error because I have to reinclude the complete bootstrap structure. But if I reinclude it, the whole bootstrap code gets written into the additional files (eq. sitemap.css, team.css, news.css) too. If I include both files in my HTML-tree, the bootstrap definitions (like the whole normalize block) gets 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 the bootstrap stuff. I do also need the bootstrap stuff in team.scss, but not all the main stuff like the normalize things.

How do I achieve that? Is that even possible or do I have to switch my css needs by adding a css-class to the body tag (like body.team)? But then I have to carry the whole CSS stuff of every page in one file. Isn't this 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 team.scss:

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

It's absolutely clear that "@extend .sr-only;" doesn't work in team.scss because of the absence of bootstrap. But if I include bootstrap with

@import "vendors/bootstrap";

in the first line of team.scss, I would automatically add all the standard 16kb bootstrap things to team.css as well. However, these definitions are already in base.css. So I would have a preventable overhead.

I think I know there is no way to say: "Hey bootstrap. I already included you in base.scss. So you don't have to write the whole main definition of yourself into team.scss again. But I need you because I like you as an usable framework. So please provide me the functions and variables anyway.". But perhaps?



Solution :

What I do in this case is to compile base.scss with Bootstrap and all the base code and my customized _variables.scss. Then if I want to add team.scss I just import the mixins and the custom variables that I will need to use from Bootstrap. Sounds great!

but...

Since .sr-only and other are just provided as classes instead SASS mixins, you can't @include it, like you could do with the .transition mixin for example.

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

  1. Import the Bootstrap module with the class you want to extend/reuse

    //contain the .sr-only definition
    @import "vendors/bootstrap/_scaffolding"; 
    @import "vendors/bootstrap/_variables";
    
    header .contentbox {
        @extend .sr-only;
    }
    
  2. Copy/Paste the class from the Bootstrap source and extend it:

    @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;
    }
    

    CSS Howto..

    How to make a tag go to the right as far as possible? [closed]

    How to disable by overriding webkit-transform and not deleting the line

    How can I remove the border around an image without a source?

    How to apply css to html so that it shows as the style property

    How can I generate a random color with Stylus CSS?

    CSS: How do I keep the text from wreaking havoc on the layout?

    How to make a HTML element fill a dynamically sized container using CSS

    How to push elements after absolute element

    How do i make liteAccordion (horizontal accordion plugin for jQuery) work in IE6

    How to change text transparency in html/css?

    How do I apply a css padding to one element but not its child

    CSS- how to prevent the original title info to be displayed

    How to hide the button keeping the position? [duplicate]

    How to reset the CSS of HTML Elements?

    How to make a floated element take the entire width of its parent

    How to make 4 divs float left and one float right with this order?

    How to fade in and out text and css using jquery

    How to move div from bottom to top

    How can I align my form to the center of the background? CSS

    How to get an image's height and set its parent height to auto?

    How to change the color of header?

    Why jQuery.css does not apply a property if it is not supported and how is this being checked?

    How can a CSS id style be accessed in jquery?

    how to use font awesome in own css?

    How put an element more close to a html label

    How to make three columns all the full height of the page?

    How to make padding:auto work in CSS?

    how to position two divs next to each other, one of them is centered in the container of both divs

    How to match a comment node with the Jsoup selector api?

    How do I adjust position of a text inside a Bootstrap panel with overriden max-height?