sass - Import css/scss file into a class

16
votes

I have a problem. I'm using vaadin inside liferay. I've successfully written a fully responsive (yeah, tables too) theme for vaadin, based on bootstrap. Now I'm importing it to liferay. Everything went fine 'till I needed to upgrade Liferay, where their new responsive theme is using same classes name as bootstrap, but with different behaviour (sad, very sad face).

The solution I've thought so far is to apply a class to the vaadin compiled css, like:

.daVaadinTheme {
    @import bootstrap.css;   
}

so the content will be compiled like:

.daVaadinTheme h1.insideTheFile{

}     
.daVaadinTheme h2.insideTheFile{

}

But, as you may figured out, is not obviously working.

Do you have any solution?

Read carefully! This is NOT a duplicate of the answer you've posted. I'm trying to import a CSS file inside a CSS/SCSS class of another file, like the example I've written above. My problem is not to simply import a CSS file inside another one...

SOLUTION: (kudos to Mathias Jørgensen)

using @import from another scss file:

in test.scss:

.daVaadinTheme{
    @import "bootstrap.scss";
}
3
csssass
is this .daVaadinTheme {@import bootstrap.css;} in a .scss file? - valerio0999
in that case the correct syntax is @import 'path-to-your-file/_bootstrap.scss'; add the underscore and the .scss extension to the bootstrap.css - i'm not sure of the output though - valerio0999
please consider posting your solution as an answer, people usually search for solutions in the answer section. - lakesare

3 Answers

8
votes

Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. foo.css → _foo.scss

Have an outer File like so:

#main .content {  // if that's, where you want them to rule only
    @import 'foo';
}

Reasons:

  • import only works with css
  • underscore-files are glady skipped by sass (also as in gulp.src(<some wildcards).sass())
  • if you have no influence in your repo about the css filename whatsoever. or it's a major pain on upgrades, consider using a symbolic link under an .scss extension...
6
votes

You need move your code into mixin:

// botstrap.scss
@mixin bootstrap {
  h1.insideTheFile{
  }
  h2.insideTheFile{
  }
}

Then, you can import normal:

// test.scss
@import "bootstrap"; // No extension
@include bootstrap; // The name of "mixin"

or with context:

// test.scss
@import "bootstrap"; // No extension

.daVaadinTheme {
  @include bootstrap; // The name of "mixin"
}
-4
votes

If you want to add certain styles to a class using sass/scss I think what you're looking for is

.myClass { @import bootstrap.css; }