prettier/tests/css_scss/scss.css

@media #{$g-breakpoint-tiny} {}
.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
a {height: calc(#{$foo} + 1);}
div {
  background: {
      size: auto 60%;
      position: bottom 2px left;
  }
}
a { margin: 0 { left: 10px; } }
$map: (color: #111111, text-shadow: 1px 1px 0 salmon);
$theme-checkbox-colors: (
    default: $theme-color-border,
    checked: $theme-color-checked,
    disabled: $theme-color-disabled,
    disabled-font: $theme-color-font-secondary,
) !default;
$default: #111111 !default;
$default: #111111   !default;
$default: #111111
!default;
$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
$default: "very-long-long-long-long-long-long-long-long-long-long-long-value"   !default;
$default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
!default;

.card-column-simple {
  @include breakpoint( getBp( md ) ) {
    padding: $spacing_content-sm $spacing_content-md;
  }

  @include breakpoint (getBp(md)) {
    &:nth-child(2n + 3) {
      clear: both;
    }
  }

  @include breakpoint (getBp(xl)) {
    &:nth-child(2n + 3) {
      clear: none;
    }
    &:nth-child(3n + 4) {
      clear: both;
    }
  }
}

@warn "Warn (#{$message}).";
@warn  "Warn (#{$message}).";
@warn   "Warn (#{$message}).";
@warn #{$message};
@warn "Very long long long long long long long long long long long long long line (#{$message}).";
@warn
  "Very long long long long long long long long long long long long long line (#{$message}).";
@error "Error (#{$message}).";
@error  "Error (#{$message}).";
@error   "Error (#{$message}).";
@error #{$message};
@error "Very long long long long long long long long long long long long long line Error (#{$message}).";
@error
  "Very long long long long long long long long long long long long long line Error (#{$message}).";

$buttonConfig: "save" 50px, 'cancel' 50px, "help" 100PX;

$locale: "en_us";
html[lang=#{$locale}] {
  font-size: 10px;
}
$alertClass: "error";
p.message-#{$alertClass} {
  color: red;
}
$mediumBreakpoint: 768px;
@media (max-width: #{$mediumBreakpoint}) {
  a {
    font-size: 18px;
  }
}

p {
  @media (max-width: 768px) {
    font-size: 150%;

    @media (orientation: landscape) {
        line-height: 75%;
    }
  }
}

.popularAnimal {
    background: gray;
}
.GoodBoy {
    color: green;
}
.dog {
  @extend .popularAnimal;
  @extend .GoodBoy;
  color: white;
}

%animal {
  background: gray;
}
.cat {
  @extend %animal;
  color: white;
}
.dog {
  @extend %animal;
  color: black;
}

%mfw-standing-out {
  font-size: 150%;
  font-style: italic;
  padding: 25px;
}
%mfwSlightlyShadowed {
  @include box-shadow(black 2px 2px 10px); // from Compass
}
%MFWRounded {
  @include border-radius(25px); // from Compass
}
#join-button {
  @extend %mfw-standing-out;
  @extend %mfwSlightlyShadowed;
  @extend %MFWRounded;
  background: green;
  color: white;
}

a {
  &:hover {
    color: red;
  }
}
p {
  body.no-touch & {
    display: none;
  }
}
.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}
@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

p {
  @if 1 + 1 == 2 {
    border: 1px solid;
  }
  @if 5 < 3 {
    border: 2px dotted;
  }
  @if null {
    border: 3px double;
  }
}

$mosterType: monster;
p {
  @if $mosterType == ocean {
    color: blue;
  } @else if $mosterType == matador {
    color: red;
  } @else if $mosterType == monster {
    color: green;
  } @else if $mosterType == nightKing {
    color: green;
  } @else if $mosterType == VeryWickedWolf {
    color: green;
  } @else {
    color: black;
  }
}

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

@each $animal in puma, sea-slug, cheerfulDog, BigSalamander, "string", 'another-string', "camelCaseString", "PascalCaseString" {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

@mixin cool-border($width: 10px, $coolStyle: 'solid', $AwesomeColor: "black") {
  border: $width $coolStyle $AwesomeColor;
}

p {
  @include cool-border(1px, "solid", $fff);
}
p {
  @include cool-border($width: 1px, $coolStyle: 'solid', $AwesomeColor: #fff);
}
p {
  @include coolBorder();
}

@mixin coolBorder() {
  border: 10px solid #fff;
}
p {
  @include coolBorder(1px, "solid", $fff);
}

@mixin CoolBorder() {
  border: 10px solid #fff;
}
p {
  @include CoolBorder(1px, "solid", $fff);
}

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

@mixin applyToIe6Only {
  * html {
    @content;
  }
}
@include applyToIe6Only {
  #logo {
    background-image: url(/logo.gif);
  }
}

@mixin ApplyToIe6Only {
  * html {
    @content;
  }
}
@include ApplyToIe6Only {
  #logo {
    background-image: url(/logo.gif);
  }
}

@mixin config-icon-colors($prefix, $colors...) {
  @each $i in $colors {
    .#{$prefix}#{nth($i, 1)} {
      color: nth($i, 2);
    }
  }
}
@include config-icon-colors(
  "icon-",
  "save" green,
  "cancel" gray,
  "delete" red,
  'wait' blue
);

@function my-calculation-function($some-number, $anotherNumber, $BigNumber){
  @return $some-number + $anotherNumber + $BigNumber;
}
@function myCalculationFunction($some-number, $anotherNumber, $BigNumber){
  @return $some-number + $anotherNumber + $BigNumber;
}
@function AnotherMyCalculationFunction($some-number, $anotherNumber, $BigNumber: 100px){
  @return $some-number + $anotherNumber + $BigNumber;
}
@function border($borders...) {
  @return $borders;
}
.foo {
  padding: my-calculation-function(10px, 5px, 100px);
  margin: myCalculationFunction($some-number: 10px, $anotherNumber: 5px, $BigNumber: 100px);
  width: AnotherMyCalculationFunction(10px, 5px);
  border: border(25px, 35px);
}

$sm-only: '(min-width: 768px) and (max-width: 991px)';
$lg-and-up: '(min-width: 1200px)';

@media screen and #{$sm-only, $lg-and-up} {
  color: #000;
}