Skip to content

Instantly share code, notes, and snippets.

View airen's full-sized avatar
💭
I may be slow to respond.

Airen airen

💭
I may be slow to respond.
View GitHub Profile
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:01
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//http://designwoop.com/2014/07/10-useful-sass-mixins-modern-developer/
@mixin css3($property, $value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}#{$property}: $value;
}
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:05
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/
@mixin breakpoint($point) {
@if $point == large {
@media (min-width: 64.375em) { @content; }
}
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:12
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//Thanks:http://signalvnoise.com/posts/3271-easy-retina-ready-images-using-scss
@mixin image-2x($image, $width, $height) {
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:15
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//Thanks:http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix() {
&:before,
&:after {
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:19
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//Thanks:http://sachagreif.com/useful-sass-mixins/
@function black($opacity){
@return rgba(0,0,0,$opacity)
}
@function white($opacity){
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:26
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//http://sachagreif.com/useful-sass-mixins/
@mixin box-emboss($opacity, $opacity2){
box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:38
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:38
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:43
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
top: $top;
right: $right;
@airen
airen / SassMeister-input.scss
Created August 8, 2014 14:45
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/
@mixin line-height($heightValue: 12 ){
line-height: $heightValue + px; //fallback for old browsers
line-height: (0.125 * $heightValue) + rem;