<h1>String Data types in Sass</h1>
<p class="name">Hi, </p>
<p class="date"></p>
<p class="divison">Value is : </p>
<p class="just-string">Stored as string : </p>
<p class="no-interpolation"></p>
<p class="interpolation"></p>
body {
  font-family: 'Lato';
  background: tomato;
}

h1 {
  text-align: center;
  margin-bottom: 40px;
}

p {
  color: white;
  font-size: 1.1em;
}

$full-name: 'Gajendar' + ' Singh';
$date:  'Month/Year : ' + 3/2016;
$variable: 3/2016;
$just-string: '3/2016';

.name:after {
    content: $full-name;
}

.date:after {
    content: $date;
}

.divison:after {
  content: ''+$variable;
}

.just-string:after {
  content: $just-string;
}

$compared: 'Nothing to say!';

@if 5 > 3      { $compared: '5 is indeed greater than 3!' }

$no-interpolation: 'No interpolation : $compared';
$interpolation:    'Interpolation : #{$compared}';

.no-interpolation:after {
  content: $no-interpolation;
}

.interpolation:after {
  content: $interpolation;
}



View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.