SASS Examples

color-functions.css

h1 {
  color: white;
  background-color: blue;
}
h1:nth-of-type(2) {
  background-color: #60609f;
}
h1:nth-of-type(3) {
  background-color: #797986;
}

color-functions.html

<div class="container">
  <h1>Color Functions</h1>
  <h1>Color Functions</h1>
  <h1>Color Functions</h1>
</div>

color-functions.scss

$color: blue;

h1 {
  color: white;
  background-color: $color;

  &:nth-of-type(2) {
    background-color: scale-color($color, $saturation: -75%);
  }
  
  &:nth-of-type(3) {
    background-color: scale-color($color, $saturation: -95%);
  }

}

debug-console.txt

Line 2 CSS: 20%
Line 5 CSS: 51
Line 7 CSS: 20%
Line 8 CSS: false

debug.scss

/* Log lightness to console */
@debug lightness(#333);

/* Log red component to console */
@debug red(#333);

/* Log saturation component to console */
@debug saturation(#e1d7d2);

/* Evaluate expression to console */
@debug saturation(#e1d7d2) > 50;

default-value-compiled.css

h1 {
  background-color: #f33;
  color: white;
}
h1:nth-of-type(2) {
  background-color: darkcyan;
  color: white;
}

default-value.html

<div class="container">
  <h1>Default color</h1>
  <h1>Color passed in</h1>
</div>

default-value.scss

@mixin alert-text($color: #f33) {
  background-color: $color; 
  color: white; 
}

h1 {
  @include alert-text();
  
  &:nth-of-type(2) {
    @include alert-text(darkcyan);
  }
}

for-loop-compiled.css

.p-t-5 {
  padding-top: 5px;
}

.p-t-10 {
  padding-top: 10px;
}

.p-t-15 {
  padding-top: 15px;
}

.p-t-20 {
  padding-top: 20px;
}

.p-t-25 {
  padding-top: 25px;
}

.p-t-30 {
  padding-top: 30px;
}

.p-t-35 {
  padding-top: 35px;
}

.p-t-40 {
  padding-top: 40px;
}

.p-t-45 {
  padding-top: 45px;
}

.p-t-50 {
  padding-top: 50px;
}

.p-b-5 {
  padding-bottom: 5px;
}

.p-b-10 {
  padding-bottom: 10px;
}

.p-b-15 {
  padding-bottom: 15px;
}

.p-b-20 {
  padding-bottom: 20px;
}

.p-b-25 {
  padding-bottom: 25px;
}

.p-b-30 {
  padding-bottom: 30px;
}

.p-b-35 {
  padding-bottom: 35px;
}

.p-b-40 {
  padding-bottom: 40px;
}

.p-b-45 {
  padding-bottom: 45px;
}

.p-b-50 {
  padding-bottom: 50px;
}

/*A few basic styles for the text boxes */
.container {
  display: flex;
  flex-direction: column;
}
.container p {
  background-color: cadetblue;
  width: 300px;
  text-align: center;
}

for-loop.html

<div class="container">
  <p class="p-t-5 p-b-5">top & bottom padding of 5px</p>
  <p class="p-t-20 p-b-20">top & bottom padding of 20px</p>
  <p class="p-t-50 p-b-50">top & bottom padding of 50px</p>
</div>

for-loop.scss

@for $i from 1 through 10 {
  .p-t-#{$i * 5} {
    padding-top: #{$i * 5}unquote(px);
  }
}

@for $i from 1 through 10 {
  .p-b-#{$i * 5} {
    padding-bottom: #{$i * 5}unquote(px);
  }
}

/*A few basic styles for the text boxes */
.container {
  display: flex;
  flex-direction: column;
  
  p {
  background-color: cadetblue;
  width: 300px;
  text-align: center;
  }
}

if-statement-compiled.css

h1 {
  background-color: #ececec;
  color: white;
  color: black;
}
h1:nth-of-type(2) {
  background-color: #333333;
  color: white;
}

if-statement.html

<div class="container">
  <h1>Outcome 1</h1>
  <h1>Outcome 2</h1>
</div>

if-statement.scss

@mixin contrast-set($color) { 
  background-color: $color; 
  color: white;
  
  @if lightness($color) > 50 {
    color: black; 
  }
}


h1 {
  @include contrast-set(#ececec);
  
  &:nth-of-type(2){
    @include contrast-set(#333333);
  }
}

null-compiled.css

h1 {
  background-color: #333;
  color: white;
}
h1:nth-of-type(2) {
  background-color: #333;
  color: white;
  opacity: 0.75;
}

null.html

<div class="container">
  <h1>No opacity passed in</h1>
  <h1>Opacity amount passed in</h1>
</div>

null.scss

@mixin example($opacity: null) { 
  background-color: #333;
  color: white;
  opacity: $opacity; 
}

h1 {
  @include example();
  
  &:nth-of-type(2) {
    @include example(0.75);
  }
}

parent-selector-compiled.css

.container .text {
  background-color: aquamarine;
}

parent-selector.html

<div class="container">
   <p class="text">Sometimes it makes sense to target a parent </p>
</div>

parent-selector.scss

.text {
  .container & {
    background-color: aquamarine;
  }
}

placeholder-compiled.css

.container {
  background-color: cadetblue;
  color: aliceblue;
}

.container.alt {
  background-color: crimson;
  color: coral;
}

placeholder.html

<div class="container">
  <h1>Oh hai.</h1>
</div>

<div class="container alt">
  <h1>Oh hai.</h1>
</div>

placeholder.scss

%color-set-a {
  background-color: cadetblue;
  color: aliceblue;
}

%color-set-b {
  background-color: crimson;
  color: coral;
}

.container {
  @extend %color-set-a;
 }

.container {
  &.alt{
    @extend %color-set-b;
  }
 }

string-interpolation-compiled.css

/**

Brand X Color Reference 

Red is: #f94f4f
Dark Grey is: #3a3a3a
Dark Grey is: #c1c1c1

**/

string-interpolation.scss

$brand-red: #f94f4f;
$brand-dark-grey: #3a3a3a;
$brand-light-grey: #c1c1c1;

/**

Brand X Color Reference 

Red is: #{$brand-red}
Dark Grey is: #{$brand-dark-grey}
Dark Grey is: #{$brand-light-grey}

**/

suffixes-compiled.css

.container {
  background-color: aquamarine;
}
.container-pink {
  background-color: pink;
}

suffixes.html

<div class="container">
   <p class="text">Some text</p>
</div>

<div class="container-pink">
   <p class="text">A bit more text</p>
</div>

suffixes.scss

.container {
  background-color: aquamarine;

  &-pink {
    background-color: pink;
  }
}