Sass functions & mixins

Use our Sass mixins and functions to quickly create a custom layout css.

Gridset provides a gridset.scss file complete with Sass mixins and functions derived from your grid set measurements. Sass output is only available in your downloaded zip file. If you are already familiar with Sass, using the Gridset Sass output should be fairly straightforward, allowing you to quickly build layouts in CSS based on the grids you created without the need of any Gridset-generated classes. This means your HTML can stay completely semantic, and will make working with CMSs such as Drupal (in which adding classes to HTML is difficult) much easier.


The Gridset Sass output is divided into two types: mixins and functions:

  • Mixins output every style that an element would need to placed on grid, padded out or floated left or right. These generate the same styles that the regular Gridset CSS output would give you.
  • Functions output numeric values for specific measurements. The returned value can be a float (meaning that it is not rounded at all), or a float with a unit. You can use functions to grab measurements for your own custom mixins.

Before we look at each type in depth, you will need to note a few things:

  • Prefix is the prefix that you set for your grid when building your set. This is used to identify which grid’s measurements you want returned.
  • When passing arguments, use false for null arguments, so a span with no end would be: gs-span(x, 2), but a span with no end and a container would be: gs-span(x, 2, false, (1, 5))
  • Containers are optional. They should be used to augment the measurements for an element within another Gridset-based element. So an element spanning column 2 to 5 within an element spanning column 1 to 6 would be written gs-span(x, 2, 5, (1, 6)). A container must have a container start, but the container end is optional (in the case of a single column container).
  • Use IE flags when building styles for Internet Explorer 8 and below. You can use either 'ie' or 'true'. A span in IE would be: gs-span(x, 2, 3, false, ie) or gs-span(x, 2, 3, false, true)
  • For functions, setting display unit to true will return the unit with the measurement (ex: 30% or 300px). Default is false.
  • You will need to write your own media queries for different screen sizes. You can generate these based on your grid widths by using the gs-media function. This will only work in Sass versions 3.2 and up.

Mixins

  • gs-span(prefix, start, end, (container start, container end), IE flag)

    All of the styles you need to place your element on grid. Enter 'all' as start for 100% width items, and for one-column spans enter the column number as start. An IE flag of ‘ie’ or ‘true’ (without the quotes) will return special styles for Internet Explorer 8 and below. end and container are optional.

    Example usage:

    .element {
      @include gs-span(x, 4, 5);
    }
    
    .one-column-element {
      @include gs-span(x, 4);
    }
    
    .full-width-element {
      @include gs-span(x, all);
    }
    
    .nested-element {
      @include gs-span(x, 4, 5, (2, 6));
    }
    
    .ie-stylesheet-element {
      @include gs-span(x, 4, 5, false, ie);
    }
  • gs-pad(prefix, padding type, (container start, container end))

    All of the styles you need to add the different types of padding to an element. You can find an explanation of padding types in the section on Using the Gridset CSS Classes. container is optional.

    Valid padding types: pad, padfull, padin, padinfull

    Example usage:

    .element {
      @include gs-pad(x, padfull);
    }
  • gs-float(prefix, direction, (container start, container end))

    All of the styles you need to float an element in one direction and give it the proper amount of margin in the opposite direction. container is optional.

    Valid directions: left, right

    Example usage:

    .float-right-element {
      @include gs-span(x, 4);
      @include gs-float(x, right);
    }
  • gs-media(prefix, type)

    Will generate the appropriate media query for a particular grid. (Sass versions 3.2+ only). A type of “min” will output a media query for the lowest width the grid applies, “max” will output a media query for the maximum width a grid applies, and “min-max” will use both (bookending the query).

    Valid types: min, max, min-max

    Example usage:

    @include gs-media(x) {
      .element {  
        @include gs-span(x, 4, 5);
      }
    }

Functions

  • gs-grid(prefix)

    Returns a list all of column widths for a grid.

    Example usage:

    .element {
      $columns: gs-grid(x);
      width: #{nth($columns, 4) + '%'};
    }
  • gs-pxcols(prefix)

    Returns a list of all column widths in a grid that are set to fixed pixel width.

    Example usage:

    .element {
      $pxcolumns: gs-pxcols(x);
      width: #{nth($pxcolumns, 4) + 'px'};
    }
  • gs-gutter(prefix, (container start, container end), display unit)

    Returns the exact gutter width for a grid as a numeric value. container is optional.

    Example usage:

    .element {
      width: gs-gutter(x, false, true);
    }
  • gs-width(prefix, start, end, (container start, container end), display unit)

    Returns the exact width measurement of the span of columns between start and end as a numeric value. end and container are optional.

    Example usage:

    .element {
      width: gs-width(x, 4, 5, false, true);
    }
  • gs-marginleft(prefix, start, (container start, container end), display unit)

    Returns the exact left offset of a span starting at start as a numeric value. container is optional.

    Example usage:

    .element {
      margin-left: gs-marginleft(x, 4, false, true);
    }
  • gs-adjust(prefix, measurement, (container start, container end), display unit)

    Returns a nested measurement adjusted for the width of a container.

    Example usage:

    .element {
      width: gs-adjust(x, gs-gutter(x), (1, 4), true);
    }