Beginning css preprocessors

Listing 3-28.  Example of Implementing @at-root

.productImage {

  height: 150px;

  width: 150px;

 

  @at-root {

    @keyframes panimate {

      0% { transform: scale(1.0); }

      25% { transform: scale(1.1); }

      50% { transform: scale(1.2); }

      75% { transform: scale(1.1); }

      100% { transform: scale(1.0); }

    }

  }

  &:hover {

    animation: panimate .8s infinite;

  }

}

---

Chapter 3 

■

 advanCed SaSS

46

In this example, you can see that putting an animation declaration that will be used for this specific 

element inside the definition with @at-root increases the overall code readability.

Listing 3-29.  Output of Listing 

3-28

.productImage {

  height: 150px;

  width: 150px;

}

 

@keyframes panimate {

  0% {

    transform: scale(1);

  }

  25% {

    transform: scale(1.1);

  }

  50% {

    transform: scale(1.2);

  }

  75% {

    transform: scale(1.1);

  }

  100% {

    transform: scale(1);

  }

}

 

.productImage:hover {

  animation: panimate 0.8s infinite;

}

Mixin Directives

As your CSS grows, you’ll come across situations where you need to replicate entire chunk of styles as-is or 

with slight variations.

Mixins, declared using @mixin, are used to create reusable style code that can be used across the entire 

stylesheet. Mixins can contain full CSS rules. Mixins can take arguments, which makes them flexible.

Mixins are defined using the @mixin directive followed by the name of the mixin and optional argument 

and block containing code, as shown in Listing 

3-30

.