Skip to content

Instantly share code, notes, and snippets.

@mechanicalduck
Created August 7, 2014 15:38
Show Gist options
  • Select an option

  • Save mechanicalduck/81e6f0bf311f71e8e692 to your computer and use it in GitHub Desktop.

Select an option

Save mechanicalduck/81e6f0bf311f71e8e692 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<!doctype html>
<html class="no-js" lang="<%- title %>">
<head>
<title>Test</title>
</head>
<body>
<div class="colm">
<div class="button">Button left upper corner</div>
<div class="button last">Button left lower corner</div>
</div>
<div class="middle">Middle part</div>
<div class="colm last">
<div class="button">Button right upper corner</div>
<div class="button last">Button right lower corner</div>
</div>
</body>
</html>
// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----
@import "susy";
// Configuring Susy Defaults
$susy: (
flow: ltr,
math: fluid,
output: inside,
gutter-position: first,
container: auto,
container-position: center,
columns: 12,
gutters: 0,
column-width: false,
global-box-sizing: content-box,
last-flow: to,
debug: (
image: show,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: true,
rem: true,
)
);
body {
@include container(show overlay);
}
div.colm {
@include span(1 of 3);
@include container(1 2 show overlay);
}
div.colm.last {
@include span(last 1 of 3);
}
div.middle {
background-color: lightblue;
@include span(1 of 3);
}
div.button {
background-color: grey;
@include span(last 1 of 1);
}
Invalid CSS after "Test": expected "{", was ""
<!doctype html>
<html class="no-js" lang="<%- title %>">
<head>
<title>Test</title>
</head>
<body>
<div class="colm">
<div class="button">Button left upper corner</div>
<div class="button last">Button left lower corner</div>
</div>
<div class="middle">Middle part</div>
<div class="colm last">
<div class="button">Button right upper corner</div>
<div class="button last">Button right lower corner</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment