Skip to content

Instantly share code, notes, and snippets.

@jslnriot

jslnriot/SassMeister-input-HTML.html

Forked from SandyLudosky/SassMeister-input-HTML.html
Created July 24, 2017 23:52
Show Gist options
  • Save jslnriot/1d17a0088c404c2ce12de3899d107274 to your computer and use it in GitHub Desktop.
Save jslnriot/1d17a0088c404c2ce12de3899d107274 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class='container'>
<h1>SASS - Variables</h1>
<h2><span>Basic</span> - Getting Started</h2>
<p id='mypara'>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor <br>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi</p>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
/*
* Sass Variables are defined with an $ character
* and can have different kinds of data types:
* color, string, boolean, multi-value
*/
$Color1: navy; // named color value
$Color2: #333333; // hex color value
$StringVar: ". It's awesome"; // string variable
$FontSize: 18px; // numeric value
$border: 1px solid $Color1; // multi-value variable
$padding: 15px 15px 15px 15px; // multi-value variable
Raw
SassMeister-output.css
/*
* Sass Variables are defined with an $ character
* and can have different kinds of data types:
* color, string, boolean, multi-value
*/
Raw
SassMeister-rendered.html
<div class='container'>
<h1>SASS - Variables</h1>
<h2><span>Basic</span> - Getting Started</h2>
<p id='mypara'>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor <br>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment