Skip to content

Instantly share code, notes, and snippets.

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