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
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? ...
user avatar
25 votos
2 respostas
2mil visitas

Quais são as diferenças estruturais e de sintaxe entre Sass, Less e Stylus?

Hoje em dia é difícil ver pessoas escrevendo "CSS à moda antiga" por causa dos pré-processadores que facilitam a escrita removendo repetições de código, e simplificação de sintaxe. Gostaria de ...
16 votos
1 resposta
8mil visitas

Qual a diferença entre Less e Sass?

Qual é a diferença de cada um e vantagens e desvantagens?
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 ...
12 votos
1 resposta
732 visitas

O que é a tecnologia SASS?

Hoje em dia o dinamismo na produção de estilos para uma página ou um conjunto de páginas é essencial para o desenvolvedor. E o CSS as vezes torna-se um tanto complexo com seletores complicados, ...
  • 4.798
11 votos
1 resposta
461 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
10 votos
1 resposta
5mil visitas

Para que serve o arquivo com a extensão ".css.map" quando eu compilo um script Sass?

Eu estou aprendendo a utilizar o Sass. Todo aprendizado está correndo bem. A única coisa que não entendi ainda é que, toda vez que eu compilo um arquivo .scss, ele gera um arquivo com o mesmo nome, ...
  • 106mil
8 votos
1 resposta
447 visitas

No sass qual a diferença entre um mixin e um placeholder?

