Book Image

Less Web Development Cookbook

Book Image

Less Web Development Cookbook

Overview of this book

Table of Contents (19 chapters)
Less Web Development Cookbook
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using mixins as functions


People who are used to functional programming expect a mixin to change or return a value. In this recipe, you will learn to use mixins as a function that returns a value.

In this recipe, the value of the width property inside the div.small and div.big selectors will be set to the length of the longest side of a right-angled triangle based on the length of the two shortest sides of this triangle using the Pythagoras theorem.

Getting ready

The best and easiest way to inspect the results of this recipe will be compiling the Less code with the command-line lessc compiler, as described in the Installing the lessc compiler with npm in Chapter 1, Getting to Grips with the Basics of Less. You can edit the Less code with your favorite editor.

How to do it…

  1. Create a file called pythagoras.less that contains the following Less code:

    .longestSide(@a,@b) 
    { 
      @length: sqrt(pow(@a,2) + pow(@b,2)); 
    } 
    div { 
      &.small { 
        .longestSide(3,4); 
        width: @length; 
      } 
      &amp...