CSS

css sass scss

/*SMART DIFFERENCE*/
/*CSS*/
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

/*SCSS*/

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}


/*SASS*/
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

sass use

// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}

sass use

// style.scss
@use 'foundation/code';
@use 'foundation/lists';

sass @use

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

why sass

/* Sass has a lot of features
The most important ones are nesting, functions and mixins
*/