Perguntas com a tag [sass]

Utilize esta tag quando a pergunta se refere a algum recurso, informação ou problema relacionado exclusivamente ao pré-processador Sass. Sass é um pré-processador de folhas de estilo para auxiliar na produtividade e manutenção do código CSS. É uma extensão do CSS que adiciona recursos como regras aninhadas, variáveis, mixins e extensões de classe. Isso permite aos desenvolvedores escrever CSS estruturados, gerenciáveis e reutilizáveis.

Filtrar por
Ordenado por
Com tags
0 votos
0 respostas
17 visitas

erro na instalção do sass [fechada]

ao tentar instalar o sass pelo node.js , utilizando npm retornou o seguinte erro npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT npm ERR! network request to https://registry....
0 votos
0 respostas
9 visitas

Problemas ao usar sass em um projeto com next.js

estou com problemas o projeto estava funcionando até eu colocar o sass isntalei o pacote normalmente e mesmo assim não funciona está apresentando o seguinte erro: ready - started server on 0.0.0.0:...
0 votos
0 respostas
27 visitas

Erro com o sass-loader do webpack

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/...
0 votos
0 respostas
12 visitas

Erro ao criar um Toggle Theme Dark Mode

Rapaziada to tentando fazer um switch theme utlizando html sass, só que não funciona. Criei a CLASSE dentro um arquivo externo VARIABLE.SCSS, e parece que não tá conseguindo puxar ela. inserir a ...
0 votos
0 respostas
32 visitas

O que faz o navegador sobrescrever as propriedades de um seletor CSS pelo mesmo seletor desatualizado?

Estou iniciando os estudos com Sass e Scss e estou tendo alguns problemas para visualizar as alterações do código no navegador. Quando eu compilo o arquivo .scss as propriedades são atualizadas no ...
-1 votos
1 resposta
85 visitas

Problemas ao importar imagens em .sass

Estou com um problema estranho para importar imagens. .banner{ background: url(../../imagens/banner.jpeg); } No formato acima funciona corretamente em um arquivo .scss Mas em um arquivo .sass não ...
-6 votos
1 resposta
33 visitas

Imagem se sobrepõe com menu aberto [fechada]

