Skip to content

Instantly share code, notes, and snippets.

@lucasan

lucasan/SassMeister-input-HTML.html

Created March 25, 2014 22:38
Show Gist options
  • Save lucasan/9773018 to your computer and use it in GitHub Desktop.
Save lucasan/9773018 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<head>
<title>A title</title>
</head>
<body>
<ul class="nav">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<div class='box-shadow-example'>
<div id='box-shadow-custom'></div>
<div id='box-shadow-custom-multiple'></div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
@import "compass";
ul.nav {
@include horizontal-list;
}
.box-shadow-example div {
width: 40px;
height: 40px;
background: #eeeeee;
margin: 20px;
float: left;
}
// Box shadow with custom settings
#box-shadow-custom {
@include box-shadow(red 2px 2px 10px);
}
#box-shadow-custom-multiple {
@include box-shadow(rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset);
}
Raw
SassMeister-output.css
ul.nav {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
*zoom: 1;
}
ul.nav li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
white-space: nowrap;
float: left;
padding-left: 4px;
padding-right: 4px;
}
ul.nav li:first-child {
padding-left: 0;
}
ul.nav li:last-child {
padding-right: 0;
}
ul.nav li.last {
padding-right: 0;
}
.box-shadow-example div {
width: 40px;
height: 40px;
background: #eeeeee;
margin: 20px;
float: left;
}
#box-shadow-custom {
-moz-box-shadow: red 2px 2px 10px;
-webkit-box-shadow: red 2px 2px 10px;
box-shadow: red 2px 2px 10px;
}
#box-shadow-custom-multiple {
-moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
-webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
}
Raw
SassMeister-rendered.html
<html>
<head>
<title>A title</title>
</head>
<body>
<ul class="nav">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<div class='box-shadow-example'>
<div id='box-shadow-custom'></div>
<div id='box-shadow-custom-multiple'></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment