Category: CSS

Some useful SASS Mixins
December 25th, 2015 CSS 454 views

Alright, Time to post something useful as lately I have become the lazy blogger 🙂 . Here is a couple of useful SASS mixins that I always use on the websites that I design. Size

Sass
1
2
3
4
@mixin size($width, $height: $width) {
      width: $width;
      height: $height;
}

Clearfix

Sass
1
2
3
4
5
6
7
8
9
10
@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

Absolute Position

Sass
1
2
3
4
5
6
7
@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

Border Radius

Sass
1
2
3
4
5
6
7
8
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
  background-clip: padding-box;
}

Background Gradient

Sass
1
2
3
4
5
6
7
8
9
10
@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
    background-color: $startColor;
    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
    background-image:    -moz-linear-gradient(top, $startColor, $endColor);
    background-image:     -ms-linear-gradient(top, $startColor, $endColor);
    background-image:      -o-linear-gradient(top, $startColor, $endColor);
    background-image:         linear-gradient(top, $startColor, $endColor);
    filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}

Box Shadow

Sass
1
2
3
4
5
6
7
8
9
10
11
@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4), $inset: "") {
  @if ($inset != "") {
    -webkit-box-shadow: $inset $x $y $blur $color;
    -moz-box-shadow:    $inset $x $y $blur $color;
    box-shadow:         $inset $x $y $blur $color;
  } @else {
    -webkit-box-shadow: $x $y $blur $color;
    -moz-box-shadow:    $x $y $blur $color;
    box-shadow:         $x $y $blur $color;
  }
}

Text Shadow

Sass
1
2
3
@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
    text-shadow: $x $y $blur $color;
}

Transition Animation

Sass
1
2
3
4
5
6
7
@mixin transition($what: all, $length: 1s, $easing: ease-in-out) {
    -moz-transition:    $what $length $easing;
    -o-transition:      $what $length $easing;
    -webkit-transition: $what $length $easing;
    -ms-transition:     $what $length $easing;
    transition:         $what $length $easing;
}

Hope […]

Read more  

Hello! I am Aslam Doctor

I am a freelance web developer and a father from the country full of colors – India. And please, I am not a Doctor – it is just my surname as I come from a family of doctors.

What will I be writting on this blog?

Most of the time I will be writing about my daily life experience in freelance, problems and solutions on the skills I know from different categories which are PHP, Apache, MySQL, WordPress, Bootstrap, jQuery…

Read about me: Here
Contact me: Here

Thank You!

My Workplace

Copyright © Aslam Doctor · Freelance Web Developer ·