View SassMeister-input-HTML.jade
1 2 3 4 5 6 7 8 9
- var filters = { city: { title: 'City', values: {sea: 'Seattle', chi: 'Chicago', pdx: 'Portland' } }, stack: { title: 'Stacks', values: { js: 'JavaScript', ruby: 'Ruby on Rails', python: 'Python', ios: 'iOS Development', ux: 'Web UI Development' } }, experience: { title: 'Experience Level', values: { exp1: 'Beginner', exp2: 'Intermediate', exp3: 'Advanced' } }, quarter: { title: 'Start Date', values: { q1: 'Winter', q2: 'Spring', q3: 'Summer', q4: 'Fall' } }, format: { title: 'Format', values: {full: 'Full Time', part: 'Part Time' } } };
 
#filters
h1 Filter By
 
section
each data, filter in filters
h2= data.title
View SassMeister-input-HTML.haml
1 2 3 4 5 6 7 8 9 10
- filters = {
- city: { title: 'City',
values: {
- sea: 'Seattle',
chi: 'Chicago',
pdx: 'Portland' }
- },
stack: { title: 'Stacks',
values: {
- js: 'JavaScript',
View SassMeister-input.scss
1 2 3 4 5 6 7 8 9 10
// ----
// libsass (v3.1.0)
// ----
 
// In response to https://twitter.com/jed_foster/status/582955571428483072
 
// Notice how this doesn't suck.
 
 
// Align an object with absolute positioning
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;
Something went wrong with that request. Please try again.