FlipFloop FlipFloop - 3 months ago 9
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

.scss
file using Sass.

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

image
2nd image

thx!

Answer

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

Comments