General

decimal-round(0.333)    => 0
decimal-round(0.333, 1) => 0.3
decimal-round(0.333, 2) => 0.33
decimal-round(0.666)    => 1
decimal-round(0.666, 1) => 0.7
decimal-round(0.666, 2) => 0.67

decimal-ceil(0.333)    => 1
decimal-ceil(0.333, 1) => 0.4
decimal-ceil(0.333, 2) => 0.34
decimal-ceil(0.666)    => 1
decimal-ceil(0.666, 1) => 0.7
decimal-ceil(0.666, 2) => 0.67

decimal-floor(0.333)    => 0
decimal-floor(0.333, 1) => 0.3
decimal-floor(0.333, 2) => 0.33
decimal-floor(0.666)    => 0
decimal-floor(0.666, 1) => 0.6
decimal-floor(0.666, 2) => 0.66

$result: _last-simple-selector(ul > li); // li

//SCSS
@include b(block) {
   background: red;
   @include e(header){
       font-size: 14px;

       @include m(css) {
           font-size: 18px;
       }
   };
}
//CSS
.block {
    background: red;
}
.block__header {
   font-size: 14px;
}
.block__header--css {
   font-size: 18px;
}

//SCSS
@include b(block) {
   background: red;
   @include e(header){
       font-size: 14px;

       @include m(css) {
           font-size: 18px;
       }
   };
}
//CSS
.block {
    background: red;
}
.block__header {
   font-size: 14px;
}
.block__header--css {
   font-size: 18px;
}

//SCSS
@include b(block) {
   background: red;
   @include e(header){
       font-size: 14px;

       @include m(css) {
           font-size: 18px;
       }
   };
}
//CSS
.block {
    background: red;
}
.block__header {
   font-size: 14px;
}
.block__header--css {
   font-size: 18px;
}

//SCSS

