<h1>Mixin @include font(font-size, line-height, max-width)</h1>
<p>Line-height and max width is just only value with default value 0. Value 1 turn on this parts of mixin. <br><span class="one">If you need only calculate font-size just write: <br>@include font(12);</span><br><span class="two">If you need font-size and line-height write: <br>@include font(12, 1);</span><br><span class="three">If you want style perfect paragraph for user to read then you can also calculate max-width. For this just write: <br>@include font(12, 1,1);</span>
<br>
<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis aliquid animi reiciendis nulla eius velit adipisci, veritatis, qui laborum culpa eum. Aperiam, earum aliquid quaerat veritatis, harum iste perferendis molestiae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consectetur molestiae, minima pariatur nobis, eos ratione, animi consequatur quam debitis asperiores aliquam maiores dolore enim. Similique pariatur incidunt sequi a?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad fugit praesentium expedita sit quasi amet ratione? Consectetur est, consequatur, officiis asperiores repellat beatae hic in repudiandae commodi molestias natus! Necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore modi corporis reiciendis, quidem sed incidunt numquam porro suscipit voluptates iusto. Ratione mollitia sunt possimus atque, maiores natus recusandae consequuntur quos!</p>

/*
|----------------------------------------------------------
|	(Font size with line height) in px and rem's and max width in px 
| @include font(font default 16, line default off, width: default off)
| @include font(16, 1, 1);
|----------------------------------------------------------
|
*/
@mixin font($sizeValue: 16, $line: 0, $width: 0) {
  font-size: ($sizeValue) + px;
  font-size: ($sizeValue / 10) + rem;
  @if ($line==1) or ($line==yes)  {
    line-height: $sizeValue * 1.5 + px;
    line-height: (($sizeValue * 1.5) / 10) + rem;
	}
  @if ($width==1) or ($width==yes)  {
  	max-width: ($sizeValue *30) + px 

	}
}
p {
  //mixin
  @include font(12, 1, 1);
}


// page styles
body {
  width: 100%;
  margin: 0 auto;
  background-color: #393939;
}
h1 {
  text-align: center;
}

p {
   margin: 0 auto;
  color: #000000;
  background-color: white;
  padding: 10px;
}
span {
  font-weight: 600;
  &.one{ 
  color: green;
  }
  &.two {
  color: blue;  
  }
  &.three{
  color: green;  
  }
}