2

Edit: I don't think this is a duplicate. The question you've linked says can I do this? The answer is yes (there are two answers), my question is, I'm importing and extending a class but it is not working.

I have the following html page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/Site2.css" rel="stylesheet" /></head>
<body>
    <div class="small-panel">My scss class panel</div>
    <div class="col-md-6 col-md-offset-3 panel panel-default">My classes panel</div>
</body>
</html>

and the scss file of 

@import url('bootstrap.css');
.small-panel {
    @extend .col-md-6;
    @extend .col-md-offset-3;
    @extend .panel;
    @extend .panel-default;
}

Unfortunately the small-panel class does not render as a panel. However the div where I specify each class individually does render as a panel (the small-panel does not have any formatting at all and if I do an inspect source code small-panel is not there).

So, how do I get my scss file to extend the bootstrap classes? Am I doing something wrong here? I'd rather not use the bootstrap sass files...I might do this in the future but for now I want to keep things simple and not change things around too much.

If I navigate to localhost:44301/content/site2.css I get

@import url('bootstrap.css');
/*# sourceMappingURL=Site2.css.map */

btw, I'm using Visual Studio 2013 with the SassAndCoffee plugin in MVC.

atreeon
  • 21,799
  • 13
  • 85
  • 104
  • possible duplicate of [Can I import an externally hosted file with sass?](http://stackoverflow.com/questions/16947337/can-i-import-an-externally-hosted-file-with-sass) – cimmanon May 23 '14 at 13:51
  • I don't think this is a duplicate. The question you've linked says can I do this? The answer is yes (there are two answers), my question is, I'm importing and extending a class but it is not working. Maybe I'm missing something, maybe you could be more explicit and suggest why this isn't working? Thank you – atreeon May 23 '14 at 15:13
  • Sass can only extend selectors that are found within Sass files. It cannot extend selectors within CSS files because they are not compiled, they are simply linked to like they would be if you were using vanilla CSS. – cimmanon May 23 '14 at 15:50
  • If I rename bootstrap.css to bootstrap.scss should this work? – atreeon May 23 '14 at 16:05
  • (by the way, I have tried this and it didn't work). What is the best way to achieve this effect of combining more than one class into one? – atreeon May 23 '14 at 16:23

1 Answers1

2

This is what I was doing wrong

Not this

@import url('bootstrap.css');

but this

@import 'bootstrap.css';
atreeon
  • 21,799
  • 13
  • 85
  • 104