SASS snippets

mixin-absolute-positioning.scss

// ----------------------------------------------------
// absolute positioning
// ----------------------------------------------------

// Although it’s not particularly hard to absolutely
// position an element with CSS, you can save a lot of
// time with this mixin. It allows you to quickly
// specify values for the four directions:
// top, right, bottom, and left.

// mixin
// ----------------------------------------------------
@mixin abs-position ($top, $right, $bottom, $left) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// use
// ----------------------------------------------------

// To use the absolute positioning mixin, you simply
// need to add the values for the four directions.
// Don’t forget to pay attention to the order of the
// arguments. They follow each other in
// clockwise direction.

div {
  @include abs-position(100px, 100px, auto, auto);
}

// compiled CSS output 
// ----------------------------------------------------

// The compiled CSS is pretty straightforward;
// it’s just a simple rule set for absolute positioning.

// div {
//   position: absolute;
//   top: 100px;
//   right: 100px;
//   bottom: auto;
//   left: auto;
// }

mixin-animation-keyframes.scss

// ----------------------------------------------------
// keyframes
// ----------------------------------------------------

// You can create beautiful animations with CSS using
// the @keyframes rule. Mastering animations is not
// easy by any means. Even if you are a pro, the
// syntax can be still hard to remember. The following
// keyframes mixin makes use of the @content directive
// that allows you to pass a bunch of CSS rules to
// the mixin.

// mixin
// ----------------------------------------------------
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @-moz-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

// use
// ----------------------------------------------------

// The keyframes mixin takes one argument, the name of
// the animation. As the mixin uses the @content
// directive, you need to add the rules related to
// animation within the @include block.

@include keyframes(background) {
  0% {
    background: white;
  }

  50% {
    background: lightblue;
  }

  100% {
    background: royalblue;
  }
}

// compiled CSS output 
// ----------------------------------------------------

// The Sass compiler returns all the @keyframe
// declarations you need in order to run your animation
// smoothly in every browser.

// @-webkit-keyframes background {
//   0% {
//     background: white;
//   }
//   50% {
//     background: lightblue;
//   }
//   100% {
//     background: royalblue;
//   }
// }
// @-moz-keyframes background {
//   0% {
//     background: white;
//   }
//   50% {
//     background: lightblue;
//   }
//   100% {
//     background: royalblue;
//   }
// }
// @keyframes background {
//   0% {
//     background: white;
//   }
//   50% {
//     background: lightblue;
//   }
//   100% {
//     background: royalblue;
//   }
// }

mixin-fixed-aspect-ratio.scss

// ----------------------------------------------------
// Fixed aspect ratio
// ----------------------------------------------------

// If you want a consistent look across different
// screen sizes you will find this aspect ratio mixin
// useful. It maintains the aspect ratio at any screen
// size. To use this mixin, you need two HTML elements:
// an outer and an inner one. The mixin calculates the
// aspect ratio of the two elements and maintains
// that at any resolution.

// mixin
// ----------------------------------------------------
@mixin aspect-ratio($width, $height) {
  position: relative;

  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }

  >.inner-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

// use
// ----------------------------------------------------

// You need two HTML elements to make the aspect ratio
// mixin work. Both need to be either a block or an
// inline-block element.

// <div class="outer-box">
//    <div class="inner-box"></div>
// </div>

// In the SCSS, you need to define the aspect ratio
// within the arguments of the mixin and add the mixin
// to the outer element.

.outer-box {
  @include aspect-ratio(4, 3);
}




// compiled CSS output 
// ----------------------------------------------------

// The Sass-compiler calculates the aspect ratio and
// applies it to the padding-top rule.


// .outer-box {
//   position: relative;
// }
// .outer-box:before {
//   display: block;
//   content: "";
//   width: 100%;
//   padding-top: 75%;
// }
// .outer-box > .inner-box {
//   position: absolute;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
// }

mixin-fluid-typography.scss

  // https://css-tricks.com/snippets/css/fluid-typography/

  @function strip-unit($value) {
    @return $value / ($value * 0 + 1);
  }
  
  @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
    $u1: unit($min-vw);
    $u2: unit($max-vw);
    $u3: unit($min-font-size);
    $u4: unit($max-font-size);
  
    @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
      & {
        font-size: $min-font-size;
        @media screen and (min-width: $min-vw) {
          font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
        }
        @media screen and (min-width: $max-vw) {
          font-size: $max-font-size;
        }
      }
    }
  }

