<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
This Pen doesn't use any external JavaScript resources.