Question

I’m using Thomas Macdonald’s sass version of bootstrap (bootstrap-sass)

I’m trying to not embed Bootstrap classes (i.e. span7 or span10) in my html as described in here.
http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

in bootstrap-sass the only sass mixin that I know is available to apply the “span7” class to my div is with @include makeColumn(7);

This works for fixed grid but not for a fluid grid. I need these columns to be fluid and responsive.
@Thomas Macdonald answered the question on StackOverflow with a mix-in that he created called makeFluidColumn
How to use twitter bootstrap with bootstrap-sass in rails app?

but it is not included anymore in the latest mixin file as is also mentioned per this github issue:
https://github.com/thomas-mcdonald/bootstrap-sass/issues/191

Is there something else that I need to do? I need to be able to change the span as a mixin because I am trying to change the number of columns that a div spans depending on viewport size through media queries.

Answer 1

I ended up rolling my own @mixin.

so instead of using bootstrap’s @include makeColumn(i); i can do @include col(i) to apply a width of i number of columns to a div or other element. Just include this SCSS file

    /*=VARIABLES - GRID
------------------------------------------------*/
$columns: $gridColumns; //from bootstrap/_variables.scss
$column-width: $gridColumnWidth; //from bootstrap/_variables.scss
$gutter-width: $gridGutterWidth; //from bootstrap/_variables.scss
$max-width: $columns * ($column-width + $gutter-width);


/*=VARIABLES - FONTS
------------------------------------------------*/
$font-base: $baseFontSize; //from bootstrap/_variables.scss
$font-base-line-height: $baseLineHeight; //from bootstrap/_variables.scss
$font-base-line-height-half: $font-base-line-height / 2;
$font-base-percentage: (($font-base / 16px) * 100) + 0%;


/*MIXINS
------------------------------------------------*/
@mixin col($n, $padding: 0px, $border: 0px, $container-width: $max-width) {
    float: left;
    margin-left: percentage($gutter-width / $container-width);
    width: percentage(($n * ($column-width + $gutter-width) - $gutter-width - ($padding * 2) - ($border * 2)) / $container-width);
    border-width: $border;
    padding: em($padding, $font-base) percentage($padding / $container-width);
}

/*FUNCTIONS
------------------------------------------------*/
@function em($target, $context: $font-base) {
    @if $target == 0 { @return 0 }
    @return $target / $context + 0em;
}

@function perc($width, $container-width: $max-width) {
    @return percentage($width / $container-width);
}

@function lh($amount: 1, $context: $font-base) {
    @return em($font-base-line-height * $amount, $context);
}

@function heading-line-height($size) {

    $line-height: $font-base-line-height;

    $match: false;
    @while $match != true {

        @if $size == $line-height {
            $match: true;
        } @else if  $size < $line-height {
            $match: true;
        } @else if $size > $line-height {
            $line-height: $line-height + $font-base-line-height;
        } @else {
            $match: true;
        }

    } 

    @return ($line-height / $size) + 0em;
}