Skip to content

Instantly share code, notes, and snippets.

@barrosfelipe

barrosfelipe/SassMeister-input-HTML.html

Created February 22, 2015 05:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save barrosfelipe/8fd68a38e46c291f6fbf to your computer and use it in GitHub Desktop.
Save barrosfelipe/8fd68a38e46c291f6fbf to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<header>
<h1>Making Shapes</h1>
</header>
<div class="main">
<a class="circle ir" href="#">Circle</a>
<a class="triangle ir" href="#">Triangle</a>
</div>
</body>
Raw
SassMeister-input.scss
// ----
// libsass (v3.1.0)
// ----
@mixin circle($width, $color) {
width: $width;
height: $width;
background: $color;
border-radius: $width / 2;
}
@mixin triangle($width, $dir, $color) {
@if $dir == up {
width: 0;
height: 0;
border-left: $width / 2 solid transparent;
border-right: $width / 2 solid transparent;
border-bottom: $width / 2 solid $color;
}
@else if $dir == down {
width: 0;
height: 0;
border-left: $width / 2 solid transparent;
border-right: $width / 2 solid transparent;
border-top: $width / 2 solid $color;
}
@else if $dir == right {
width: 0;
height: 0;
border-top: $width solid transparent;
border-bottom: $width solid transparent;
border-left: $width solid $color;
}
@else if $dir == left {
width: 0;
height: 0;
border-top: $width solid transparent;
border-bottom: $width solid transparent;
border-right: $width solid $color;
}
}
.circle {
@include circle(200px, #999999);
display: block;
}
.triangle {
@include triangle(100px, right, red);
display: block;
}
.ir {
font: 0 / 0 a;
text-shadow: none;
color: transparent;
}
Raw
SassMeister-output.css
.circle {
width: 200px;
height: 200px;
background: #999999;
border-radius: 100px;
display: block; }
.triangle {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid red;
display: block; }
.ir {
font: 0 / 0 a;
text-shadow: none;
color: transparent; }
Raw
SassMeister-rendered.html
<body>
<header>
<h1>Making Shapes</h1>
</header>
<div class="main">
<a class="circle ir" href="#">Circle</a>
<a class="triangle ir" href="#">Triangle</a>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment