CODEWITHSUNDEEP
sasscodepen
FlipFloop
FlipFloop

Reputation: 1264

What's the difference between Sass and Scss options in CodePen?

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

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

image 2nd image

Upvotes: 2

Views: 438

Answers (1)

Bamieh
Bamieh

Reputation: 10936

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
=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 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 more here to see which syntax is better: https://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

Upvotes: 2

Related Questions