78
votos
Aceito
Qual é a diferença entre SASS e SCSS
São duas sintaxes diferentes do SASS com as mesmas funcionalidades. O SASS era originalmente a sintaxe oficial e ela é um pouco diferente da sintaxe do CSS, sem chaves e pontos e virgulas. A sintaxe ...
- 18,7mil
15
votos
Aceito
Quais são as diferenças estruturais e de sintaxe entre Sass, Less e Stylus?
se eles cumprem o mesmo papel, ou se possuem uma abordagem diferente.
Essa sua frase define o tom da sua pergunta. Vou procurar basear minha resposta em ambos os pontos citados.
Eles cumprem o mesmo ...
- 4.620
15
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 ...
- 22,5mil
12
votos
Aceito
O que é a tecnologia SASS?
O SASS, como você mesmo disse, é um pré-processador. A ideia de usar o SASS é justamente estender o CSS com algumas funcionalidades que tornem a tarefa de escrever folhas de estilo mais fácil. Algumas ...
- 18,7mil
12
votos
Aceito
Para que serve o arquivo com a extensão ".css.map" quando eu compilo um script Sass?
Por que utilizam essa ferramenta:
https://developer.chrome.com/devtools/docs/css-preprocessors
Como os arquivos CSS são gerados, editar os arquivos CSS diretamente não é tão útil.
Para pre-...
- 573
10
votos
Quais são as diferenças estruturais e de sintaxe entre Sass, Less e Stylus?
Pré-processadores de CSS3 são linguagens com o propósito de ajudar
na criação de estilos compatíveis com todos os navegadores e com diversos
recursos para nos ajudar, principalmente quando temos CSS's ...
- 2.221
10
votos
Qual a diferença e quando utilizar @mixin e @extend em SASS?
A utilização de @mixin e @extend pode parecer semelhante e ter a mesma finalidade, apesar de isso ser verdade, elas possuem propósitos diferentes bem como seus prós e contras. Ambas, se utilizadas de ...
- 8.168
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 ...
- 5.051
7
votos
Aceito
No sass qual a diferença entre um mixin e um placeholder?
mixins
Permitem que você defina estilos que podem ser reutilizados em toda a folha de estilo. Permite reproduzir regras CSS completas em um documento Sass e até mesmo ter argumentos que permite que ...
- 17,8mil
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 ...
- 66,5mil
6
votos
CSS: Passar valores/parametros através dos nomes de classes
Com CSS puro vc pode fazer usando custom variables, não é exatamente como vc quer mas pode te ajudar
Caso queira uma cor especial para o :hover, basta no :root vc tb declarar uma cor que vai usar ...
- 66,5mil
5
votos
Aceito
O que o @at-root faz?
@at-root é uma diretiva . Ela funciona pra 'saltar' de onde você aninhou em seu Sass para um nível superior.
Por exemplo, você pode usá-lo assim:
h1 {
font-size: 16px;
@at-root {
...
- 12,5mil
5
votos
Como mudar a cor de um select ao selecionar uma opção
Um script jQuery bem simples resolve!
O que precisa fazer é mudar o css quando o elemento é selecionado.
$('#estado').change(function(){
$(this).css('color', 'red');
});
Veja funcionando no ...
- 3.448
5
votos
Aceito
Como mudar a cor de um select ao selecionar uma opção
Quando o :has for suportado nos navegadores poderia utilizar, acredito que iria funcionar:
select:has(option[value=""]) {
color: red;
}
Entretanto, até o momento nenhum navegador suporta e talvez ...
- 21,6mil
5
votos
Aceito
Como compilar Less ou Sass automaticamente?
Você pode instalar o Node.js na sua máquina. Ele serve para rodar diversas aplicações que você pode baixar no NPM, dentre elas o Gulp.
O Gulp automatiza diversas operações para você. Aliado ao gulp-...
- 23,6mil
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-...
- 66,5mil
4
votos
Aceito
4
votos
Aceito
É possivel fazer Funcoes com SASS?
Isso é possivel usando @mixin com @content.
Por exemplo:
@mixin mobile {
@media (max-width: 992px) {
background: black;
@content;
}
}
.exemplo {
@include mobile {
color: white;
}...
- 156
4
votos
Aceito
O que é e como funciona o Pós-Processamento de CSS?
Um pós-processador de CSS nada mais é que um programa para ajudar no desenvolvimento de códigos CSS.
Igual o SASS?
Não.
pré-processamento vs pós-processamento
Diferente do pré-processamento de ...
- 6.364
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
....
- 66,5mil
3
votos
Aceito
Qual é a diferença entre um mixin e uma function em SASS
Apesar dos dois terem quase o mesmo propósito, eles tem um pequena diferença, onde mixin serve mais para incluir um bloco de código enquanto a function serve mais retorna um valor.
What is the real ...
- 181
3
votos
Qual é a diferença entre SASS e SCSS
O SCSS é uma versão mais moderna e deve ser utilizada caso você esteja iniciando um novo projeto.
A grande vantagem do SCSS é que é compatível com o CSS, portanto se você já tiver um arquivo CSS ...
- 131
3
votos
Aceito
Remover espaçamento criado entre imagem e div
Basta apenas acrescentar o posicionamento da imagem:
Utilize este css para a .box-img > img:
.box-img > img {
width: 100%;
height: 100%;
vertical-align: middle;
}
Simplificando, ...
- 3.322
3
votos
Aceito
Sass não compila caracter especial
Tenho uma resposta que pode te ajudar. Ela não resolve o bug de compilação, mas resolve a questão do número sobrescrito no content.
Repare o content:"" do elemento ::after pode receber caracteres em ...
- 66,5mil
3
votos
Aceito
SASS - iniciante (dúvida pequena)
Acredito que primeiramente vc deve criar o seu @mixin, e depois fazer o @include como vc pode consultar no guia: https://sass-lang.com/guide
Dessa forma:
$purple: #9b0aa8;
@mixin transform($...
- 66,5mil
3
votos
Não consigo instalar o Node.js
Amigo vc está escrevendo errado....! não tem o espaço entre o -- e o version.... deve ser assim node --version como o -- colado no version
- 66,5mil
3
votos
Aceito
Como utilizar Sass em servidor
Cara qualquer servidor vc pode hospedar um arquivo .sass ou .scss ou .less. Mas o que não vai acontecer é o serviço de hospedagem compilar seus aquivos para .css de forma que o browser consiga ...
- 66,5mil
2
votos
Aceito
Tipografia responsiva (Flow Text css)
Na minha resposta, vou assumir que você não tenha entendido absolutamente nada do código. Portanto, perdoe-me pelo ditatismo ou se por ventura eu fale muitos óbvios:
SASS ?
O código que você postou ...
- 4.620
2
votos
Gulp Sass não funciona
Além de teres que incluir:
var gulp = require('gulp');
Tens de usar https://www.npmjs.com/package/gulp-sass e não o gulp-ruby-sass. A estrutura de folders é diferente e o interpretador também.
- 131
2
votos
Bootstrap sass, qual a melhor maneira de uso para evitar redundância de atributos
Esse tipo de questão, a meu ver, depende de muitos fatores no seu projeto. Mas, assim como você, também tive essa dúvida quando comecei a mexer com css no bootstrap. Tudo é muito mais fácil, mas ao ...
- 8.168
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
sass × 133css × 74
css3 × 20
html × 15
scss × 15
javascript × 10
gulp × 10
less × 10
front-end × 7
node.js × 6
ruby × 6
bootstrap-4 × 6
html5 × 5
twitter-bootstrap × 5
npm × 5
ionic × 4
webpack × 4
grunt × 4
windows × 3
bootstrap-3 × 3
bootstrap × 3
preprocessador × 3
compass × 3
php × 2
react × 2