21
votos
Aceito
Por que o Bootstrap 4 usa "rem" e "em" no lugar de pixels?
Basicamente é devida a acessibilidade e controle do layout do design system.
Usando medidas em REM / EM se o usuário mudar o tamanho da font root ele vai ter uma aumento homogêneo de todo o texto na ...
16
votos
Aceito
SASS e SCSS: por que usá-los em vez de CSS convencional?
Vou compartilhar o que conheço e algumas fontes sobre o assunto.
O que elas fazem exatamente?
LESS, SASS e SCSS são extensões do CSS, ou seja, de uma maneira bem simples, adicionam funcionalidades ao ...
9
votos
SASS e SCSS: por que usá-los em vez de CSS convencional?
Bom, podemos dizer que SCSS e SASS fazem tudo que o CSS deveria fazer e não faz. Aqui vai alguns exemplos:
Fácil manutenção
Imagine que tenho um site com uma determinada paleta de cores e preciso ...
7
votos
SASS e SCSS: por que usá-los em vez de CSS convencional?
Existe ainda um outro conceito que não foi abordado pelas outras resposta que é o aninhamento de seletores ou em inglês nested selector
Essa prática é muito interessante na hora de criar componentes ...
6
votos
Aceito
Inserir um background dentro de um triângulo no canto de uma div
Existem várias formas de fazer isso e a mais simples e mais crossbrowser ao meu ver é colocar dois backgrounds em uma div, o primeiro bg do fundo é a imagem, e por cima dela eu tenho um linear-...
6
votos
Aceito
Problema em implementar icone do font awesome pelo css
Acrescente isto no seu CSS:
font-weight: 900;
Pelo que vejo, esse caractere só está disponível nessa fonte bold. Não entendi o motivo, vai ver é porque ele é f0da :D
5
votos
Como fazer este efeito de transição usando CSS?
Ivan sim é possível resolver o problema só com CSS, mas vc tem que ter uma Estrutura de HTML + CSS que seja coerente.
Digo, vc vc vai precisar de regras como :focus + div ou :target ~ div etc, então ...
5
votos
Aceito
Qual é a maneira correta de utilizar o operador "%" no Sass?
% é feito para criar um "placeholder" de CSS, e para utiliza-lo vc precisa fazer um @extend. Veja a documentação oficial do placeholder https://sass-lang.com/documentation/style-rules/placeholder-...
4
votos
Aceito
Como fazer um grid automático para medidas exatas usando SCSS?
Essa fórmula vai fazer a progressão das colunas em PX até 1272px
$grid__cols: 12;
@for $i from 1 through $grid__cols {
.col-#{$i} {
flex-basis: (1272 / ($grid__cols / $i) ) * 1px;
}
}
OUTPUT
....
3
votos
Converter porcentagem em reais no input rage slider html5
Esse é bem mais um problema matemático que de informática, que pode ser resolvido com o seguinte cálculo:
x = valorMinimo + porcentagem/100 * (valorMaximo-valorMinimo);
Por exemplo, imagine que ...
3
votos
Ícone font awesome 5 não aparece ao ser chamado pelo css
Seu font-family está errado! Vcusou a Font Awesome 5 Free mas deveria ser a Font Awesome 5 Brands
body {
background-color: black;
color: #fff;
}
.phone {
position: relative;
color: ...
2
votos
Aceito
Animação que revela elemento da esquerda para a direita
Seu CSS está com um problema na construção dessa classe.
Isso:
.multi-steps > li:after:last-child
Deveria ser isso:
.multi-steps > li:last-child:after
Repare na posição do ::after
Outro ...
2
votos
Aceito
Bug no Safari de uma animação CSS com keyframes
Conforme conversado nos comentários da pergunta segue a resposta.
O Safari 12, conforme pode ser consultado no Caniuse, não precisa mais dos prefixos -webkit- nas animações, keyframes ou transition. ...
2
votos
Inserir um background dentro de um triângulo no canto de uma div
Pode usar a propriedade clip-path para exibir apenas uma parte do ::after. No exemplo abaixo recortei o ::after do elemento em forma de triângulo com 3 coordenadas. As coordenadas são responsivas em ...
2
votos
Centralizar um elemento com position absolute
Cara tentei simular aqui e aparentemente ele ficou alinhado, então tem algo a mais no seu código que está atrapalhando... Mas veja no exemplo abaixo que para centralizar um elemento absoluto vc tem ...
2
votos
Mudar de background VIDEO por tamanho de Tela?
Cara vc pode ter um simples @media para mostrar um e esconder o outro.
.mobile {
display: none;
}
@media (max-width:768px) {
.mobile {
display: block;
}
....
1
voto
Aceito
Usar bootstrap com sass de forma semântica e seletiva
Desculpe a resposta "jogada", mas nesse arquivo do Bootstrap vc pode apagar os @imports que vc não quer.
Depois que vc apagar os @imports que vc não quer vc precisa recompilar o .SCSS para gerar o ...
1
voto
SASS: Existem algum recurso para evitar repetições e linhas de códigos as variações de cores?
O Sass trabalha perfeitamente ao nosso favor para automatizar tarefas repetitivas. E para solucionar o problema de criação de classes, é preciso estabelecer alguns conhecimentos básicos.
Primeiro, ...
1
voto
Aceito
Dropdown em menu vertical com bootstrap 4
Para fazer o drop vc pode usar position:absolute, assim vc tira esse submenu do flow e ele não interfere nos outros elementos ao redor.
Segue o código da imagem acima:
.left {
position: ...
1
voto
Aceito
Error BOOTSTRAP SASS _is not a color for `darken'
Olha é difícil explicar o porque do erro sem saber o que vc fez ai. Mas a documentação ajuda um pouco a esclarecer as coisas... Provavelmente vc mudou alguma Chave Obrigatória
Por exemplo, nós ...
1
voto
Aceito
media querie scss
Uma maneira que eu encontrei de fazer isso, é utilizando @mixin e @for. Veja o código abaixo.
@mixin medias($media){
$x: 100/12;
$newWidth: $x;
@for $var from 1 to 13 {
.col-#{$...
1
voto
Aceito
DIV perder o alinhamento se está com um numero de linhas diferentes
Acrescente o vertical-align:top no seu CSS.
.div-project
{
background-color: #1d68a7;
display: inline-block;
border-radius: 12px;
padding: 10px;
text-align: left!important;
margin-bottom: ...
1
voto
Aceito
Como acessar o arquivo styles.scss de dentro de um componente do Angular
Você já definiu o projeto Angular como sass?
Você pode acessar a pasta do seu projeto, e digitar o seguinte comando.
ng set defaults.styleExt scss
Confira seu seu config está assim:
"defaults": {
...
1
voto
Aceito
Media queries não está aplicando os css conforme width do dispositivo
O @media rule deve vir após o estilo normal. Basta alterar a ordem:
.button-collapse{
background-color: transparent;
border: none;
color: white;
outline: none;
}
@media (min-device-width: ...
1
voto
Aceito
Página não carrega arquivo SCSS
Para podermos compilar o arquivo .scss para .css precisa ter instalado o Ruby (essa é uma das formas).
1.Verifique se já tem instalado:
ruby -v
se retornar algo como:
ruby 2.0.0p247 (2013-06-27 ...
1
voto
Problemas com atributo :not() do css
Cara eu acho que vc acabou complicando as coisas com o not() sem precisar.
Veja no exemplo abaixo como vc pode corrigir o problema apenas voltando com a cor do texto no span assim -webkit-text-fill-...
1
voto
Problema em implementar icone do font awesome pelo css
Conforme a documentação para vc usar no ::before vc tem que ajustar algumas coisas. Vc vai precisar usar o fontawesome.js e não o .css pois só vai funcionar com a font no formato SVG. Depois vc tem ...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
scss × 49css × 35
html × 17
sass × 13
css3 × 7
html5 × 6
javascript × 5
angular × 4
bootstrap-4 × 4
twitter-bootstrap × 3
ionic × 3
front-end × 3
node.js × 2
angularjs × 2
typescript × 2
css-hover × 2
font-awesome × 2
visual-studio × 1
sqlite × 1
variáveis × 1
mobile × 1
apache-cordova × 1
input × 1
matemática × 1
div × 1