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
7 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:...
3 votos
2 respostas
78 visitas

SASS SCSS - Problemas com arredondamento.

Estou com o seguinte problema: desenvolvendo um sistema de Grid com SCSS, obtive o problema de arredondamento das porcentagens que definem o tamanho de cada coluna. Queria saber se alguém tem a ...
0 votos
1 resposta
1mil 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 ...
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
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/...
1 voto
2 respostas
420 visitas

Menu Dropdown Responsivo

Criei um menu responsivo, gostaria de adicionar uma ação ao meu botão, quando ele fosse clicado meu menu iria aparecer, o menu ja esta criado, mas ainda não consegui com que ele aparece apenas com o ...
57 votos
3 respostas
43mil visitas

Qual é a diferença entre SASS e SCSS

Tenho lido sobre SASS há algum tempo e ele fornece um poderoso conjunto de funcionalidades para o CSS como variáveis, mixins e afins. E ao mesmo tempo vejo o termo SCSS. Qual a diferença entre ambos? ...
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
84 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 ...
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 ...
-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 votos
1 resposta
701 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 ...
1 voto
1 resposta
38 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 ...
2 votos
1 resposta
164 visitas

Arquivos .sass não compilam

Estou trabalhando num projeto usando Jekyll com Github Pages. Estou tentando usar um arquivo .sass, salvando-o na pasta _sass, usando a sintaxe recomendada pelo site do jekyll: --- --- .page-header ...
0 votos
1 resposta
226 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 ...
5 votos
2 respostas
572 visitas

Calculo de .scss para .sass [fechada]

Estou criando um grid system dinâmico utilizando sass e o gulp-sass para compilar. Tenho este código: $col-margin: 15px .row width: 100% max-width: 1170px margin: 0 auto display: flex flex-...
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, ...
0 votos
1 resposta
235 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 ...
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
439 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 ...
-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
923 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 ...
2 votos
1 resposta
345 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.
13 votos
3 respostas
23mil 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 ...
1 voto
1 resposta
122 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 é: $...
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, ...
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
339 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('...
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 ...
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 ...
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
334 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?
-1 votos
1 resposta
247 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. ...
1 voto
1 resposta
715 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
63 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, ...
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:...
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.
0 votos
2 respostas
975 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 ...
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?
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 ...