Skip to content

Instantly share code, notes, and snippets.

@mpeteuil

mpeteuil/SassMeister-input-HTML.html

Created February 14, 2015 00:12
Show Gist options
  • Save mpeteuil/c62add3945b9f9c6ae26 to your computer and use it in GitHub Desktop.
Save mpeteuil/c62add3945b9f9c6ae26 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<head>
</head>
<body>
<div class="1-of-12">
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
$columns: (1 2 3 4 5 6 7 8 9 10 11 12);
$max-columns: max($columns...);
@each $column in $columns {
#{$column}-of-#{$max-columns} {
flex: 0 0 ($column/$max-columns) * 100%;
}
}
Raw
SassMeister-output.css
1-of-12 {
flex: 0 0 8.33333%;
}
2-of-12 {
flex: 0 0 16.66667%;
}
3-of-12 {
flex: 0 0 25%;
}
4-of-12 {
flex: 0 0 33.33333%;
}
5-of-12 {
flex: 0 0 41.66667%;
}
6-of-12 {
flex: 0 0 50%;
}
7-of-12 {
flex: 0 0 58.33333%;
}
8-of-12 {
flex: 0 0 66.66667%;
}
9-of-12 {
flex: 0 0 75%;
}
10-of-12 {
flex: 0 0 83.33333%;
}
11-of-12 {
flex: 0 0 91.66667%;
}
12-of-12 {
flex: 0 0 100%;
}
Raw
SassMeister-rendered.html
<html>
<head>
</head>
<body>
<div class="1-of-12">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment