LukyVj

$icons: "phone", "twitter", "email";

@each $icon in $icons {
  .ico{
    display: block;
    &:before{
      @include single-element();
      @include square(1.2em);
    }
    &[class*="ico-#{($icon)}"]{

LukyVj

ul li {
  list-style: none;
}

ul li:nth-child(1):before, ul li:nth-child(1):after {
  display: block;
  color: red;
}
ul li:nth-child(1):before {
  content: "one > ";

LukyVj

// This code snippet is from : http://stackoverflow.com/questions/8897289/how-to-check-if-element-is-off-screen
 
  jQuery.expr.filters.onscreen = function(el) {
    return (
      (el.offsetLeft + el.offsetWidth) > 0 
      || (el.offsetTop + el.offsetHeight) > 0
      || (el.offsetLeft > window.innerWidth || el.offsetTop < window.innerHeight)
    );
  };
  

LukyVj

@charset "UTF-8";


.introjs-overlay {
}


.introjs-showElement {
 
}

LukyVj

$icons: "facebook", "twitter", "instagram";
$size: 1.2em; 
 
@each $icon in $icons {
  .ico{
    display: block;
    &:before{
      content: '';
      display: block; 
      width: $size;

LukyVj

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----


$font: 'font-a';
@mixin fontWeight($font){
  @if($font == 'font-a'){
    font-weight: 900;

LukyVj

/* This morning while browsing twitter, I've found a tweet from @DavidKaneda : 
  "Does anyone have a CSS trick (ahem, @chriscoyier) for changing font-weight 
  based on available/used font?"
  
  And it gave me the idea of this small sass snippet. 
  By the way, this is not what he meant. But it's still cool. 
*/ 

$font: 'font-a';
$font: 'font-b';

LukyVj

<div class="icons">
      <header>
        <h2>Material Design Icons</h2>
      </header> 

      <span class="m-icon ic_3d_rotation"></span>
      <span class="m-icon ic_accessibility"></span>
      <span class="m-icon ic_account_balance"></span>
      <span class="m-icon ic_account_balance_wallet"></span>
      <span class="m-icon ic_account_box"></span>

LukyVj

/* How to use an @if condition into an @each control directive in SASS */

// First, define your variables, here, we'll use colors only. 
$c-red : #f44336;
$c-pink: #E91E63;
$c-purple: #9c27b0;
$c-deeppurple: #673ab7;
$c-indigo : #3f51b5;
$c-blue: #2196F3;
$c-lightblue: #03a9f4;

LukyVj

<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ipsa assumenda officia ipsam numquam maxime fugit, aliquam dolore aliquid soluta veritatis reiciendis doloremque consequuntur eum doloribus commodi! Minima, optio, earum.</p>