Os dois tem o mesmo resultado final, mas nao sei qual é o correto ou o que tem melhor perfornace exemplo: %borda($circunferencia: 10px) { -webkit-border-radius: $circunferencia; border-radius: $...
6 votos
1 resposta
49 visitas

Como inserir nova imagem em projeto com COMPASS

Tenho as imagens que utilizo em meu projeto e desejo adicionar uma nova imagem para utilizar no site, porém não consigo fazer com que a imagem seja adicionada aos sprites gerados pelo COMPASS
  • 907
5 votos
4 respostas
16mil visitas

Como mudar a cor de um select ao selecionar uma opção

Tenho um select e estou tentando mudar a cor do mesmo ao selecionar uma opção (para o exemplo estou mudando a cor para red). Usando alguns atributos como hover, focus, active e checked eu até consigo ...
  • 1.926
5 votos
1 resposta
689 visitas

Como compilar Less ou Sass automaticamente?

Pessoal estou com uma dúvida em relação ao Less/Sass. Hoje em dia trabalho somente com o Sublime Text para desenvolver os meu sites, e utilizo o Sass ou o Less para os estilos e uso o Koala para ...
5 votos
2 respostas
3mil visitas

Pegar medidas de um elemento e jogar em variáveis? Como fazer?

Tem algum meio (usando Sass talvez) de pegar as medidas (width e/ou height) de elementos já definidos e armazená-las em variáveis pra usá-las em cálculos de outros elementos?
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-...
4 votos
1 resposta
4mil visitas

Qual a diferença e quando utilizar @mixin e @extend em SASS?

Tanto o @mixin como o @extend parecem ter o mesmo objetivo: Adicionar um bloco de código padrão para uma classe. Mas se possuem essa mesma finalidade, qual a diferença entre eles? E quando devo ...
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: ''; ...
3 votos
2 respostas
1mil visitas

Qual é a diferença entre um mixin e uma function em SASS

No Sass temos dois casos de trecho de código reutilizável: função e o mixin. Exemplo função: @function border-default($color) { @return border: 1px solid $color: } Exemplo mixin: @mixin border-...
  • 106mil
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.
3 votos
2 respostas
265 visitas

Como retornar cor em hexadecimal de forma randômica

Estou querendo a cada build mudar o css da minha aplicação de forma randômica. Exemplo: $menu-color: #0097a7; // retonar apenas uma cor $menu-color: random(#0097a7,#FAFAFA,#7FB800); // retorna uma ...
3 votos
1 resposta
102 visitas

Erro 404 em SASS

Olá. Fui instalar um módulo Opencart em uma loja versão v1.5.6.4 e vi que o scss desse módulo não está sendo encontrado (erro 404) mesmo estando no servidor e na pasta correta. O header está assim: &...
3 votos
2 respostas
608 visitas

Concatenar arquivos .sass com Compass

Estou tentando concatenar (unificar) vários arquivos .css gerados a partir do SASS e estou usando o Compass para processar meus arquivos. Estou usando o Grunt para executar algumas tarefas, ...
3 votos
2 respostas
151 visitas

como trabalhar com SASS/LESS em tempo real?

Recentemente dei atenção para pré-processadores de css como less e sass pois vi vantagens em utilizá-los, porém vejo a necessidade de um workflow para que o css gerado seja compilado automaticamente. ...
3 votos
1 resposta
252 visitas

Concatenar vários ficheiros sass/css em um só css final

Estou a usar laravel 5.4, que por default traz um ficheiro webpack.mix.js que serão os ficheiros a serem concatenados e o seu destino. O meu problema é concatenar ficheiros scss com css, o que tenho ...
  • 487
3 votos
1 resposta
93 visitas

Problema ao usar MAP no Sass

Como lançado no blog do Sass a partir da versão 3.3 está disponível a criação de map no Sass (basicamente um objeto). Estou com a seguinte versão do Sass (devidamente atualizado pelo GEM): $ sass -v ...
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 ...
2 votos
1 resposta
901 visitas

O que o @at-root faz?

Bom eu utilizei o tradutor pra ler está documentação do SASS e não entendi o que ele pode fazer...Então: O que o @at-root faz?
2 votos
2 respostas
1mil visitas

Alinhamento Gif Loading

Olá, Tenho o seguinte código: https://jsbin.com/jojukiseze/1/edit?html,css,output Estou tentando alinhá-lo para que fique centralizado na tela independente do tamanho da tela ou orientação (seja um ...
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: $...
2 votos
2 respostas
186 visitas

Como usar before no CSS?

A imagem abaixo demostra o meu resultado esperado. Na verdade, gostaria de toda vez que instanciar as tag h1, h2, h3 no html, vir de brinde esse traçado em baixo do título. Estava pesquisando algo ...
  • 1.352
2 votos
1 resposta
249 visitas

Erro ao tentar instalar SASS/COMPASS

Estou com um problema ao instalar o SASS e COMPASS no meu Mac, está dando um erro de permissão. Já liberei o ler e gravar arquivos no finder. ERROR: While executing gem ... (Errno::EACCES) ...
2 votos
1 resposta
777 visitas

Quais são as vantagens e desvantagens de usar pré-processadores css? [fechada]

Sempre ouço desenvolvedores falarem dos pré-processadores, mas ainda não encontrei artigos sobre as desvantagens e vantagens. Também queria saber se é melhor usar o css puro ou pré-processado.
2 votos
3 respostas
564 visitas

Problema ao instalar o SASS

Baixei o RUBY e instalei me atentando ao “Add Ruby executable to your PATH” Em seguida instalei o GEM, após isso tento instalar o SASS mas me aparece o seguinte erro conforme na imagem. A versão do ...
  • 907
2 votos
1 resposta
165 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 ...
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.
2 votos
3 respostas
982 visitas

Aplicar estilo em elemento filho de acordo com o elemento pai em SASS Com declaração no filho

Olá, estou construindo uma estrutura de estilos SASS que mudanças irão depender de uma classe definida no meu body. Essa classe dita qual o navegador que o usuário está usando, exemplo: <body ...
  • 5.051
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 ...
2 votos
1 resposta
242 visitas

Erro ao usar glyphicon com bootstrap-sass

Boa tarde, estou tentando trabalhar com bootstrap-sass e sass, porém, ao incluir um ícone na minha class, nada acontece. Logo abaixo segue a linha de código que representa a mesma, gostaria de saber ...
  • 380
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
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:...
1 voto
1 resposta
1mil visitas

sass - como compilar o arquivo minificado?

Utilizo o sass para ajudar no desenvolvimento, porém gostaria de otimizar o resultado final do css gerado, teria alguma maneira de gerar o arquivo .css já minificado? Utilizo o seguinte comando para ...
1 voto
2 respostas
71 visitas

Como retirar comentários automáticos gerados pelo Compass?

Escrevo o código em SCSS, e quando gero o CSS ele vem com comentários de onde está a Class ou ID no meu SCSS. Alguém sabe como posso retirar esses comentários gerados pelo compass do meu arquivo CSS?
1 voto
1 resposta
718 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.
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
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
2 respostas
461 visitas

Redirecionamento dinâmico com CSS ou SASS

Tenho um site, e estou trabalhando a responsividade nele. Tenho uma versão mobile, parecido com uma Web app, em um diretório especifico dentro do projeto. Atualmente quando a resolução da tela é menor ...
1 voto
1 resposta
72 visitas

Incrementar margem em pixels no sass

Preciso criar margens, top, right, left e bottom, gostaria de fazer um loop em sass de 0 a 100. CSS final ficaria algo parecido com isso: margem-top: 1px; margem-top: 2px; margem-left: 66px; margem-...
1 voto
1 resposta
739 visitas

Bootstrap sass, qual a melhor maneira de uso para evitar redundância de atributos

Estou utilizando a versão sass do boostrap, e gostaria de saber qual a prática recomendada. Eu tenho os assets originais do bootstrap e tenho os meus assets pessoais que creio eu sobrescrevem os do ...
  • 1.026
1 voto
1 resposta
369 visitas

Tipografia responsiva (Flow Text css)

Bem, eu estava estudando sobre textos responsivos e encontrei a classe css do Materialize que deixa os textos responsivos de acordo com a largura da tela. Abrir o código fonte para tentar entender ...
1 voto
1 resposta
443 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 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
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 ...