CODEWITHSUNDEEP
csstwitter-bootstrapsassgulp-sass
ArtM
ArtM

Reputation: 63

Inherit all bootstrap classes from selector using Sass

I´m new with Sass, and I want all the bootstrap.css classes with a father id, like this:

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
#mycustomid html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
#mycustomid body {
  margin: 0;
}
#mycustomid article,
#mycustomid aside,
#mycustomid details,
#mycustomid figcaption,
#mycustomid figure,
#mycustomid footer,
#mycustomid header,
#mycustomid #mycustomid hgroup,
#mycustomid #mycustomid main,
#mycustomid #mycustomid menu,
#mycustomid #mycustomid nav,
#mycustomid #mycustomid section,
#mycustomid #mycustomid summary {
  display: block;
}
#mycustomid audio,
#mycustomid canvas,
#mycustomid progress,
#mycustomid video {
  display: inline-block;
  vertical-align: baseline;
}

How can I do this with bootstrap sass?

I downloaded full bootstrap sass from the official page.

I've learned to compile it with gulp and bower, but I do not know in which file I should add the main id.

see my image with the files

Upvotes: 3

Views: 611

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362390

Just wrap the @import of the scss file(s) with your custom selector...

#mycustomid {
    @import "bootstrap";
}

Note, the #mycustomid element would need to wrap the entire document: html, body, etc..

Demo on Codeply

Upvotes: 1

Related Questions