Skip to content

Instantly share code, notes, and snippets.

@htmlzengarden
Last active August 29, 2015 14:13
Show Gist options
  • Save htmlzengarden/2825257a68bee543feda to your computer and use it in GitHub Desktop.
Save htmlzengarden/2825257a68bee543feda to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<base target="_blank" />
<h1 class="h2">Classes</h1>
<p><a href="http://codepen.io/vincent-valentin/pen/gbPvpQ">Voir sur CodePen</a></p>
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// SassyLists (v2.2.1)
// ----
$lte-ie8: false;
$rem: not $lte-ie8;
$mq-responsive: not $lte-ie8;
$box-sizing: false;
$gutter: 24px!default;
$col: $gutter * 3!default;
$cols: 10!default;
$external-gutters: false!default;
$black: #000!default;
$white: #fff!default;
$green: #0F0!default;
$bfs: 16px!default;
$fs0: $bfs!default;
$ratios:(
double-octave: 1/4,
major-twelfth: 1/3,
major-eleventh: 3/8,
major-tenth: 2/5,
octave: 1/2,
major-seventh: 8/15,
minor-seventh: 9/16,
major-sixth: 3/5,
golden: 1/1.618,
minor-sixth: 5/8,
fifth: 2/3,
augmented-fourth: 1/1.4142135,
fourth: 3/4,
major-third: 4/5,
minor-third: 5/6,
major-second: 8/9,
minor-second: 15/16,
prime: 1/1
)!default;
$lh: round($fs0 / map-get($ratios, fifth))!default;
$ratio: map-get($ratios, fifth)!default;
$number1: $fs0 * 1!default;
$number2: $fs0 * 2!default;
$offset: 0!default;
$amplitude: 10!default;
$scale1: $number1;
$scale2: $number2;
$i: 0;
@while $i < $amplitude
{
$next1: nth($scale1, length($scale1)) / $ratio;
$next2: nth($scale2, length($scale2)) / $ratio;
$prev1: nth($scale1, 1) * $ratio;
$prev2: nth($scale2, 1) * $ratio;
$scale1: join($scale1, $next1);
$scale2: join($scale2, $next2);
$scale1: join($prev1, $scale1);
$scale2: join($prev2, $scale2);
$i: $i + 1;
}
@import 'SassyLists';
$scale: sl-sort(join($scale1, $scale2));
$roundscale: ();
@each $step in $scale
{
$roundscale: join($roundscale, round($step));
}
$scale: $roundscale;
$scale: sl-remove-duplicates($scale);
@function strip-unit($number)
{
@return $number / ($number * 0 + 1);
}
@function em($px, $contexte: $fs0)
{
@return(strip-unit($px) / strip-unit($contexte) * 1em);
}
@function pt($px)
{
@return(strip-unit($px) * map-get($ratios, fourth) * 1pt);
}
@function rem($px)
{
@if $rem
{
@return(strip-unit($px) / strip-unit($fs0) * 1rem);
}
@else
{
@return(strip-unit($px) * 1px);
}
}
@function pourcent($px, $contexte: grid-cols-width($cols))
{
@return(strip-unit($px) * 100 / strip-unit($contexte) * 1%);
}
@function grid-cols-width($col-nb: 1)
{
@return ($col * $col-nb) + ($gutter * ($col-nb - 1));
}
@function grid-col-width($col-nb: 1, $context: 1, $gutter-pourcent: pourcent($gutter))
{
$gutter-nb: $col-nb - 1;
@return (100% - (strip-unit($gutter-pourcent) * $gutter-nb * $context)) / $col-nb;
}
@function lines($font-size, $line-height: $lh)
{
@return ceil(2 * $font-size / $line-height) / 2;
}
@function scale($level: 0)
{
$start: nth($scale1, $amplitude + 1);
@return nth($scale, index($scale, $start) + $level + $offset);
}
@mixin clearfix
{
zoom: 1;
&:before,
&:after
{
content: '';
display: table;
}
&:after
{
clear: both;
}
}
@mixin reset
{
margin: 0!important;
padding: 0!important;
border: 0!important;
background-color: transparent;
list-style-type: none;
}
@mixin visually-hidden
{
position: absolute!important;
padding: 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
}
@mixin visually-visible
{
position: static!important;
height: auto!important;
width: auto!important;
clip: auto;
overflow: visible;
}
@mixin roll
{
text-decoration: none;
&:hover,
&:focus
{
text-decoration: underline;
}
}
@mixin unroll
{
text-decoration: underline;
&:hover,
&:focus
{
text-decoration: none;
}
}
@mixin stretch($length: 0)
{
position: absolute;
left: $length;
top: $length;
bottom: $length;
right: $length;
@if strip-unit($length) < -999
{
margin: auto;
}
}
@mixin typo($fs, $context: $fs0)
{
font-size: em($fs, $context);
margin-bottom: em($lh, $fs);
line-height: em(lines($fs) * $lh, $fs);
}
.unit
{
$fs1: 20px;
width: strip-unit(1em);
width: strip-unit(2px);
width: strip-unit(3%);
height: em($fs1);
.unit
{
$fs2: 40px;
height: em($fs1, $fs2);
}
height: pt(20px);
height: rem(20px);
height: pourcent(20px);
height: pourcent(20px, 40px);
}
.grid-cols-width
{
width: grid-cols-width();
width: grid-cols-width(2);
width: grid-cols-width(3);
width: grid-cols-width(4);
}
.grid-col-width
{
width: grid-col-width();
width: grid-col-width(2);
width: grid-col-width(3);
width: grid-col-width(4);
}
.lines
{
height: lines(40px);
height: lines(40px, 40px);
}
.scale
{
font-size: scale(-1);
font-size: scale();
font-size: scale(1);
font-size: scale(2);
}
.clearfix
{
@include clearfix;
}
.reset
{
@include reset;
}
.visually-hidden
{
@include visually-hidden;
}
.visually-visible
{
@include visually-visible;
}
.roll
{
@include roll;
}
.unroll
{
@include unroll;
}
.stretch
{
@include stretch;
}
.stretch-super
{
@include stretch(-999em);
}
.typo
{
$fs1: 20px;
@include typo($fs1);
.typo
{
$fs2: 40px;
@include typo($fs2, $fs1);
}
}
.unit {
width: 1;
width: 2;
width: 3;
height: 1.25em;
height: 15pt;
height: 1.25rem;
height: 2.13675%;
height: 50%;
}
.unit .unit {
height: 0.5em;
}
.grid-cols-width {
width: 72px;
width: 168px;
width: 264px;
width: 360px;
}
.grid-col-width {
width: 100%;
width: 48.71795%;
width: 31.62393%;
width: 23.07692%;
}
.lines {
height: 2;
height: 1;
}
.scale {
font-size: 14px;
font-size: 16px;
font-size: 21px;
font-size: 24px;
}
.clearfix {
zoom: 1;
}
.clearfix:before, .clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.reset {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent;
list-style-type: none;
}
.visually-hidden {
position: absolute !important;
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
}
.visually-visible {
position: static !important;
height: auto !important;
width: auto !important;
clip: auto;
overflow: visible;
}
.roll {
text-decoration: none;
}
.roll:hover, .roll:focus {
text-decoration: underline;
}
.unroll {
text-decoration: underline;
}
.unroll:hover, .unroll:focus {
text-decoration: none;
}
.stretch {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.stretch-super {
position: absolute;
left: -999em;
top: -999em;
bottom: -999em;
right: -999em;
}
.typo {
font-size: 1.25em;
margin-bottom: 1.2em;
line-height: 1.2em;
}
.typo .typo {
font-size: 2em;
margin-bottom: 0.6em;
line-height: 1.2em;
}
<base target="_blank" />
<h1 class="h2">Classes</h1>
<p><a href="http://codepen.io/vincent-valentin/pen/gbPvpQ">Voir sur CodePen</a></p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment