0

Let's say you have 500 pages that all have the content class and you want them to follow the autosizing col-xs-6 from bootstrap.

You don't want to have to add the col-xs-6 to all of them individually. Is there a way to add this class as a class within another class (look below) without having to specify every element (such as height, width, @media etc)?

CSS:

.content{
    .col-xs-6
    {
     /* load col-xs-6 into .content */
    }
}

HTML:

<div class="content"></div>
Fueled By Coffee
  • 2,467
  • 7
  • 29
  • 43
DDJ
  • 807
  • 5
  • 13
  • 31
  • 1
    CSS doesn't have classes. It has class selectors, which select elements by class. Importing one CSS class to another makes no sense. – Oriol Dec 22 '16 at 21:12
  • 1
    there are a number of ways to do this using css frameworks - or, if you're using a build process, css modules can compose for you: https://css-tricks.com/css-modules-part-1-need/ – kinakuta Dec 22 '16 at 21:13
  • 4
    If you're using a preprocessor like Sass, you can `@extend` one class into another, which will essentially copy all of its properties. Otherwise you can just copy/paste out the styles from `.col-xs-6` to `.content` in your CSS file. – Jon Uleis Dec 22 '16 at 21:13
  • So you have to use the individual elements from a class. The css-tricks is handy too. I will look into Sass too. :) – DDJ Dec 22 '16 at 21:14

1 Answers1

1

Generally, in order to do extension like you are asking, you cannot use raw CSS. You need to use something like SCSS: http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html

Unfortunately you cannot extend the Bootstrap grid because it is dynamically generated: Can Bootstrap 3 Grid Be Extended?

Community
  • 1
  • 1
Adam
  • 2,214
  • 1
  • 15
  • 26