View index.html
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
 
<script id="jsbin-javascript">
var deliveryCharge, itemTotal, itemsPlusService, p, percent, serviceCharge, serviceTax, t, vatOnFood;
View SassMeister-input.scss
1 2 3 4 5 6 7 8 9 10
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
 
$red: #f00;
 
.foo {
color: $red;
}
View sass-style-guide.md

Coding style

(Largely cribbed from GitHub's Styleguide)

Spacing

  • Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same in any person's environment.
  • Put spaces after : in property declarations.
  • Put line breaks between rulesets.
  • When grouping selectors, keep individual selectors to a single line.
View SassMeister-input-HTML.jade
1 2 3 4 5 6 7 8 9 10
section
.one-half
.one-half
 
section
.two-thirds
.one-third
 
section
.three-quarters
View index.html
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
View index.html
1 2 3 4 5 6 7 8 9 10
<style id="jsbin-css">
svg a {
-webkit-transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, text-shadow 0.25s ease, fill 0.25s ease;
-moz-transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, text-shadow 0.25s ease, fill 0.25s ease;
-o-transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, text-shadow 0.25s ease, fill 0.25s ease;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, text-shadow 0.25s ease, fill 0.25s ease;
}
svg {
fill: dimgray;
View index.html
1 2 3 4 5 6 7 8 9 10
<style id="jsbin-css">
svg a {
-webkit-transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, text-shadow 0.25s ease, fill 0.25s ease;
-moz-transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, text-shadow 0.25s ease, fill 0.25s ease;
-o-transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, text-shadow 0.25s ease, fill 0.25s ease;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, text-shadow 0.25s ease, fill 0.25s ease;
}
svg {
fill: dimgray;
View SassMeister-input-HTML.html
1 2 3 4 5 6 7 8 9 10
 
<div class="main">
<div class="ribbon--red">1</div>
<div class="ribbon--green">2</div>
<div class="ribbon--purple">3</div>
<div class="ribbon--orange">4</div>
<div class="ribbon--blue">50%</div>
<div class="ribbon--gray">:)</div>
<div class="ribbon--pink">!</div>
</div>
View SassMeister-input-HTML.html
1 2 3 4 5 6 7 8 9 10
 
<div class="main">
<div class="ribbon--red">1</div>
<div class="ribbon--green">2</div>
<div class="ribbon--purple">3</div>
<div class="ribbon--orange">4</div>
<div class="ribbon--blue">50%</div>
<div class="ribbon--gray">:)</div>
<div class="ribbon--pink">!</div>
</div>
View SassMeister-input-HTML.html
1 2 3 4 5 6 7 8 9 10
 
<div class="main">
<div class="ribbon--red">1</div>
<div class="ribbon--green">2</div>
<div class="ribbon--purple">3</div>
<div class="ribbon--orange">4</div>
<div class="ribbon--blue">50%</div>
<div class="ribbon--gray">:)</div>
<div class="ribbon--pink">!</div>
</div>
Something went wrong with that request. Please try again.