Fundação - SASS Mixins

A saída CSS final é construída usando o mixin. O mixin pode ser usado para construir sua própria estrutura de classe a partir desses componentes. A seguir está o mixin usado para construir a saída CSS final.

grade-coluna

coluna de grade é criada.

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

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$columns Define a largura da coluna. A função grid-column () é referenciada para os valores disponíveis.	Misturado	$ grid-column-count
2	$gutter Crie espaço entre as colunas.	Número	$ grid-column-gutter

grade-coluna-linha

Inclui classe de linha e coluna de forma equivalente ao mesmo elemento. ogrid-col-row() é a função assumida.

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

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$gutter Define a largura em ambos os lados da linha da coluna das calhas.	Número	$ grid-column-gutter

grid-column-collapse

As calhas colapsam na coluna depois que o preenchimento é removido. A função assumida égrid-col-collapse()

@include grid-column-collapse;

grade-coluna-não colapsar

As calhas são recolhidas em uma coluna depois de adicionar novamente o preenchimento. A função assumida égrid-col-uncollapse()

@include grid-column-uncollapse;

layout de grade

Define os tamanhos dos elementos filhos para que o número especificado em $n aparece em cada linha.

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

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$n Número de elementos a serem exibidos por linha.	Número	Nenhum
2	$selector Seletor (es) a ser usado para elementos filho.	Corda	'.coluna'

grade-coluna-posição

As colunas são reorganizadas. A função assumida égrid-col-pos().

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

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$position Define a direção para mover a coluna, dependendo da contagem de colunas especificada. Os números negativos empurram a coluna para a esquerda e o número positivo para a direita.	Número	Nenhum

grade-coluna-unposition

A posição da coluna é redefinida. A função assumida égrid-col-unpos().

@include grid-column-unposition;

grade-coluna-deslocamento

A coluna é deslocada para a direita por $ncolunas. A função assumida égrid-col-off().

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

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$n Qualquer valor é passado aceito pelo mixin grid-column ().	Número ou lista	Nenhum

grid-column-end

O comportamento padrão da última coluna em uma linha está desabilitado, o alinhamento com a borda oposta. A função assumida égrid-col-end().

@include grid-column-end;

contexto de grade

Para usar colunas diferentes, o comportamento das colunas definidas dentro deste mixin deve ser alterado.

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

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$columns Número de colunas a serem usadas.	Número	Nenhum
2	$root Dentro do mixin, os seletores serão aninhados dentro do seletor pai quando for definido como falso.	boleano	falso

grade

Uma linha de grade é criada.

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

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$columns Define o número de colunas para esta linha.	Número	Nulo
2	$behavior O estilo de grade padrão é modificado.	Palavras-chave	Nulo
3	$width Largura máxima da linha.	Número	$ grid-row-width
4	$cf Se deve incluir o clearfix ou não.	boleano	verdadeiro

grade-coluna-tamanho

A largura da coluna da grade está definida.

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

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$width A função grid-column () aceita qualquer valor passado. Defina a largura da coluna.	Número ou lista	$ grid-column-count