Compass Face Mixin
Mixin de ajudante que gosto de usar em meus projetos. /* =Font Embed */@mixin face( $name, $src, $weight: normal, $style: normal, $eot: true ) { $eotFont: false !default; @if $eot …
Continuar lendoEtiqueta: mixin
Sass mixin para rem tamanho de fonte e altura de linha com px fallback
@mixin font-size($sizeValue: 16, $line: $sizeValue * 1.5) { font-size: ($sizeValue) + px; line-height: ($line) + px; font-size: ($sizeValue / 16) + rem; line-height: ($line / 16) + rem;}
Continuar lendoFont Face Generator
Recentemente, converti um projeto de Ruby Sass and Compass para libsass. O mixin Compass font-faceestava sendo usado para produzir as @font-faceregras. Já que não queria ter que escrever @font-faceregras individuais …
Continuar lendoSASS ClearFix Mixin
CSS Clear FIx Mixin para SASS # style.scss@mixin clearFix(){ &:before, &:after{ content: ” “; display: table; } &:after{ display: block; clear: both; height: 1px; margin-top: -1px; visibility: hidden; } &{ …
Continuar lendoGrade responsiva simples com SCSS
É muito simples criar sua própria grade com SCSS. Dê uma olhada nesta dica! // Variables$cols: 12;$max-wrapper-width: 920px;$gutter-width: 20px;// Mixin@mixin col($col) { width: (($max-wrapper-width – $gutter-width*($cols/$col – 1))/($cols/$col))/$max-wrapper-width*100%;}// Loop to …
Continuar lendobackground / color / conditional / else / foreground / gradient / if / lightness / mixin / operator / sass / scss / test / text
Teste a luminosidade da cor com condicionais Sass
Já quis testar a leveza de uma cor com Sass? Você pode fazer isso. Um exemplo de caso de uso seria um mixin para padrões de botão. Teste a claridade …
Continuar lendoMixins em JavaScript – uma maneira simples
Como em meu protocolo anterior , vou apresentar a função auxiliar ‘ex’ primeiro: function ex (destination, source) { var p; for (p in source) { if (source.hasOwnProperty(p)) { destination[p] = …
Continuar lendoClearfix SASS Mixin
// http://nicolasgallagher.com/micro-clearfix-hack/@mixin clearfix {// For modern browsers &:before, &:after { content:” “; display:table; } &:after { clear:both; } // For IE 6/7 (trigger hasLayout) & { *zoom:1; }}
Continuar lendoMixin de transição com vários prefixos de fornecedores
Este Mixin aproveita cada loop do Sass para cobrir vários prefixos de fornecedores e tornar mais fácil incluir transições com um único include. Foi escrito para ser limpo e pequeno. …
Continuar lendoescala de cinza para todos
este mixin funciona no Explorer também @mixin grayscale filter: url(“data:image/svg+xml;utf8, <svg >) filter: gray -webkit-filter: grayscale(100%)
Continuar lendoCSS3 Background Mixins
Tenho usado extensivamente os mixins SASS para acelerar a edição de CSS para projetos pessoais e externos. Mixins não apenas tornam mais fácil incluir um pouco de CSS em seu …
Continuar lendoConverter PX em EM em SCSS
Ao desenvolver sites responsivos, é importante usar uma unidade não absoluta. Em é perfeito para isso, pois é relativo ao tamanho da fonte de base. Se, como eu, você cresceu …
Continuar lendoCSS Mixin para Jade
O compilador Jade HTML deve simplificar a criação de um layout HTML. Criar elementos com muitos atributos, entretanto, é demorado. É tão fácil escrever o próprio elemento. Aqui está uma …
Continuar lendoUsando @ at-root Sass mixin
Menu com comportamento de item ativo: <body class=”item1″> <ul> <li class=”item1″>Item 1</li> <li class=”item2″>Item 2</li> </ul></body> Sass Mixin: =in($name) @at-root #{$name} & @content Uso de Sass: ul li &.item1 color: …
Continuar lendoMixin de raio de borda SCSS útil
Gere propriedade CSS border-radius com prefixos de navegadores definidos, incluindo apenas um mixin SCSS (ou SASS). Demonstração em CodePen: http://codepen.io/Simek/pen/Frxhq Upss … O código aqui está quebrado, então copie-o do …
Continuar lendoRazão intrínseca menos mixin
Em 2009, Thierry Koblentz escreveu sobre Intrinsic Ratios , especificamente no que diz respeito a vídeos. Agora eles são usados em qualquer lugar, ou deveriam ser, graças ao RWD. Eu …
Continuar lendo