$min_width: 320px;
$max_width: 1200px;
$nav_min_font: 26px;
$nav_max_font: 60px;
$body_min_font: 20px;
$body_max_font: 40px;

html {
  @include fluid-type($min_width, $max_width, $nav_min_font, $nav_max_font);
  letter-spacing:5px;
}

mixin-font-face.scss

// ----------------------------------------------------
// font face
// ----------------------------------------------------

// It’s kind of annoying to add a separate @font-face
// rule to every custom font you want to use, especially
// since you need to support so many formats. With
// this following font-face mixin, you can make that
// tedious task much faster. Make sure that you use
// the right file path within the url() function.

// mixin
// ----------------------------------------------------
@mixin font-face($name, $file) {
  @font-face {
    font-family: "#{$name}";
    src: url("../fonts/#{$file}.eot");
    src: url("../fonts/#{$file}.eot?#iefix") format("embedded-opentype"),
    url("../fonts/#{$file}.woff") format("woff"),
    url("../fonts/#{$file}.ttf") format("truetype"),
    url("../fonts/#{$file}.svg?#webfont") format("svg");
  }
}

// use
// ----------------------------------------------------

// The font-face mixin has two arguments, the name of
// the font and the file name that will be part of the
// URL. You need to use the same file name with every
// font format (.eot, .woff, .ttf, etc.)

@include font-face("My Font", my-font);

// compiled CSS output 
// ----------------------------------------------------

// The compiled CSS is very elegant as you can see. The
// Sass compiler has concatenated the URL paths and
// returned the proper @font-face rule.

// @font-face {
//   font-family: "My Font";
//   src: url("../fonts/my-font.eot");
//   src: url("../fonts/my-font.eot?#iefix") format("embedded-opentype"),
//     url("../fonts/my-font.woff") format("woff"), url("../fonts/my-font.ttf") format("truetype"), url("../fonts/my-font.svg?#webfont") format("svg");
// }

mixin-media-queries-for-mobile-first-design.scss

// ----------------------------------------------------
// Media queries for mobile first design
// ----------------------------------------------------

// You can find several Sass mixins for media queries
// all over the web. However, this mixin allows you
// to use media queries that support mobile-first
// design. In mobile-first design, we design for the
// smallest screen at first, then define styles for
// larger screens wherever it’s necessary. You can
// use the following mixin with three breakpoints:
// tablet, desktop, and large. There’s no breakpoint
// for mobile because that’s the size you
// design for by default.

// mixin
// ----------------------------------------------------
@mixin breakpoint($point) {
  @if $point==large {
    @media only screen and (min-width: 1366px) {
      @content;
    }
  }

  @else if $point==desktop {
    @media only screen and (min-width: 1024px) {
      @content;
    }
  }

  @else if $point==tablet {
    @media only screen and (min-width: 600px) {
      @content;
    }
  }
}

// use
// ----------------------------------------------------

// Here, you only need to define one argument, the
// breakpoint you want to use. You can choose from
// tablet, desktop, and large. This mixin uses the
// @content directive, so you need to add the related
// CSS rules separately, within the @include rule.

@include breakpoint(large) {
  div {
    font-size: 2rem;
    line-height: 1.4;
  }
}

// compiled CSS output 
// ----------------------------------------------------

// As you can see below, the Sass-compiler has
// generated the proper media query for the screen
// size you want to apply these specific rules for.

// @media only screen and (min-width: 1366px) {
//   div {
//      font-size: 2rem;
//      line-height: 1.4;
//   }
// }

mixin-media-queries.scss

// ----------------------------------------------------
// Media queries
// ----------------------------------------------------

// Media queries allow you to easily add custom break
// points to your stylesheets, and quickly add custom
// responsive behavior within an element for different
// break points. However, littering stylesheet media
// queries can quickly become a cause for headaches,
// especially when it comes to maintaining them down
// the road. With Sass mixins, all that can change.

// mixin
// ----------------------------------------------------