Boa noite a todos. Estou fazendo meu portfólio, e percebi que quando abro o menu lateral, uma imagem se sobrepõe. Desse jeito: Aqui está meu CSS (fiz ele com o Sass): .sessao-formacoes { background-...
1 voto
1 resposta
39 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
1 resposta
230 visitas

Aninhamento (nesting) é uma funcionalidade especifica do SASS?

Acabei de terminar um curso de Bootstrap e fiquei com uma dúvida: o aninhamento (nesting) é uma funcionalidade específica do SASS? Pelo o que eu entendi aqui, sim. Digo isso, porque ao usar Media ...
1 voto
1 resposta
53 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, ...
  • 12,2mil
0 votos
1 resposta
237 visitas

Quebrar linha com <img> e <p> dentro de um <ion-button> - IONIC 5

Tenho o seguinte HTML: <ion-grid fixed> <ion-row> <ion-col size="12"> <ion-button (click)="go('adopt')" class="button" color="dark&...
2 votos
0 respostas
126 visitas

Definir a url(path) ao importar fontawesome com sass

Olá! Estou trabalhando com node+webpack+sass. Quando executo o script do wabpack, é feita a compilação do sass, o bundle dos arquivos js e o resultado é todo colocado no diretório build/. Ate ai sem ...
1 voto
1 resposta
442 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 ...
-1 votos
1 resposta
703 visitas

Porque o sass e less não funcionam no PowerShell? [duplicada]

Instalei o sass e less através do node.js(globalmente, assim como exemplificado nos sites das ferramentas em questão). Usei ambas no cmd sem problemas, mas ao tentar no PowerShell, recebi a seguinte ...
-2 votos
1 resposta
37 visitas

Sass::SyntaxError - Properties are only allowed within rules, directives, mixin includes, or other properties

Ao tentar acessar o site, é exibido esse erro: Properties are only allowed within rules, directives, mixin includes, or other properties. https://pastebin.com/LqMyVEM5 (codigo do arquivo sass) Meu ...
4 votos
1 resposta
62 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
1 resposta
928 visitas

CSS: Passar valores/parametros através dos nomes de classes

Gostaria de saber se existe a possibilidade de informar valores através de nome de classes para ser usados como valores nas propriedades das mesmas. Exemplo: .text-(color) { color: (color); } O ...
0 votos
0 respostas
139 visitas

SASS Mixin e Hover: como escrever o hover trocando parâmetros do mixin?

Oi. Eu sou novo no SASS, então peço desculpas se for uma dúvida boba, mas não encontrei lugar nenhum na internet com resposta pra ela, então... Eu estou trabalhando num projeto que tem um modelo de ...
1 voto
1 resposta
123 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.352
0 votos
1 resposta
104 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 ...
0 votos
1 resposta
340 visitas

HTML não puxa CSS gerado pelo SASS

Estou usando express pra subir o server e gulp pra gerar o sass, o gulp gera corretamente o arquivo, porém, o css não é adotado pelo HTML. segue código : Express : const express = require('...
  • 81
0 votos
1 resposta
2mil visitas

Erro no node-sass ao tentar instalar as dependencias de um projeto feito com ionic 3

Olá tenho um projeto feito no ionic 3.2.0, o projeto em questão pode ser encontrado no seguinte link https://github.com/Mathe13/rodoviasApp, realizei o download pelo git, removia o node_module e dei o ...
1 voto
1 resposta
921 visitas

Como configurar gulp.task default sass e watch

olá estou com alguns problemas na configuração do gulpfile.js para automatizar a conversão de sass para css no projeto de teste, abaixo explico o ambiente e os erros apresentados Estrutura das pastas ...
1 voto
2 respostas
73 visitas

Atributo Checked não responde com sr-only

Estou escondendo o <input type="radio"> com a classe sr-only do bootstrap, e o problema que ocorre é o seguinte: Com a classe sr-only ativa: Os radio não são desmarcados caso eu clique no ...
user avatar
11 votos
1 resposta
460 visitas

O que é e como funciona o Pós-Processamento de CSS?

O que seria um pós-processamento de CSS? Eu já tinha ouvido falar em CSS pré-processado, como o Gulp faz quando compila um SASS em CSS. Mas recentemente escutei o termo CSS pós-processado e fiquei sem ...
  • 66,6mil
0 votos
0 respostas
40 visitas

Não estou conseguindo deixar o meu arquivo final expandido com o gulp-sass

olá,não estou conseguindo deixar meu arquivo final .css expandido,já tentei colocar no outputStyle a palavra expanded mas o arquivo continua compressado ai vai o código onde está todo o código sass. /...
-1 votos
1 resposta
336 visitas

Como utilizar Sass em servidor

Como leigo ainda em Sass, tenho a dúvida de como utilizá-lo em um provedor como por exemplo locaweb ou hostgator. Eles precisam ter suporte a Sass ou tem outra forma?
  • 81
-1 votos
1 resposta
249 visitas

Media queries dentro do nesting - Sass

Tenho uma dúvida, estou criando uma aplicação em React, logo, estou usando SASS. Mas a minha dúvida é referente ao SASS, se é uma boa prática eu inserir media querie dentro do meu bloco de css. ...
0 votos
1 resposta
206 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, ...
  • 123
1 voto
1 resposta
716 visitas

Não consigo instalar o Node.js [fechada]

Estou tentando instalar o node js. Porém ao término da instalação quando executo pelo cmd. node -- version é apresentado o erro abaixo.
-2 votos
1 resposta
64 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, ...
  • 391
1 voto
2 respostas
269 visitas

Como definir um meta theme-color em runtime a partir dos estilos da aplicação

Estou desenvolvendo um web app baseado em React que utiliza Material Components (que por sua vez utiliza Sass) e preciso que a cor da barra do navegador (definida via html meta, conforme mostra o ...
1 voto
1 resposta
171 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 ...
1 voto
0 respostas
28 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-#{$...
1 voto
1 resposta
4mil visitas

Como colocar um background image no meu ion-content

Gostaria de adicionar um background image no fundo do meu login Segue o codigo html da minha login.page.html <ion-header> <ion-toolbar> <ion-title text-center>Login</ion-...
1 voto
1 resposta
89 visitas

É possivel fazer Funcoes com SASS?

Estou desenvolvendo minhas classes CSS com SASS e percebi que utilizo muitas vezes Media Query (@media) para criar comportamentos em determinada resolução. %display-none-mobile{ @media (max-width:...
0 votos
2 respostas
978 visitas

Deixar uma tela responsiva de acordo com a resolução do monitor

Bom dia! Tenho uma tela de login, que estou fazendo com bootstrap 4. Como eu faria para ajustar o layout da pagina para que que a imagem de background não fique faltando ou que exploda. Como da pra ...
  • 45
2 votos
1 resposta
60 visitas

SASS - iniciante (dúvida pequena)

Olá! Estou aprendendo SASS e me deparei com um problema que era pra ser simples,. heehehe. Isso não está compilando: $purple: #9b0aa8; #fofo{ width:40px; height:40px; background: $...
1 voto
2 respostas
4mil visitas

node-sass não é reconhecido como um comando interno

Estou tentando criar um comando para compilar os scss em css mais facilmente. Segui esse tutorial Instalei o nodejs, npm e o node-sass Entrei no meu projeto e rodei o comando npm init Meu ...
1 voto
1 resposta
315 visitas

CSS para SASS converter ou não? [fechada]

Tenho vários arquivos em css, estou na duvida se reescrevo ele em sass para poder dar uma manutenção melhor no futuro ou não, será que é realmente vantajoso?
1 voto
1 resposta
369 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
1 resposta
2mil visitas

Como aplicar hover em todos os *irmãos ou *filhos?

Boa noite Galera, essa é minha primeira pergunta aqui no forum, então desculpem se não formula da melhor forma. O problema que estou enfrentando é de aplicar o efeito css :hover em todos os elementos ...
0 votos
1 resposta
175 visitas

CSS/SCSS: Elemento de validação genérico acompanhando o formato input

Estou com um problema em minha folha de estilo. Eu possuo um Input genérico, conforme a figura abaixo: Eu coloquei um elemento para validar o meu formulário, a validação esta OK, mas estou com ...
  • 1.352
3 votos
1 resposta
47 visitas

Sass não compila caracter especial

Tenho um ::after no meu código sass com o content "m²", a questão é que depois de compilado o ² vira erro: Ele está imprimindo em UTF-8 (@charset "UTF-8";), realmente não entendo o motivo do erro.
-1 votos
1 resposta
63 visitas

Porque meu sass não compila este código?

.button { //background-color: $button-blue-bg; color: $button-font-color; font-size: $button-font-size; position: relative; display: block; text-align: center; line-height: ...
0 votos
1 resposta
56 visitas

Extender parent selector

Como faço para extender configurações de um parent selector? (somente ele) ul { background: red; /* Não incluir esse! */ } #menu { ul { margin-left: 20px; ul { @extend #menu ul; // ...
0 votos
1 resposta
534 visitas

SASS: Atualização do arquivo css em pastas diferentes?

Estou aprendendo SASS e gostaria de saber como atualizar um arquivo .css pelo sass, quando o arquivo .scss e o .css estão em pastas diferente. Por exemplo: O style.scss está na pasta scss e o style....
2 votos
1 resposta
347 visitas

O que é e como usar o Sass e o Npm em Bootstrap 4?

Estou aprendendo a utilizar o bootstrap e surgiu estas palavras e gostaria de entender o que elas são e como se usa.
0 votos
0 respostas
450 visitas

Trocar a cor de parte do texto no input usando Vuejs/Html/css

Como por exemplo no Facebook quando digitamos Parabéns fulano de tal dentro do input a palavra parabéns fica negrito e laranja e a pessoa continua digitando normalmente... ou seja ... quando a pessoa ...
0 votos
1 resposta
323 visitas

Bootstrap - Atualizar somente uma das div (Menu)

Estou iniciando um projeto com bootstrap e gostaria de atualizar somente a div class=content quando selecionar alguma opção do menu. Como faço? Segue: ├── html files │ └── index.html Src/ ├── ...
  • 423