Perguntas com a tag [scss]
A tag scss não tem possui recomendações de uso.
52
perguntas
-1
votos
0respostas
6 visitas
Como Utilizar Sass com Angular Material
Estou tentando utilizar a especificação Sass num projeto Angular 9, mas não estou conseguindo utilizar a estilização nos componentes.
Criei um componente simples HTML:
<mat-card class="card-...
1
voto
1resposta
21 visitas
background-size: cover. Existe alguma forma de acrescentar um valor em porcentagem?
Quero adicionar um hover event que aumente ligeiramente o tamanho da imagem que estou usando de background, porém pra mantê-lo responsivo preciso do background-size:cover.
segue um trecho do código ...
0
votos
1resposta
38 visitas
Como estilizar texto dentro da tag code?
Eu gostaria de deixar um trecho de código estilizado assim como é nas ide mas não sei como fazer isso, procurei aqui e não encontrei nada a respeito, eu gostaria de deixar algo parecido com o que está ...
0
votos
0respostas
16 visitas
Formato botão CSS [duplicada]
Olá pessoal, alguém sabe se existe alguma forma de fazer esse tipo de formato via css? com as extremidades de um lados um pouco chanfrado(menor), como acima no print.
Obs: Sem ser usando background.
...
0
votos
0respostas
22 visitas
Responsividade em layout
O layout desktop possui uma timeline horizontal e quando acessar pelo mobile, a timeline deve ficar vertical.
Código HTML:
<section class="status">
<div class="...
-2
votos
1resposta
36 visitas
Erro ao importar Sass module no Angular
Quero usar o MDC Image List mas ao importar no style .scss de algum módulo do Angular
@use "@material/image-list/mdc-image-list"; não compila com seguinte erro:
Module build failed (from ./...
1
voto
1resposta
23 visitas
Como fazer um grid automático para medidas exatas usando SCSS?
Tenho o seguinte exemplo mas em porcentagem:
$grid__cols: 12;
@for $i from 1 through $grid__cols {
.col-#{$i} {
flex-basis: (100 / ($grid__cols / $i) ) * 1%;
}
}
Que pode ser testado aqui, ...
1
voto
1resposta
36 visitas
Alinhamento do Text ao Input
Boa noite pessoal, espero que estejam todos bem.
Estou tendo dificuldade em alinhar o Text em cima do Input.
HTML
<div class="form-group2 col-md-4">
<label for="...
1
voto
1resposta
117 visitas
Usar bootstrap com sass de forma semântica e seletiva
Quando se fala em Sass e Bootstrap a recomendação/vantagem que mais se encontra por ai é, "importe apenas o que você vai usar, assim seu css final será menor e conterá apenas as partes do bootstrap ...
0
votos
0respostas
44 visitas
Imagem responsiva com Javascipt
Possuo um container com height fixo em 500px, ele vai aceitar imagens em variadas resoluções, e preciso que elas cubram sempre o tamanho todo do container sem perder proporção, o método que conseguir ...
1
voto
0respostas
24 visitas
Não consigo encontrar maneira de remover o espaçamento do meu CSS [duplicada]
Eu voltei recentemente a tentar desenvolver a minha aprendizagem em web development e tentei desenvolver um curriculo online para eventualmente trabalhar na área. Como não sou muito bom em CSS ainda, ...
4
votos
1resposta
40 visitas
Qual é a maneira correta de utilizar o operador “%” no Sass?
Estou fazendo alterações em uma página que foi feita utilizando Sass, e ainda sou bem iniciante com o framework, e me deparei com o seguinte código:
%cf {
&:after {
content: '';
...
0
votos
0respostas
23 visitas
Transpilar no desenvolvimento ou só no build
Preciso transpilar um projeto pois usa scss, typescript e Es6
O correto é fazer o bundle somente pra o build ou posso/devo rodar uma task toda vez que eu alterar o código?
Gostaria de saber como é ...
0
votos
0respostas
27 visitas
Como utilizar overlay em um dialog dentro de um window no Kendo UI?
Atualmente utilizo o Kendo Ui Angular
Atualmente estou tentando utilizar dentro de uma window um componente que chama um dialog, porém meu dialog não está aplicando o efeito de opacidade de overlay, ...
1
voto
0respostas
33 visitas
Colocar estilo num input[type=checkbox] contendo só parte do id do input [duplicada]
Eu tenho um estilo em CSS assim:
input[type="checkbox"] {
box-shadow:none;
background-color: #f5f5f5;
}
Queria colocar num checkbox que tem um id específio:
<input type='checkbox' id='...
-1
votos
1resposta
42 visitas
Converter porcentagem em reais no input rage slider html5 [fechada]
Preciso converter o meu input range de porcentagem para dinheiro sendo que o valor minimo deve ser R$170,00 e o máximo R$ 5.000,00 tentei mexer no script para converter mas ele fica dando erro segue ...
1
voto
1resposta
45 visitas
SASS: Existem algum recurso para evitar repetições e linhas de códigos as variações de cores?
Situação problema
Estou criando uma paleta de cores que variam muito as suas referências, sendo de 10% da cor base para baixo. Por exemplo:
$primary: #0069FF;
Uma subtração de 10% desse valor é:
$...
-1
votos
2respostas
49 visitas
Mudar de background VIDEO por tamanho de Tela?
Como utilizar background video diferentes por tamanho de tela ,
Desktop seria um <video>
Mobile seria outro <video>
Projeto em Angular ..
<video playsinline="playsinline" ...
1
voto
1resposta
320 visitas
Dropdown em menu vertical com bootstrap 4
Preciso fazer um menu vertical seguindo esse layout porem estou com dificuldades de fazer o menu abrir um dropdown estou usando bootstrap 4 segue meu código + a imagem do layout de como deve ficar.
...
0
votos
1resposta
44 visitas
Elementos de uma Timeline quebrando linha
tudo bem?
Estou tentando fazer uma timeline com scroll, mas não estou conseguindo fazer com que os elementos da timeline entrem dentro da div ao atingir o tamanho máximo dela, para que assim essa ...
5
votos
0respostas
147 visitas
Retornar elemento a posição inicial em hover css
Estou fazendo uma animação em uma logo, onde cada letra vai para um lado e quando eu passar o mouse na div onde ela está, todas as letras devem voltar ao valor inicial, assim formando a logo.
Até ai ...
1
voto
1resposta
68 visitas
Bug no Safari de uma animação CSS com keyframes
No safari Versão 12.1 (14607.1.40.1.4), ocorre um bug, o efeito acontece, porém dá um erro estranho, o elemento que sofreu o evento parece retroceder, a posição inicial do translate3d, diferente do ...
2
votos
0respostas
50 visitas
Media Queries para identificar notch
Alguém tem uma solução completa para identificar todos os celulares que possuem o tal do "notch" nas versões existentes do mercado? Atualmente eu estou utilizando esses estratégias, mas ainda estou ...
5
votos
2respostas
67 visitas
Inserir um background dentro de um triângulo no canto de uma div
Estou a desenvolver um portfólio em angular, mas tenho uma dúvida em SCSS. Tinha o interesse em criar algo que não costumo ver muito em portfólios, inserir o background do portfólio apenas no canto ...
9
votos
1resposta
950 visitas
Por que o Bootstrap 4 usa “rem” e “em” no lugar de pixels?
Como se pode ver aqui e aqui, o Bootstrap 4 usa as unidades rem e em ao invés de usar em px.
Trecho do código usando a unidade rem:
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$...
2
votos
1resposta
1mil visitas
Como fazer este efeito de transição usando CSS?
Como fazer uma transição com CSS puro, sendo que no layout final da transição terei 2 boxes na lateral esquerda.
A transição:
Ao carregar a página, terá apenas um box com informações de avaliação. ...
0
votos
0respostas
29 visitas
Css para tablet no ionic 4
Boa tarde,
Como posso fazer um css para celular e tablet? preciso separar, prq em determinada tela o menu deve ser apresentado e em outra não.
1
voto
1resposta
415 visitas
Ícone font awesome 5 não aparece ao ser chamado pelo css
Pessoal estou usando fontawesome 5 e alguns icones não aparecem quando eu chamo eles pelo css segue meu código e print da tela de como o icone está sendo exibido.
HTML:
<link rel="stylesheet" ...
0
votos
1resposta
70 visitas
Como criar um array de variáveis com scss no VS community
Bom dia, tenho um projeto no Ionic e nele posso configurar uma série de variáveis
$colors: (
/*-CINZA: */ cinza1: #595959, cinza2: #7F7F7F, cinza3: #A5A5A5, ...
-2
votos
1resposta
43 visitas
media querie scss
Estou aprendendo sass e estou fazendo o grid baseado no do bootstrap, com classes col- diferentes para cada tamanho de largura da tela, mas não entendi como faz isso no sass de um jeito mais reduzido, ...
0
votos
1resposta
426 visitas
Utilizar position absolute para deixar elemento sempre no bottom mas sem sobrepor outro elemento
Atualmente eu tenho uma sidenav feita com Angular Material.
Eu tenho uma listagem com menu e submenus, e no final tenho um logo.
Meu problema é que quando todos os menus dentro do meu sidenav são ...
0
votos
2respostas
241 visitas
Centralizar um elemento com position absolute
Estou tentando centralizar um botão no meu card.
Eu gostaria de obter esse resultado:
precisa ser com position absolute pois os outros cards as vezes possuem descrição maior e o botão "Ver detalhes" ...
2
votos
0respostas
57 visitas
Estilo não carregado em servidor em aplicação node.js
estou com uma questão.
Estou utilizando o github pages para desenvolver um site utilizando o node.js. Em meu host, os estilos carregam e eu os consigo visualizar normalmente no navegador.
No entanto, ...
0
votos
1resposta
229 visitas
Background color angular
Como faço, em angular 7, uma background-color do body diferente da página que estou exibindo?
Exemplo:
Página login: background verde
Página home: background azul
1
voto
1resposta
75 visitas
Error BOOTSTRAP SASS _is not a color for `darken'
Este erro retorna quando eu ordeno em meu app.scss estes arquivos de @import, utilizando SASS/bootstrap@4.3.1 em um Mac. Preciso entender onde está o erro, se ao inverter a ordem (variaveis ...
0
votos
1resposta
50 visitas
Carregar scss a partir de arquivo js
Estou trabalhando em um site estático, onde tenho a seguinte estrutura de diretórios:
/
/src
exemplo.scss
exemplo.js
index.html
webpack.config.js
No meu exemplo.js eu dou um require('...
1
voto
0respostas
23 visitas
Erro no uso de @extends usando sass placeholders
@each $direction in $directions {
%u-no-padding-#{$direction}{padding-#{direction}: 0;}
%u-half-padding-#{$direction}{padding-#{direction}: $layout-module-size / 2;}
%u-default-padding-#{$...
2
votos
1resposta
54 visitas
Animação que revela elemento da esquerda para a direita
Tenho um <mat-divider></mat-divider> e preciso fazer com que ele seja revelado da esquerda para a direita, como se fosse uma barra de progresso sendo preenchida
Alguém tem algum exemplo ...
0
votos
1resposta
52 visitas
DIV perder o alinhamento se está com um numero de linhas diferentes
Estou tentando alinhar algumas DIV's mas percebi que quando a DIV que está do lado da outra não está com o mesmo numero de linha no <p> ela simplesmente perde o alinhamento, estou desenvolvendo ...
0
votos
1resposta
83 visitas
Impedir que o pseudo elemento ::before receba os efeitos de hover aplicados ao seu pai
Olá, estou aplicando hover a um elemento, e este contem um pseudo elemento before, no qual está recebendo os efeitos de hover de seu elemento pai.
Esta imagem mostra o problema:
Veja que o elemento ...
1
voto
1resposta
69 visitas
criar variavel com @for no scss
bom dia a todos!!
galera eu preciso criar variáveis de cores no SCSS e estou fazendo da seguinte forma:
@for $i from 1 to 50{
$corClara{$i}:red;
}
mas não to conseguindo fazer funcionar...o koala,...
0
votos
2respostas
56 visitas
Cálculo de top no scss
Tenho um container que possui um height variável, dependendo da resolução do computador.
Preciso calcular quando de top devo utilizar para que o conteúdo fique centralizado.
Tentei algo como:
....
0
votos
1resposta
148 visitas
Como acessar o arquivo styles.scss de dentro de um componente do Angular
Estou trabalhando com Angular (projeto gerado pelo @angular/cli), e a estrutura do meu projeto está abaixo:
src
| - app
| - foo
| - foo.component.js
| - foo.component....
0
votos
1resposta
73 visitas
Imagem de fundo dinamicamente
Tenho uma lista de produtos, clicando em algum deles, redireciona para outra página mostrando apenas o conteúdo desse item. Eu recebo a Imagem, mas gostaria que ela ficasse como plano de fundo, ou ...
1
voto
0respostas
147 visitas
Não consigo inserir icone dentro de uma imagem com after ou before
Preciso implementar um icone no :after desse campo de radio pois quero que fique parecido com o da imagem eu consegui inserir o css normal só não estou conseguindo implementar o icone que ficaria no ...
2
votos
1resposta
58 visitas
Media queries não está aplicando os css conforme width do dispositivo
Estou tentando criar um layout responsivo. Alguns elementos ele está aplicando o css conforme citado no media queries, alguns outros está pegando css do web. Como posso concertar pra ele pegar o css ...
1
voto
1resposta
325 visitas
Página não carrega arquivo SCSS
Estou aprendendo desenvolvimento web e comecei mexer com SCSS em um layout porém o navegador não está puxando o mesmo. Ele está sendo chamado junto com o arquivo do CSS que está funcionando ...
1
voto
1resposta
70 visitas
Problemas com atributo :not() do css
estou com um problema estou editando um h2com css e dentro desse h2 tem um span porem queria aplicar o estilo no h2porem não quero que o estilo se aplique no meu span estou usando o seletor :not(span) ...
2
votos
2respostas
2mil visitas
Problema em implementar icone do font awesome pelo css
estou com um problema em carregar minha font via css estou usando o font awesome 5 eu estou implementando os icones via content no css porém o icone que eu quero usar não está funcionando esse seria o ...
12
votos
3respostas
7mil visitas
SASS e SCSS: por que usá-los em vez de CSS convencional?
Muito ouço falar em SASS e SCSS, mas não sei exatamente como essas ferramentas funcionam. Apenas sei que são geradores de CSS(?).
Encontrei uma pergunta relacionada aqui mas ela não trata da questão ...