// The if statement will emit a media query tuned to a
// particular screen size depending on the size name
// provided to the mixin. This will allow you to easily
// adjust the behavior of your CSS attributes
// accordingly. You can also customize the point in
// which you want to adjust your CSS attributes.
// Usually, the most responsive layouts will stick
// with 3 or 4 defined screen width dimensions to
// adjust the content to. The variance of screen sizes,
// devices, and applications is always expanding,
// but there is a popular trend many web developers
// will use for their layouts; small screen sizes for
// phones, medium for tablets, large for laptops,
// and extra large for desktop computers.

// Define the breakpoints
$breakpoint-small: 600px;
$breakpoint-med-small: 960px;
$breakpoint-med: 1175px;

@mixin screen($size, $type: max, $pixels: $breakpoint-small) {
  @if $size == 'small' {
    @media screen and ($type + -width: $breakpoint-small) {
        @content;
    }
  }
  @else if $size == 'med-small' {
    @media screen and ($type + -width: $breakpoint-med-small) {
        @content;
    }
  }
  @else if $size == 'med' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }
 @else if $size == 'large' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }
  @else if $size == 'custom' {
    @media screen and ($type + -width: $pixels + px) {
     @content;
    }
  }
  @else {
    @content;
  }
}

// use
// ----------------------------------------------------

// Using the mixin
.foo {
  @include screen(large) {
    width: 20%;
  }
  @include screen(med) {
    width: 40%;
  }
  @include screen(med-small) {
    width: 60%;
  }
  @include screen(small) {
    width: 80%;
  }
  @include screen(custom, max, 400) {
    width: 100%;
  }
}


// compiled CSS output 
// ----------------------------------------------------


// @media screen and (max-width: 1175px) {
//   .foo {
//     width: 20%;
//   }
// }
// @media screen and (max-width: 1175px) {
//   .foo {
//     width: 40%;
//   }
// }
// @media screen and (max-width: 960px) {
//   .foo {
//     width: 60%;
//   }
// }
// @media screen and (max-width: 600px) {
//   .foo {
//     width: 80%;
//   }
// }
// @media screen and (max-width: 400px) {
//   .foo {
//     width: 100%;
//   }
// }

mixin-pure-css-arrow.scss

// ----------------------------------------------------
// Arrow with four optional directions
// ----------------------------------------------------

// Even if an arrow is not the most spectacular part
// of a web page, we frequently need to use it. And,
// it’s not that easy to create it with CSS, as you
// need to use a certain technique that can be hard
// to remember. This mixin helps you quickly create
// an arrow with CSS. You can choose from four
// directions (up, down, left, right) and set
// the size and color of the arrow.

// mixin
// ----------------------------------------------------
@mixin arrow($direction: down, $size: 5px, $color: #555) {
  width: 0;
  height: 0;

  @if ($direction==left) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
  }

  @else if ($direction==right) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  }

  @else if ($direction==down) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
  }

  @else {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }
}

// use
// ----------------------------------------------------

// The arrow mixin takes three arguments: the
// direction, size, and color of the arrow. However,
// as the mixin also comes with defaults for the
// arguments (down, 5px, #555), you can also use it
// without specifying custom arguments. 

// without arguments (default)
div {
  @include arrow();
}

