Mixins
Para fazer uso dos mixins, é necessário importar o o Sass do Ugla.
#
Cross BrowserEste mixin adiciona vendor prefix nos atributos ou nos valores. Ao implementar o mixin é possível selecionar onde deve ser adicionado o prefix.
#
Exemplo#
Resultado#
Exemplo#
Resultado#
FontEste mixin adiciona os atributos font-size e font weight;
#
Exemplo#
Resultado#
MobileO conteúdo adicionado dentro do mixin Mobile será renderizado apenas em dispositivos com resolução inferior a 768px.
#
Exemplo#
Resultado#
TabletO conteúdo adicionado dentro do mixin Tablet será renderizado apenas em dispositivos com resolução entre a 769px e 980px.
#
Exemplo#
Resultado#
DesktopO conteúdo adicionado dentro do mixin Tablet será renderizado apenas em dispositivos com resolução superior a 1024px.
#
Exemplo#
Resultado#
Safari OnlyEste mixin adiciona um hack css exclusivo para Safari, use apenas quando as regras padrões de estilização não funcionam 100% no Safari.
#
Firefox OnlyEste mixin adiciona um hack css exclusivo para Firefox, use apenas quando as regras padrões de estilização não funcionam 100% no Firefox.
#
TruncateEste mixin trunca textos e adiciona os ...
, é possível truncar na primeira linha ou, informar em qual linha quer que seja adicionado o truncate.
#
Exemplo#
ResultadoImportante
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo...
#
Alternativas ao TruncateExiste também duas classes que podem ser adicionadas aos elementos HTML para truncar:
#
TruncateAdicione a classe .truncate
para truncar a frase e com uma única linha.
#
Trucate TwoAdicione a classe .truncate-two
para truncar a frase na segunda linha.