Foundation - SASS Mixins

The final CSS output is build using the mixin. The mixin can be used to build your own class structure out of these components. Following are the mixin used to build the final CSS output.

grid-column

grid column is created.

@include grid-column($columns, $gutter);

Sr.No. Name & Description Type Default Value
1

$columns

Sets width of the column. grid-column() function is referred for the available values.

 Mixed $grid-column-count
2

$gutter

Create space between the columns.

 Number $grid-column-gutter

grid-column-row

Includes row and column class equivalently to same element. The grid-col-row() is the assumed function.

@include grid-column-row($gutter);

Sr.No. Name & Description Type Default Value
1

$gutter

Sets width on the either side of the column row of the gutters.

 Number $grid-column-gutter

grid-column-collapse

The gutters collapse on the column after the padding is removed. The assumed function is grid-col-collapse()

@include grid-column-collapse;

grid-column-uncollapse

The gutters un-collapse on a column after re-adding the padding. The assumed function is grid-col-uncollapse()

@include grid-column-uncollapse;

grid-layout

Sets sizes for the child elements so that the number specified at $n appears in each row.

@include grid-layout($n, $selector);

Sr.No. Name & Description Type Default Value
1

$n

Number of elements to display on per row.

 Number None
2

$selector

Selector(s) to use for child elements.

 String '.column'

grid-column-position

Columns are rearranged. The assumed function is grid-col-pos().

@include grid-column-position($position);

Sr.No. Name & Description Type Default Value
1

$position

Sets direction to move the column depending upon the specified column count. The negative numbers push the column to left and positive number to the right side.

 Number None

grid-column-unposition

The column position is reset. The assumed function is grid-col-unpos().

@include grid-column-unposition;

grid-column-offset

Column is offsets to the right by $n columns. The assumed function is grid-col-off().

@include grid-column-offset($n);

Sr.No. Name & Description Type Default Value
1

$n

Any value is passed accepted by the grid-column() mixin.

 Number or List None

grid-column-end

The default behavior of the last column in a row is disabled that is aligning to the opposite edge. The assumed function is grid-col-end().

@include grid-column-end;

grid-context

To use different columns, the behavior of the columns defined inside this mixin should be changed.

@include grid-context($columns, $root) { }

Sr.No. Name & Description Type Default Value
1

$columns

Number of columns to use.

 Number None
2

$root

Inside the mixin the selectors will nest inside the parent selector when it is set as false.

 Boolean false

grid-row

A Grid row is created.

@include grid-row($columns, $behavior, $width, $cf) { }

Sr.No. Name & Description Type Default Value
1

$columns

Sets number of columns for this row.

 Number Null
2

$behavior

The default grid style is modified.

 Keywords Null
3

$width

Maximum width of row.

 Number $grid-row-width
4

$cf

Whether to include the clearfix or not.

 Boolean true

grid-column-size

Grid column width is set.

@include grid-column-size($width);

Sr.No. Name & Description Type Default Value
1

$width

The grid-column() function accepts any passed value. Set width of the column.

 Number or List $grid-column-count
foundation_the_grid.htm
Advertisements