.alert{
	@include alert-variant(#f36,darken(#f36,5%),#333);
}

//CSS 

.alert {
 	background-color: #ff3366;
  	border-color: #ff1a53;
  	color: #333333;
}

.alert a {
  	color: #1a1a1a;
}

//SCSS

@include am(module) {
    color: red;
}

@include am(module, blue) {
  color: blue;
}

@include am(module, large) {
  font-size: 2em;
}

//CSS

[am-module] {
  color: red;
}

[am-module~="blue"] {
  color: blue;
}

[am-module~="large"] {
  font-size: 2em;
}

//SCSS
.anime {
   @include animation(
       (
           animationName: zoom,
           keyframes: (
               0: (
                   transform: scale(1),
                   background-color: blue
               ),
               100: (
                   transform: scale(3),
                   background-color: red
               )
           ),
           duration: 2,
           waitTime: 1,
           timingFunction: ease,
           iterationCount: infinite
     )
   );
}

//CSS
    .anime {
        animation: zoom 2s ease 1s infinite;
    }
    @keyframes zoom {
        0% {
            transform: scale(1);
            background-color: blue;
        }
        66.66666667% {
            transform: scale(3);
            background-color: red;
        }
        100% {
            transform: scale(3);
            background-color: red;
        }
    }

//SCSS

.justify-center {
    @include box-center;
}

//CSS

.justify-cnter {
    display: flex;
    justify-content: center;
    align-items: center;
}

//SCSS
.center{
  @include center-translate;
}
//CSS
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

//SCSS
div {
	@include box-clamp;
}

.box {
	@include box-clamp(3);
}
//CSS
div {
  overflow: hidden;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.box {
  overflow: hidden;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

//SCSS
.burger {
 @include burger;
}
//Output CSS
.burger {
 position: relative;
 margin-top: 8px;
 margin-bottom: 8px;
 user-select: none;
}
.burger, .burger::before, .burger::after {
  display: block;
  width: 30px;
  height: 5px;
  background-color: #000;
  outline: 1px solid transparent;
  transition-property: background-color, transform;
  transition-duration: 0.3s;
}
.burger::before, .burger::after {
  position: absolute;
  content: "";
}
.burger::before {
  top: -8px;
}
.burger::after {
  top: 8px;
}

//SCSS
.burger {
 @include burger-top {
   background-color: red;
 }
}
//Output CSS
.burger,
.burger::before,
.burger::after {
 background-color: red;
}

//SCSS
.burger {
 @include burger-top {
   background-color: red;
 }
}
//Output CSS
.burger::before {
 background-color: red;
}

//SCSS
.burger {
 @include burger-middle {
   background-color: red;
 }
}
//Output CSS
.burger {
 background-color: red;
}

//SCSS
.burger {
 @include burger-bottom {
   background-color: red;
 }
}
//Output CSS
.burger::after {
 background-color: red;
}

//SCSS
.btn{
	@include button-size(5px,15px,16px,1.5,null);
}
//CSS
.btn {
 	padding: 5px 15px;
 	line-height: 1.5;
}

//SCSS
.btn {
 	@include button-variant(#fff,#f36,#f36);
}
//CSS
.btn {
	color: #fff;
	background-color: #f36;
	border-color: #f36;
	transition: all .2s ease;
}
.btn:hover,
.btn:focus,
.btn:active {
 	color: #fff;
  	background-color: #ff245b;
 	border-color: #ff1a53;
}
.btn[disabled],
.btn[disabled]:hover,
.btn[disabled]:focus,
.btn[disabled]:active,
fieldset[disabled] .btn,
fieldset[disabled] .btn:hover,
fieldset[disabled] .btn:focus,
fieldset[disabled] .btn:active {
  	background-color: #f36;
 	border-color: #f36;
}

//SCSS
.calc{
	 @include calc(width,'100% - 20px');
}
//CSS
.calc {
	width: calc(100% - 20px);
}

//SCSS
.caret{
  @include caret(absolute,50px,1px,bottom,red,#ccc);
}
//CSS
.caret {
    position: absolute;
}
.caret:before, .caret:after {
   content: "";
  `position: absolute;
}
.caret:before {
   top: 0;
   left: 0;
   border-top: 50px solid red;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
}
.caret:after {
   left: 1px;
   top: 0;
   border-top: 49px solid #ccc;
   border-left: 49px solid transparent;
   border-right: 49px solid transparent;
}

//SCSS
$shortand:40px 20px solid red;
.corners {
  @include corners($shortand);
}
//OutPut CSS
.corners {
  border: 20px solid red;
  clip-path: polygon(0 40px, 0 0, 40px 0, 40px 21px, calc(100% - 40px) 21px, calc(100% - 40px) 0, 100% 0, 100% 40px, calc(100% - #bw - 1px) 40px, calc(100% - #bw - 1px) calc(100% - 40px), 100% calc(100% - 40px), 100% 100%, calc(100% - 40px) 100%, calc(100% - 40px) calc(100% - #bw - 1px), 40px calc(100% - #bw - 1px), 40px 100%, 0 100%, 0 calc(100% - 40px), 21px calc(100% - 40px), 21px 40px);
}

//SCSS
p {
  color: #fff;
  @supports(mix-blend-mode: screen){
    @include fadeText(light, top, 3rem);
  }
}
//Output CSS
p {
 color: #fff;
}

//SCSS
.fluid-ratio{
  	@include fluid-ratio(800 400,300 150);
}
//Out CSS
.fluid-ratio {
  	padding-top: 50%;
  	height: 0;
  	background-size: cover;
  	background-position: center;
}

//SCSS
.full-width {
  @include full-width(margin, 960px);
}
//CSS
.full-width {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

//SCSS

//SCSS
blockquote {
    @include plumber-box(
        $margin: 2 0, // top margin: 2, bottom margin: 0
        $padding: 1 1 // top padding: 1, bottom padding: 1
    );
}
//Oupt CSS
blockquote {
    margin-top: 2rem;
    padding-top: 1rem;
    margin-bottom: 0;
    padding-bottom: 1rem;
}

//SCSS
p {
    @include plumber(
        $grid-height: 1rem,
        $baseline: 0.158203,
        $font-size: 1.75,
        $line-height: 3,
        $leading-top: 1,
        $leading-bottom: 2
    );
    font-family: Roboto, sans-serif;
}
Output CSS
p {
    font-size: 1.75rem;
    line-height: 3rem;
    margin-top: 0;
    padding-top: 0.81641rem;
    padding-bottom: 0.18359rem;
    margin-bottom: 2rem;
    font-family: Roboto, sans-serif;
}

//SCSS

.absolute{
  @include position(absolute,top 10px right 20px);
}
.absolute{
  @include position(absolute,top 0 right 0 bottom 0 left 0);
}

//Output CSS

.absolute {
  top: 10px;
  right: 20px;
  position: absolute; 
}

.absolute {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute; 
}

@include scrollbars(.5em, slategray);

//SCSS
.tabs {
    .tab {
        background: red;
        &:hover {
            background: white;
        }
        .tab-link {
            color: white;
            @include context('.tab', '.tab:hover') {
                color: red;
            }
        }
    }
}
//CSS
.tabs .tab {
 	background: red;
}
.tabs .tab:hover {
 	background: white;
}
.tabs .tab .tab-link {
 	color: white;
}
.tabs .tab:hover .tab-link {
 	color: red;
}

//SCSS
.tab {
	background: red;

    &:hover {
    	background: white;
    }

  	.tab-link {
    	color: white;

        @include parentState(':hover', '.active') {
        	color: pink;
        }            
	}
}
//CSS
.tab {
  	background: red;
}
.tab:hover {
  	background: white;
}
.tab .tab-link {
  	color: white;
}
.tab:hover .tab-link {
  	color: pink;
}
.tab.active .tab-link {
  	color: pink;
}

//SCSS
.icon-toggle {
  width: 1.56em;
  height: 0.75em;
  position: relative;
  display: inline-block;
  border-top: solid .125em #60666c;

  @include pseudo-elements(before, 1.56em, .125em) {
    background: #888c91;
    top: .25em;
  }
  @include pseudo-elements(after, 1.56em, .125em) {
    background: #afb3b5;
    bottom: 0;
  }
}
// Out CSS
.icon-toggle {
  width: 1.56em;
  height: 0.75em;
  position: relative;
  display: inline-block;
  border-top: solid .125em #60666c;
}
.icon-toggle:before {
  content: "";
  position: absolute;
  width: 1.56em;
  height: 0.125em;
  background: #888c91;
  top: .25em;
}
.icon-toggle:after {
  content: "";
  position: absolute;
  width: 1.56em;
  height: 0.125em;
  background: #afb3b5;
  bottom: 0;
}

//SCSS
.nav-menu {
  li {
    float: left;
    a {
      color: blue;
      @include parent-hover {
        color: purple;
      }
    }
    .sub-menu {
      display: none;
      @include parent-hover {
        display: block;
      }
    }
  }
}
//Out CSS
.nav-menu li {
  float: left;
}
.nav-menu li a {
  color: blue;
}
.nav-menu li:hover a {
  color: purple;
}
.nav-menu li .sub-menu {
  display: none;
}
.nav-menu li:hover .sub-menu {
  display: block;
}

//SCSS
.a .b, .a .c {
  @include parent-nth-status(1, ':hover', suffix) {
    color: red;
  }
  @include parent-nth-status(1, '.en', prepend) {
    color: green;
  }
  @include parent-nth-status(-2, '.target', append) {
    colore: blue;
  }
}
// Out CSS
.a:hover .b, .a:hover .c {
  color: red;
}
.en .a .b, .en .a .c {
  color: green;
}
.a .target .b, .a .target .c {
  color: blue;
}

//SCSS
.tab {
  a {
    display: inline-block;
    padding: 10px 60px;
    cursor: pointer;

    &:hover {
      background: #AAA;
    }

    i {
      margin-left: 10px;

      @include parent-status(':hover') { color: red; }

      @include parent-status('.home-link') { background: blue; }

      @include parent-status('.about-link') { background: green; }
    }
  }
}
// Out CSS
.tab a {
  display: inline-block;
  padding: 10px 60px;
  cursor: pointer;
}
.tab a:hover {
  background: #AAA;
}
.tab a i {
  margin-left: 10px;
}
.tab a:hover i {
  color: red;
}
.tab a.home-link i {
  background: blue;
}
.tab a.about-link i {
  background: green;
}

ul li {
  @include at-least(4) { color: red; }
}

ul li {
  @include at-least(6, '*') { color: blue; }
}

ul li {
  @include at-most(4) { color: red; }
}

ul li {
  @include at-most(6, '*') { color: blue; }
}

ul li {
  @include between(4, 8) { color: red; }
}

ul li {
  @include between(6, 10, '*') { color: blue; }
}

ul li {
  @include exactly(4) { color: red; }
}

ul li {
  @include exactly(6, '*') { color: blue; }
}

//SCSS
li {
 @include select-range(3,5){
   color: red;
 }
}
//Output CSS
li:nth-child(n+3):nth-child(-n+5) {
 color: red;
}

//SCSS
li{
 @include mod-list(3,1){
   color: green;
 }
}
//Output CSS
li:nth-last-child(3n+1):first-child,
li:nth-last-child(3n+1):first-child ~ li {
 color: green;
}

//SCSS
.box {
	@include dimensions(100px,200px);
}
//Output CSS
.box {
	width: 100px;
	height: 200px;
}

//SCSS
.spriteAnimate {
	@include spriteSpirit(
		'sprite',
   		'//www.w3cplus.com/img/srpite.png',
	    false,
		800px,
	    100px,
	    8,
	    1s
	  )
}

//SCSS
$minScreen: 20rem; // $min-vw
$maxScreen: 50rem; // $max-vw
$minFont: .8rem; // $min-value
$maxFont: 2rem; // $max-value
:root {
	@include fluid-type(font-size, $minScreen, $maxScreen, $minFont, $maxFont);
}
//Output CSS
:root {
  font-size: 0.8rem;
}
@media screen and (min-width: 20rem) {
  :root {
    font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));
  }
}
@media screen and (min-width: 50rem) {
  :root {
    font-size: 2rem;
  }
}

body {
	@include body();
}

body {
    font-size: 18px;
    line-height: 22px;
}

h1 {
	@include heading(3, "em");
}

h2 {
	@include heading(2, "px");
}

h3 {
	@include heading(1, "pxrem");
}

h4 {
	@include heading(0);
}

h1 {
    font-size: 4.22222em;
    line-height: 1.15789em;
    margin-bottom: 0.28947em;
    margin-top: 0.57895em;
}

h2 {
    font-size: 47px;
    line-height: 66px;
    margin-bottom: 22px;
    margin-top: 44px;
}

h3 {
    font-size: 29px;
    line-height: 44px;
    margin-bottom: 22px;
    margin-top: 22px;
    font-size: 1.8125rem;
    line-height: 2.75rem;
    margin-bottom: 1.375rem;
    margin-top: 1.375rem;
}

h4 {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 22px;
    margin-top: 22px;
    font-size: 1.125rem;
    line-height: 1.375rem;
    margin-bottom: 1.375rem;
    margin-top: 1.375rem;
}

p, ul, ol, pre, table, blockquote {
	@include margins();
}

p, ul, ol, pre, table, blockquote {
   margin-bottom: 22px;
   margin-top: 22px;
}