css preprocessor CheatSheet

_mixin.scss

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

@mixin animate-time($time){
  -webkit-animation-duration: $time;
  -mos-animation-duration: $time;
  -mw-animation-duration: $time;
  animation-duration: $time;
}

@mixin gradient-top-bottom($topColor,$bottomColor){
  background: $topColor; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient($topColor, $bottomColor); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient($topColor, $bottomColor); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient($topColor, $bottomColor); /* For Firefox 3.6 to 15 */
  background: linear-gradient($topColor, $bottomColor); /* Standard syntax */
}

@mixin box-shadow($horizontalOffset,$verticalOffser,$blurRadius,$spreadRadius,$color){
  -webkit-box-shadow: $horizontalOffset $verticalOffser $blurRadius $spreadRadius $color;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    $horizontalOffset $verticalOffser $blurRadius $spreadRadius $color;  /* Firefox 3.5 - 3.6 */
  box-shadow:         $horizontalOffset $verticalOffser $blurRadius $spreadRadius $color;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

//  mixin media query ------------------------------------------------*/
/* How to use:
div.className{
	@media #{map-get($mobile, potrait)}{ //css goes here }
}
----------------------------------------------------------------------*/

$mobile:(
        potrait: "(max-width: 480px) and (orientation: portrait)",
        lndscape: "(min-width: 481px) and (max-width: 767px) and (orientation: landscape)"
);
$tablet:(
        potrait: "(min-width: 768px) and (max-width: 991px) and (orientation: portrait)",
        lndscape: "(min-width: 992px) and (max-width: 1199px) and (orientation: landscape)"
);
$iphone4:(
        all: "only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)",
        potrait: "only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)",
        lndscape: "only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)"
);
$iphone5:(
        all: "only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)",
        potrait: "only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)",
        lndscape: "only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)"
);
$iphone6:(
        all: "only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)",
        potrait: "only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)",
        lndscape: "only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)"
);
$iphone6p:(
        all: "only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)",
        potrait: "only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait)",
        lndscape: "only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape)"
);
$ipad:(
        potrait: "only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)",
        lndscape: "only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)"
);

.nopaddings {padding: 0 !important;}
.nolpadding {padding-left: 0 !important;}
.norpadding {padding-right: 0 !important;}
.notpadding {padding-top: 0 !important;}
.nobpadding {padding-bottom: 0 !important;}
.nolrpadding {padding-left: 0 !important;padding-right: 0 !important;}
.notbpadding {padding-top: 0 !important;padding-bottom: 0 !important;}


/********
:)
wimpy katana
*/

media-queries.less

// Breakpoints
// ------------------------- Source: http://blog.scur.pl/2012/06/variable-media-queries-less-css/
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";

//how to use
section, div, span {
    @media @mobile {
      background: orange;
    }
    @media @tablet {
      background: purple;
    }
    @media @desktop {
      background: green;
    }
    @media @desktop-xl {
      background: blue;
    }
    @media @desktop, @desktop-xl {
      color: black;
    }
}