Skip to content

Instantly share code, notes, and snippets.

@co0kie

co0kie/SassMeister-input-HTML.html

Created May 13, 2014 09:52
Show Gist options
  • Save co0kie/075a5d993ec4e3f579b2 to your computer and use it in GitHub Desktop.
Save co0kie/075a5d993ec4e3f579b2 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE>
<html>
<head>
<title>Meowkings!!!</title>
</head>
<body>
<div class="fixed-element">
<div class="relative-element">
test
</div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
@mixin b($browser) {
@if $browser == FF35 { /* FF 3.5+ */
body:not(:-moz-handler-blocked){ @content; }
}
}
body{
overflow-y: scroll;
}
@include b(FF35){
a{color:red;}
}
.fixed-element{
background:#262732;
width: 500px;
height: 200px;
position: fixed;
left: 0;
right: 0;
margin: auto;
overflow-y: scroll;
.relative-element{
width: 80%;
height: 500px;
background: red;
position:relative;
left: 0;
right: 0;
margin: auto;
}
}
Raw
SassMeister-output.css
body {
overflow-y: scroll;
}
/* FF 3.5+ */
body:not(:-moz-handler-blocked) a {
color: red;
}
.fixed-element {
background: #262732;
width: 500px;
height: 200px;
position: fixed;
left: 0;
right: 0;
margin: auto;
overflow-y: scroll;
}
.fixed-element .relative-element {
width: 80%;
height: 500px;
background: red;
position: relative;
left: 0;
right: 0;
margin: auto;
}
Raw
SassMeister-rendered.html
<!DOCTYPE>
<html>
<head>
<title>Meowkings!!!</title>
</head>
<body>
<div class="fixed-element">
<div class="relative-element">
test
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment