Definindo ajudantes de cores do aplicativo com Sass
Sou um grande fã de classes “utilitárias” de linha única em CSS. Eles tornam a escrita do seu HTML mais rápida e também significam que os componentes têm menos probabilidade …
Continuar lendoscss
Script para renomear todos os arquivos .css.sass obsoletos para .sass
Se você seguir a tradição do Rails e nomear seus arquivos SASS como foo.css.sass, você deve ter notado alguns avisos de depreciação na compilação após atualizar o sass-rails. O .css …
Continuar lendoSass vs SCSS
SCSS é a sintaxe mais recente e mais usada. É mais semelhante ao css normal (“… toda folha de estilo CSS3 válida também é um SCSS válido.”). SASS: $blue: #3bbfce$margin: …
Continuar lendoUse sass-convert para indentar seu código Sass / SCSS
Você pode usar sass-convert para recuar o código SCSS convertendo de SCSS para SCSS. Uso: sass-convert -F scss -T scss –indent 4 from.scss to.scss (2 é o padrão se não …
Continuar lendoHabilitar mapas de origem CSS no Compass
Eu estava conversando com um colega de trabalho esta manhã sobre mapas de origem CSS. Eu nunca consegui fazer o Compass criar mapas de origem para mim. Tentei novamente esta …
Continuar lendoAbsurdly Abstract @ font-face PT.2 – estilo da fonte
6 meses atrás eu criei um protip chamado Absurdly Abstract @ font-face mixin com a intenção de tornar mais fácil incluir fontes de marca. No final daquele artigo, observei que …
Continuar lendoMarcação responsiva e semântica usando Twitter Bootstrap e Sass / SCSS
Enquanto trabalhava no front-end para um site de conferência futura usando Twitter Bootstrap (via bootstrap-sass ), tentei usar os mixins auxiliares de marcação semântica padrão (makeRow () e makeColumn ()), …
Continuar lendoPor que sass (scss) é melhor do que menos
História curta SASS tem modo de relógio propriedades aninhadas mais fácil de depurar http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/ https://addons.mozilla.org/en-us/firefox/addon/firesass-for-firebug/ ! sinalizador padrão para variáveis @extend para seletores de herança e espaço reservado @if, @for, …
Continuar lendoBlur Mixin
Mixin de desfoque simples, funcionará no Chrome 28+, Safari 6+, IE6-9, Firefox 10+ @mixin blur($px: 0) { -webkit-filter: blur(#{$px}px) !important; -ms-filter: blur(#{$px}px) !important; -moz-filter: blur(#{$px}px) !important; filter: url(“data:image/svg+xml;utf8,<svg >); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=’#{$px}’);}
Continuar lendoVariáveis de seletor comuns
Se você usa SASS, pode ser muito útil ter variáveis que dão acesso a seletores comuns como: .module { background-color: #ff0000; &:hover, &:focus { background-color: #ffffff; } .ie7 &, .ie8 …
Continuar lendoRedes SASS / SCSS. Está em nosso sangue.
Então, uh, temos usado essas grades desde que sabemos, e os designers (pelo menos aqui, na Indonésia) ainda não mudaram de seus velhos noventa e sessenta anos. E escrever aulas …
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 lendoTexto girado em SCSS com IE8 +
Gire o texto em todos os navegadores até o IE8. Você só precisa alterar uma variável graças ao SCSS. $rotateDeg: -10;$rotateRad: $rotateDeg * (3.14159 / 180);-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(SizingMethod=’auto expand’, M11=#{$rotateRad}, M12=#{$rotateRad …
Continuar lendoUm melhor plugin de tabelas de rolagem
Hoje eu precisava exibir uma tabela que pudesse ter entre 0 e algumas centenas de colunas … e fazer isso de uma forma que mantivesse a “chave primária” visível. Peguei …
Continuar lendoConsultas @mídia incríveis com Sass e @content
Sass tem um recurso muito útil que geralmente não é amplamente conhecido: @content . Você quase pode pensar em algo @contentparecido yield– isso nos permite definir um mixin Sass que …
Continuar lendoConsultas de mídia Sass Mixin
Aqui está um media queries Sass mixin que eu costumo usar no projeto. Consultas de mídia responsivas $phone : ‘(max-width: 480px)’;$tablet-portrait: ‘(max-width: 767px)’;$tablet-landscape: ‘(min-width: 768px) and (max-width: 979px)’;$large-desktop: ‘(min-width: 1200px)’;$non-retina: …
Continuar lendo