Created
October 15, 2015 22:56
-
-
Save lisacatalano/f4f461d097f28d1898fe to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="branding"> | |
<div class="logo"></div> | |
<h1>Sass Demo</h1> | |
</div> | |
<p>Sass is a CSS extension language. You can write your CSS in a Sass format and it is translated into regular CSS that the browser can read.</p> | |
<div class="reasons"> | |
<h2>Reasons to love Sass: </h2> | |
<ul> | |
<li>It is easy to learn and start using right away.</li> | |
<li>You can break your CSS up into multiple files and still only have one HTTP request. More files allows for more organized and maintainable code.</li> | |
<li>You can use variables. It is easy to change a color or a value in multiple places.</li> | |
<li>It makes CSS more fun.</li> | |
</ul> | |
</div> | |
<button>Click Me!</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
// body { | |
// background-color: #ccc; | |
// color: #444; | |
// font-family: sans-serif; | |
// font-size: .9em; | |
// line-height: 1.5; | |
// padding: 0 1em; | |
// } | |
// .logo { | |
// background-color: #349d9f; | |
// height: 60px; | |
// width: 60px; | |
// border-radius: 30px 0; | |
// float: left; | |
// margin: 0 15px 15px 0; | |
// } | |
// h1 { | |
// line-height: 60px; | |
// } | |
// p { | |
// clear: both; | |
// } | |
// .reasons { | |
// background-color: #fff; | |
// padding: .25em 1em; | |
// border-radius: 10px; | |
// box-shadow:inset 0px 0px 7px rgba(0,0,0,.7); | |
// margin-bottom: 1em; | |
// max-width: 50em; | |
// } | |
// .reasons h2 { | |
// color: #349d9f; | |
// margin: .2em; | |
// } | |
// .reasons ul { | |
// padding-left: 20px; | |
// } | |
// button { | |
// background-color: #349d9f; | |
// color: #fff; | |
// border: 0; | |
// border-radius: 10px; | |
// padding: 10px; | |
// font-size: 1em; | |
// } | |
// button:hover { | |
// background-color: #277779; | |
// } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="branding"> | |
<div class="logo"></div> | |
<h1>Sass Demo</h1> | |
</div> | |
<p>Sass is a CSS extension language. You can write your CSS in a Sass format and it is translated into regular CSS that the browser can read.</p> | |
<div class="reasons"> | |
<h2>Reasons to love Sass: </h2> | |
<ul> | |
<li>It is easy to learn and start using right away.</li> | |
<li>You can break your CSS up into multiple files and still only have one HTTP request. More files allows for more organized and maintainable code.</li> | |
<li>You can use variables. It is easy to change a color or a value in multiple places.</li> | |
<li>It makes CSS more fun.</li> | |
</ul> | |
</div> | |
<button>Click Me!</button> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment