Articles

diferença entre .sass e …esc’s

by admin

Quando eu comecei a descer o caminho do CSS preprocessadores eu estava sobrecarregado com as diferentes opções (sass, less, caneta), as diferenças na sintaxe, e o mais de tudo o que eu não tinha idéia de como eu deveria começar com esta nova abordagem para escrever CSS.se é um utilizador frequente de CodePen.io você vai notar que existem algumas opções quando se trata do sabor do CSS que você pode escolher.

  • SASS with Compass
  • SCSS with Compass
  • menos
  • Regular ol’ CSS

não seja confundido pelas opções SASS e SCSS, embora eu fosse inicialmente, .scss é Sassy CSS e é a próxima geração de .insolente. An explanation from the website

Sass has two syntaxes. A sintaxe mais comumente usada é conhecida como “SCSS” (para “Sassy CSS”), e é um superconjunto da sintaxe do CSS3. Isto significa que toda a folha de estilo CSS3 válida também é válida. Os arquivos SCSS usam a extensão .scss.

A segunda sintaxe mais antiga é conhecida como a sintaxe indentada (ou apenas “.sass”). Inspirado pela ternura do Haml, destina-se a pessoas que preferem a concisão em vez da semelhança com a CSS. Em vez de parêntesis e ponto-e-vírgula, Ele usa a indentação de linhas para especificar blocos. Os arquivos na sintaxe indented usam a extensão .insolente.

Explicação de SASS vs ESCS no sass-lang.com site

Se isso não faz sentido, você pode ver a diferença no código abaixo.

/* SCSS */$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

No código acima usamos ; para separar as declarações. Eu até adicionei todas as declarações para .border em uma única linha para ilustrar este ponto mais adiante.

em contraste, o código SASS abaixo deve estar em diferentes linhas com indentação e não há Uso do ;.

/* SASS */$blue: #3bbfce$margin: 16px.content-navigation border-color: $blue color: darken($blue, 9%).border padding: $margin / 2 margin: $margin / 2 border-color: $blue

você pode ver a partir do CSS abaixo que o estilo SCSS é muito mais semelhante ao CSS regular do que a abordagem mais antiga SASS.

/* CSS */.content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

acho que a maior parte do tempo hoje em dia, se alguém menciona que está trabalhando com Sass eles estão se referindo à autoria .scss em vez do tradicional .Sass way.

Você também pode querer verificar alguns @mixins úteis que irá ajudá-lo com a sua compilação responsiva.