View _helpers.scss
@mixin vertical-3stop-gradient($fromColor, $viaColor, $toColor) { | |
background: #fff; /* Old browsers */ | |
background: -moz-linear-gradient(top, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $fromColor), color-stop(49%, $toColor), color-stop(50%, $viaColor), color-stop(100%, $toColor)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* IE10+ */ | |
background: linear-gradient(to bottom, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie-hex-str($fromColor)}', endColorstr=' |
View _helpers.scss
@mixin flip { | |
-moz-transform: scaleX(-1); | |
-o-transform: scaleX(-1); | |
-webkit-transform: scaleX(-1); | |
transform: scaleX(-1); | |
filter: FlipH; | |
-ms-filter: "FlipH"; | |
} |
View _helpers.scss
/* a box shadow that looks like a border. control border strength with $spread. */ | |
@mixin box-shadow-as-border($spread, $r, $g, $b, $a) { | |
-webkit-box-shadow: inset 0 0 1px $spread rgba($r, $g, $b, $a); | |
-moz-box-shadow: inset 0 0 1px $spread rgba($r, $g, $b, $a); | |
box-shadow: 0 0 1px $spread rgba($r, $g, $b, $a) inset; | |
} |
View _helpers.scss
/* shorthand for breakpoints. names as proposed by chris coyier (css-tricks) */ | |
@mixin breakpoint($point) { | |
@if $point == papa-bear { | |
@media (min-width: 980px) { | |
@content; | |
} | |
} @else if $point == mama-bear { | |
@media (max-width: 979px) { | |
@content; | |
} |
View _mixins.scss
//include a character with before | |
@mixin insert-before($char: '-') { | |
&:before { | |
content: $char; | |
@content; | |
} | |
} | |
@mixin checkmark() { | |
@include insert-before('√') { |
View _mixins.scss
//custom dashed border | |
@mixin dashed-border($dashlength, $spacelength, $borderwidth, $color, $position: top) { | |
$per: percentage($dashlength / ($dashlength + $spacelength)); | |
background-image: linear-gradient(to right, $color 0%, $color $per, rgba(0, 0, 0, 0) $per); | |
background-position: 0 $position; | |
background-size: ($dashlength + $spacelength) $borderwidth; | |
background-repeat: repeat-x; | |
} |
View _base.scss
/** | |
* The result of this file structure is ONE *.css file per theme. Making a global change | |
* to _base or _config partial will update all themes that inherit from them. #win | |
*/ | |
@import 'config'; | |
/** | |
* Global | |
*/ |
View SassMeister-input.scss
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
$base-color: green; | |
$base-color : red !default; | |
$base-link-color: $base-color !default; |
View SassMeister-input.scss
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
@function some-function($some-number:10, $another-number:5){ | |
@return $some-number + $another-number | |
} | |
.some-class { |
View gist:ad1f872725171f06658a
#!/bin/bash | |
branch=$(git symbolic-ref HEAD | cut -d '/' -f 3); | |
if [ "master" == "$branch" ]; then | |
lines[0]="Master, Master, where's the dreams that I've been after?" | |
lines[1]="Master, Master, you promised only lies" | |
lines[2]="Laughter, laughter, all I hear or see is laughter" | |
lines[3]="Laughter, laughter, laughing at my cries" | |
echo -e "\033[1;31m ${lines[$((RANDOM%${#lines[*]}))]} \033[0m"; | |
fi |
OlderNewer