Skip to content

Instantly share code, notes, and snippets.

@AleksejDix
Created February 25, 2016 10:13
Show Gist options
  • Save AleksejDix/bada4e616698dc5a7b2f to your computer and use it in GitHub Desktop.
Save AleksejDix/bada4e616698dc5a7b2f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div style="width: 2pc; height: 2pc; background: red;"></div>
<div style="width: 32px; height: 32px; background: red;"></div>
<div style="width: calc(1in/6); height: calc(1in/6); background: red;"></div>
// ----
// libsass (v3.2.5)
// ----
/*------------------------------------* #LAYOUT
\*------------------------------------*/
.o-layout {
margin: 0;
padding: 0;
list-style: none;
margin-left: -24px;
}
.o-layout__item {
display: inline-block;
vertical-align: top;
width: 100%;
padding-left: 24px;
}
/*------------------------------------* #WIDTHS
\*------------------------------------*/
/**
* A series of width helper classes that you can use to size things like grid
* systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken-
* word format (e.g. `.u-2-of-3`). Use these in your markup:
*
* <div class="u-7/12">
*/
.u-1\/1 {
width: 100% !important;
}
.u-1\/2 {
width: 50% !important;
}
.u-2\/2 {
width: 100% !important;
}
.u-1\/3 {
width: 33.33333% !important;
}
.u-2\/3 {
width: 66.66667% !important;
}
.u-3\/3 {
width: 100% !important;
}
.u-1\/4 {
width: 25% !important;
}
.u-2\/4 {
width: 50% !important;
}
.u-3\/4 {
width: 75% !important;
}
.u-4\/4 {
width: 100% !important;
}
.u-1\/5 {
width: 20% !important;
}
.u-2\/5 {
width: 40% !important;
}
.u-3\/5 {
width: 60% !important;
}
.u-4\/5 {
width: 80% !important;
}
.u-5\/5 {
width: 100% !important;
}
@media screen and (min-width: 720px) {
.u-1\/1\@sm {
width: 100% !important;
}
.u-1\/2\@sm {
width: 50% !important;
}
.u-2\/2\@sm {
width: 100% !important;
}
.u-1\/3\@sm {
width: 33.33333% !important;
}
.u-2\/3\@sm {
width: 66.66667% !important;
}
.u-3\/3\@sm {
width: 100% !important;
}
.u-1\/4\@sm {
width: 25% !important;
}
.u-2\/4\@sm {
width: 50% !important;
}
.u-3\/4\@sm {
width: 75% !important;
}
.u-4\/4\@sm {
width: 100% !important;
}
.u-1\/5\@sm {
width: 20% !important;
}
.u-2\/5\@sm {
width: 40% !important;
}
.u-3\/5\@sm {
width: 60% !important;
}
.u-4\/5\@sm {
width: 80% !important;
}
.u-5\/5\@sm {
width: 100% !important;
}
}
@media screen and (min-width: 1024px) {
.u-1\/1\@md {
width: 100% !important;
}
.u-1\/2\@md {
width: 50% !important;
}
.u-2\/2\@md {
width: 100% !important;
}
.u-1\/3\@md {
width: 33.33333% !important;
}
.u-2\/3\@md {
width: 66.66667% !important;
}
.u-3\/3\@md {
width: 100% !important;
}
.u-1\/4\@md {
width: 25% !important;
}
.u-2\/4\@md {
width: 50% !important;
}
.u-3\/4\@md {
width: 75% !important;
}
.u-4\/4\@md {
width: 100% !important;
}
.u-1\/5\@md {
width: 20% !important;
}
.u-2\/5\@md {
width: 40% !important;
}
.u-3\/5\@md {
width: 60% !important;
}
.u-4\/5\@md {
width: 80% !important;
}
.u-5\/5\@md {
width: 100% !important;
}
}
@media screen and (min-width: 1200px) {
.u-1\/1\@lg {
width: 100% !important;
}
.u-1\/2\@lg {
width: 50% !important;
}
.u-2\/2\@lg {
width: 100% !important;
}
.u-1\/3\@lg {
width: 33.33333% !important;
}
.u-2\/3\@lg {
width: 66.66667% !important;
}
.u-3\/3\@lg {
width: 100% !important;
}
.u-1\/4\@lg {
width: 25% !important;
}
.u-2\/4\@lg {
width: 50% !important;
}
.u-3\/4\@lg {
width: 75% !important;
}
.u-4\/4\@lg {
width: 100% !important;
}
.u-1\/5\@lg {
width: 20% !important;
}
.u-2\/5\@lg {
width: 40% !important;
}
.u-3\/5\@lg {
width: 60% !important;
}
.u-4\/5\@lg {
width: 80% !important;
}
.u-5\/5\@lg {
width: 100% !important;
}
}
<div style="width: 2pc; height: 2pc; background: red;"></div>
<div style="width: 32px; height: 32px; background: red;"></div>
<div style="width: calc(1in/6); height: calc(1in/6); background: red;"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment