Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$base-size: 16px;
$line-height: 24px;

// 1. Assignment Operator
$main-color: lightgray;


// 2. Arithmetic Operators
//h2 {
  //font-size: 5px + 2em; // error incompatible units
  //font-size: 5px + 2; // 7px
  //font-size: 5px * 2px; // invalid CSS
  //font-size: 16px / 24px // Outputs pure CSS
  //font-size: (16px / 24px) // Uses parentheses, does division
  //font-size: #{$base-size} / #{$line-height}; // Uses interpolation, outputs pure CSS
  //font-size: $base-size / $line-height // Uses variables, does division
  //opacity: random(4) / 5; // Uses a function, does division
  //padding-right: 2px / 4px + 3px // Uses an arithmetic expression, does division      
  //width: 3px * 5 + 5px; // 20px
  //width: 3 * (5px + 5px); // 30px
  //width: 3px + (6px / 2) * 3; // 12px
//}


// 3. Equality Operators
//@mixin font-fl($font){
//  &:after {
//    @if(type-of($font) == string) {
//      content: 'My font is: #{$font}.';
//    } @else {
//      content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';
//    } 
//  }
//}

//$list: "tomato", "lime", "lightblue";

//@mixin fg-color($property) {
//  @each $item in $list {
//    $color-length: str-length($item);
//    @if( $color-length % 2 != 0 ) {
//      #{$property}: unquote($item);
//    }
//  }
//}

//h2{
  //@include font-fl(sans-serif);
  //@include fg-color(color);
  //@if(20px == 20) {
  //  color: red; 
  //}
//}


// 4. Comparison Operators
//$padding: 50px;

//h2 {
//  @if($padding <= 20px) {
//    padding: $padding;
//  } @else {
//    padding: $padding / 2;
//  }
//}


// 5. Logical Operators
//$list-map: (success: lightgreen, alert: tomato, info: lightblue);

//@mixin button-state($btn-state) {
  //@if (length($list-map) > 2 or length($list-map) < 5) {
  //  background-color: map-get($list-map, $btn-state);
  //}
  //@if (length($list-map) > 2 or not (length($list-map) == 3)) {
  //  background-color: map-get($list-map, $btn-state);
  //}
  //@if (length($list-map) > 2 or not (length($list-map) == 3)) {
  //  background-color: map-get($list-map, $btn-state);
  //}
//}

//.btn {
//  @include button-state(success);
//}


// 6. String Operations
//@mixin string-concat {
//  &:after {
//    content: "My favorite language is " + Sass;
//    font: Arial + " sans-serif";
//  }
//}

//h2 {
//  @include string-concat;
//}

//@mixin string-concat ($language) {
//  &:after {
    //content: "My favorite language is #{$language}";

    // second way without using interpolation
    //content: "My favorite language is " + $language;
//  }
//}

//h2 {
    //@include string-concat(Sass);
//}


// 7. Color Operations
//h2 {
//  color: #468499 + #204479;
//}

//h2 {
  //color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);

  // error alpha channels must be equal
  //color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7); 
//}