Este é um mixin pequeno e útil para definir facilmente a largura e a altura de seus elementos.
Pode ser usado com qualquer tipo de unidade ou até mesmo com um nome de imagem para obter as dimensões da imagem.
O uso mais simples seria algo como:
@include size(40px);Isso irá compilar para:
width: 40px;
height: 40px;Outro exemplo de uso seria com dois parâmetros ( <width>, <height>):
@include size(70%, 200px);A grande parte desse mixin é a capacidade de passar uma imagem e definir largura e altura com base nas dimensões da imagem; Digamos que eu tenha uma imagem de plano de fundo chamada bg.png, com 300px de altura e 200px de largura. Agora quero criar um formulário que terá esta imagem como fundo e terá as mesmas dimensões que possui.
Para fazer isso, eu normalmente verificaria as dimensões da imagem e definiria a largura e a altura do formulário manualmente. Usando este mixin, tudo que tenho que fazer é:
form {
@include size('bg.png');
}E a bússola faria o resto!
Edit: Eu queria colar o mixin aqui, mas parece que @else se transforma em um link de referência do usuário do coderwall, então, até que isso seja corrigido, eu o adicionei como um Gist
e, finalmente, aqui está: