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

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

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

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

body {
  font: 100% Helvetica, sans-serif;;
  color: #333;
}

Sass:

Scss:

Css:

$brand-color: #fc9533;

a {
  color: $brand-color;
}

nav {
  background-color: $brand-color;
}

li:hover,
li:focus,
li:active {
  color: $brand-color;
}

table {
  border: 1px solid $brand-color;
}

Scss:

$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;

h1,
h2,
h3 {
  font-family: $helvetica;
}

a {
  font-family: $helvetica;
}

.some-block .some-object .modificator {
  font-family: $helvetica;
}

Scss:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Scss:

Css:

// _reset.scss

ul,
ol {
  margin: 0;
  padding: 0;
}

// base.scss

@import 'reset';

ol {
  color: #a7a7a7;
}

ul {
  color: #efefef;
}

ul, ol {
  margin: 0;
  padding: 0;
}

ol {
  color: #a7a7a7;
}

ul {
  color: #efefef;
}

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

.box {
  @include border-radius(10px);
}

.button {
  @include border-radius(4px);
}

.filter .button {
  background-color: #4abad3;
  @include border-radius(2px);
}

Scss:

Css:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.filter .button {
  background-color: #4abad3;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
}

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Scss:

Css:

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

Scss:

Css:

border: {
    style: solid;
    left: {
      width: 4px;
      color: #333333;
    }
    right: {
      width: 2px;
      color: #000000;
    }
 }
}

.circle {
    border: 1px solid #ccc;
    border-radius: 50px;
    overflow: hidden;
}
.avatar {
    @extend .circle;
}

$margin: 10px;
div {
    margin: $margin - 10%; /* Syntax error: Incompatible units: '%' and 'px' */
}

Less:

@margin: 10px;
 
div {
    margin: @margin - 10%; /* = 0px */
}

Scss:

+