FlipFloop FlipFloop - 8 months ago 38
Sass (Sass) Question

CodePen CSS preprocessors

In CodePen, the CSS can have a series of preprocessors proposed by CodePen. I want to code some CSS in a

file using Sass.

However, on CodePen, they propose SCSS and Sass as 2 seperate preprocessors - which one should I pick?

2nd image



The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “Sass”).

Sass and SCSS differ in syntax, however, you can use both .scss and .sass extensions interchangeably as the SCSS processes will automatically know the difference, but thats not the case on codepen, you must specify the exact syntax you will write in.

Sass syntax:

// Variable
!primary-color= hotpink

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

    color= !primary-color
    width= 100%
    overflow= hidden


SCSS Syntax

// 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);

read here to see which syntax is better: http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better