@import sass directive doesn't work for me, (Undefined mixin)

Question

rails 3.2, bootstrap 3.

I use bootstrap sass gem and I can't do it work. I have this error

Undefined mixin 'make-lg-column'.

in this file app/assets/stylesheets/exam.css.scss

...
.button-left{
  @include make-lg-column(4);
  display:inline;
  padding-top: 5px;
}
...

this is my application.css.scss

@import "bootstrap";
@import "exam";

if I add these lines to exam.css.scss it works. But I don't want do it

@import "bootstrap/variables";
@import "bootstrap/mixins";

Please any advice is welcome, thanks for your help.

score 1 · Accepted Answer · answered Jan 13 '14 at 15:47

Do you want to compile the "exam" file as a part of application.css?

If I understand right, you should rename your file exam.css.scss -> _exam.scss and you don't need to add any other import.

it happens because exam.css.scss is a seperate file and compiler don't know anything about applications.css.scss

score 0 · Answer 2 · answered Jan 13 '14 at 15:19

0

The mixin make-lg-column is defined within the bootstrap/mixins; file. In order to process the mixins file, you also need to provide the variables file. You can do 1 of 2 things:

Include the mixins and variables files within your exam.css.scss file even though it's not your preference.
You can copy the make-lg-column mixin out of the mixins file into the beginning of your exam.css.scss file.

.make-lg-column(@columns; @gutter: @grid-gutter-width){
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

NOTE: You will have to redeclare your variables too.

answered Jan 13 '14 at 15:19

Hynes

3,394
3
22
22

Thanks for your help. I don't understand because I have to include `make-lg-column` again if [in this file of gem is included](https://github.com/twbs/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/bootstrap.scss#L2-L3). It is a bit confusing for me. – edudepetris Jan 13 '14 at 15:35
I guess I'm not understanding your question then. Are you trying to compile `exam.css.scss` on it's own or compile it into `application.css.scss`? If you want to compile `exam.css`, you will have to redeclare your variables & mixins. If you only want to compile `application.css` then you shouldn't have to redeclare variable and mixins. It looks like you're trying to compile `exam.css` though, correct? – Hynes Jan 13 '14 at 15:46
I want to compile `application.css.scss`. I'm following [this advice](http://pivotallabs.com/structure-your-sass-files-with-import/). – edudepetris Jan 13 '14 at 17:14
Do you have a file in your `bootstrap` folder that rolls up all your imports? I see you're calling `@import: "bootstrap";`. Do you have a `bootstrap.scss` file that includes all your bootstrap files? – Hynes Jan 13 '14 at 17:22
According with [gem documentation](https://github.com/twbs/bootstrap-sass#sass) `@import "bootstrap";` include all of Bootstrap's styles, mixins and variables!. So only use it. It's rare because after I put underscore to exam.css.scss -> _exam.. It worked. – edudepetris Jan 13 '14 at 17:56
the underscore means that the file is gonna be imported and compiled after in the new file, without the underscore it will compile before and the import it – Alexis Apr 18 '15 at 09:02

@import sass directive doesn't work for me, (Undefined mixin)

2 Answers2