// with custom arguments
div {
  @include arrow(up, 10px, #efefef);
}

// compiled CSS output 
// ----------------------------------------------------

// Below, you can see how the compiled CSS looks like
// in both cases.

// // without arguments (default)
// div {
//   width: 0;
//   height: 0;
//   border-left: 5px solid transparent;
//   border-right: 5px solid transparent;
//   border-top: 5px solid #555;
// }

// // with custom arguments
// div {
//   width: 0;
//   height: 0;
//   border-left: 10px solid transparent;
//   border-right: 10px solid transparent;
//   border-bottom: 10px solid #efefef;
// }

mixin-retina-ready-images.scss

// ----------------------------------------------------
// retina-ready images
// ----------------------------------------------------

// Here is a great Sass mixin for supporting
// retina-ready images you can serve to Apple devices
// with a Retina Display. To use this mixin, you need
// to provide two versions of the same image, one in
// single size (1x) and one in double size (2x).
// You can use this mixin to provide a retina-ready
// background image for any HTML element.

// mixin
// ----------------------------------------------------
@mixin retina-image($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),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

// use
// ----------------------------------------------------

// You need to specify three arguments for this mixin:
// the file path to the retina image (2x) and its
// width and height.

.image {
  background: url("my-image.png") no-repeat;
  @include retina-image("my-image2x.png", 1000px, 500px);
}

// compiled CSS output 
// ----------------------------------------------------

// In the compiled CSS, you will find the proper media
// queries for Retina Display with all the
// necessary declarations.

// .image {
//   background: url("my-image.png") no-repeat;
// }

// @media (min--moz-device-pixel-ratio: 1.3),
// (-o-min-device-pixel-ratio: 2.6 / 2),
// (-webkit-min-device-pixel-ratio: 1.3),
// (min-device-pixel-ratio: 1.3),
// (min-resolution: 1.3dppx) {
//   .image {
//     background-image: url("my-image2x.png");
//     background-size: 1000px 500px;
//   }
// }

mixin-text-shortening.scss

// ----------------------------------------------------
// Text shortening
// ----------------------------------------------------

// mixin
// ----------------------------------------------------

// Our last mixin is quite simple to use but it can
// come in handy if you work a lot with text. It
// performs truncation on any text that overflows its
// containing element and adds an ellipsis (…) to the end.

@mixin text-shorten {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// use
// ----------------------------------------------------

// This mixin doesn’t take any argument, so you can add
// it to any element without much thinking.

div {
  @include text-shorten();
}

// compiled CSS output 
// ----------------------------------------------------

// The compiled CSS simply applies the specified rule
// set to the HTML element you’ve added the mixin to.

div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

mixin-transform.scss

// ----------------------------------------------------
// transform
// ----------------------------------------------------

// mixin
// ----------------------------------------------------
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

//use
.box {
  @include transform(rotate(30deg));
}

// compiled CSS output  =============================================

//  .box
//  {
//      -webkit-transform: rotate(30deg);
//      -ms-transform: rotate(30deg);
//      transform: rotate(30deg);
//  }

mixin-vendor-prefixes.scss

// ----------------------------------------------------
// vendor prefix
// ----------------------------------------------------

// You can use the following mixin to add vendor
// prefixes to any CSS property:

// mixin
// ----------------------------------------------------
@mixin css3-prefix($prop, $value) {
  -webkit-#{$prop}: #{$value};
  -moz-#{$prop}: #{$value};
  -ms-#{$prop}: #{$value};
  -o-#{$prop}: #{$value};
  #{$prop}: #{$value};
}

// use
// ----------------------------------------------------

// This mixin takes two arguments that you need to
// define when you call it with the @include rule. The
// first is the name of the CSS property, and the
// second is its value.

div {
  @include css3-prefix(transform, scale3d(2.5, 2, 1.5));
}

// compiled CSS output 
// ----------------------------------------------------

// In the compiled CSS, you will see that Sass has
// added all the necessary vendor prefixes to the
// transform property, used in the example.

// div 
// 
//    -webkit-transform: scale3d(2.5, 2, 1.5);
//    -moz-transform: scale3d(2.5, 2, 1.5);
//    -ms-transform: scale3d(2.5, 2, 1.5);
//    -o-transform: scale3d(2.5, 2, 1.5);
//    transform: scale3d(2.5, 2, 1.5);
// }

mixin-vertical-align.scss

// ----------------------------------------------------
// vertical align
// ----------------------------------------------------

// Vertical alignment with CSS is hard, as it doesn’t
// have a property that explicitly lets you vertically
// align elements. The following mixin contains all
// the CSS declarations you need to vertically
// position any HTML element you want:

// mixin
// ----------------------------------------------------
@mixin vertical-center {
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

// use
// ----------------------------------------------------

// As this mixin doesn’t take any argument, it’s pretty
// easy to call it. You simply need to add it to the
// @include rule. Don’t forget to add the parentheses
// after the name of the mixin.

div {
  @include vertical-center();
}

// compiled CSS output 
// ----------------------------------------------------

// The Sass compiler simply adds the CSS declaration
// to the selector you want to position vertically.

// div {
//   position: relative;
//   top: 50%;
//   -ms-transform: translateY(-50%);
//   -webkit-transform: translateY(-50%);
//   transform: translateY(-50%);
// }

sass-commands.md

SASS - commands

Change directory you want to run sass on

• cd disk drive

Run sass watch command on file/director

• sass --watch file/directory

Command template

• sass --watch --sourcemap=none sass:css --style expanded

The Style part can be any of the below based on your desired CSS output

• nested
• compact
• expanded
• compressed

To stop the SASS watch you run this command

• control+c