Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

This blog is part of 1 Tute Sets.

LESS Tutorial
  • LESS- Mixin

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 217
    Comment on it

    Mixin in LESS are group of CSS properties which have similarities to functions in other programming languages. LESS mixins allow us to include all the properties of an existing class or ids into another by including the class/id name as its property. The syntax and features of LESS mixin are closely related to the CSS. They can be declared in same way as we declare a CSS style rule, i.e, using a class or an ID selector. It can also be used to store more than one value and can be reused throughout the code whenever necessary.

     

    LESS mixins can be used in different ways:

    1. Making mixin disappear from the output
    2. With Selectors as argument
    3. Using Namespaces
    4. Guarded Namespaces
    5. !important keyword

     

    Example 1: Simple LESS mixin where an existing id Square is included in other ids

     

    #Square {
    
    	background: #999;
    	border-radius: 10px;
    }
    
    #MedSquare {
    
    	width: 40px;
    	height: 40px;
    	#Square
    }
    
    #LargeSquare {
    
    	width: 80px;
    	height: 80px;
    	#Square
    }
    

    After compilation CSS code will be:

    #Square {
    
    	background: #999;
    	border-radius: 10px;
    }
    
    #MedSquare {
    
    	width: 40px;
    	height: 40px;
    	background: #999;
    	border-radius: 10px;
    }
    
    #LargeSquare {
    
    	width: 80px;
    	height: 80px;
    	background: #999;
    	border-radius: 10px;
    }

     

     

    Example 2: In case when you want to make mixins disappear from the output, you just need to add parenthesis after it.

     

    #Square {
    
    	background: #999;
    	border-radius: 10px;
    }
    
    #MedSquare {
    
    	width: 40px;
    	height: 40px;
    	#Square
    }
    
    #LargeSquare {
    
    	width: 80px;
    	height: 80px;
    	#Square
    }
    

    After compilation CSS code will be:

    #MedSquare {
    
    	width: 40px;
    	height: 40px;
    	background: #999;
    	border-radius: 10px;
    }
    
    #LargeSquare {
    
    	width: 80px;
    	height: 80px;
    	background: #999;
    	border-radius: 10px;
    }
    

     

    Example 3: Mixin do receive parameters.

     

    #Square(@size: 30px) {
    
    	background: #999;
    	border-radius: 10px;
    	width: @size;
    	height: @size;
    }
    
    #MedSquare {
    	
    	#Square
    }
    
    #LargeSquare {
    	
    	#Square(110px)
    }
    

    After compilation CSS code will be:

    #MedSquare {
    
    	width: 30px;
    	height: 30px;
    	background: #999;
    	border-radius: 10px;
    }
    
    #LargeSquare {
    
    	width: 110px;
    	height: 110px;
    	background: #999;
    	border-radius: 10px;
    }
    
    

     

     

    Other ways will be discussed in other blog. Till then Happy Coding :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: