Search code examples
sasscompass-sass

@include establish-baseline($base-font-size); generates no output?

I have the following in my scss file:

@import compass
$base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';


html {
  @include establish-baseline($base-font-size);
  font-family: $lato;
}

but when I check my CSS, the @include establish-baseline rule doesn't output anything and I get no compilation errors. Anyone any idea what could be wrong?

Solution

  • The main problem:

    In your case, you should put the imported file name "compass" between quotes:

    @import "compass"

    If you only want to import establish-baseline mixin use instead:

    @import "compass/typography/vertical_rhythm";

    Some tips:

    • It's not necessary to set $base-font-size: 16px because imported compass files comes with a $base-font-size: 16px !defaultvariable declaration
    • As @nyuen says you don't need to pass $base-font-size as an argument and you should move the @include establish-baseline out of the html.

    Here is the modified code:

    // you should use the file name to import between quotes
@import "compass";
// $base-font-size: 16px !default; it's already declared in compass
// $base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';

// This include should be use out of any selector
@include establish-baseline();

html {
  font-family: $lato;
}