CodePen CSSプリプロセッサ

Question

CodePenでは、CSSにはCodePenによって提案された一連のプリプロセッサが用意されています。 Sassを使用して.scssファイルにいくつかのCSSをコーディングしたいと思います。

しかし、CodePenでは、SCSSとSassを2つの別々のプリプロセッサとして提案しています。

THX！

Answer 1

（サス3のような）新しいメイン構文は（「生意気 CSS」のための）「SCSS」として知られている、とCSS3の構文のスーパーセットです。つまり、すべての有効な CSS3スタイルシートも有効なSCSSです。 SCSSファイルの拡張子は .scssです。 2番目の古い構文はインデントされた構文（または ちょうど "Sass"）として知られています。

サスとSCSSしかし、あなたはSCSSプロセスが自動的に違いを知っているが、codepenのケースをないthatsのように、あなたは意志正確な構文を指定する必要があり、交換可能に両方.scssと.sass拡張機能を使用することができ、構文が異なります書き込みに

サス構文：

// Variable 
!primary-color= hotpink 

// Mixin 
=border-radius(!radius) 
    -webkit-border-radius= !radius 
    -moz-border-radius= !radius 
    border-radius= !radius 

.my-element 
    color= !primary-color 
    width= 100% 
    overflow= hidden 

.my-other-element 
    +border-radius(5px) 

SCSS構文

// Variable 
$primary-color: hotpink; 

// Mixin 
@mixin border-radius($radius) { 
    -webkit-border-radius: $radius; 
    -moz-border-radius: $radius; 
    border-radius: $radius; 
} 

.my-element { 
    color: $primary-color; 
    width: 100%; 
    overflow: hidden; 
} 

.my-other-element { 
    @include border-radius(5px); 
} 

どの構文が良いかを確認するには、ここをクリックしてください。 http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better