Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use Less Mixins

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 222
    Comment on it

    LESS gives us the oportunity to use an existing class or ids and apply all its styles directly to another selector.

    Example:-

    #circle{
      background-color: #4CAF50;
      border-radius: 100%;
    }
    
    #small-circle{
      width: 50px;
      height: 50px;
      #circle
    }
    
    #big-circle{
      width: 100px;
      height: 100px;
      #circle
    }
    

    Which give the following CSS ouput:

    #circle {
      background-color: #4CAF50;
      border-radius: 100%;
    }
    #small-circle {
      width: 50px;
      height: 50px;
      background-color: #4CAF50;
      border-radius: 100%;
    }
    #big-circle {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      border-radius: 100%;
    }
    

    If you dont want the mixin to appear as a rule in the CSS you can place parentheses after it:

    #circle(){
      background-color: #4CAF50;
      border-radius: 100%;
    }
    
    #small-circle{
      width: 50px;
      height: 50px;
      #circle
    }
    
    #big-circle{
      width: 100px;
      height: 100px;
      #circle
    }
    

    Which results in:

    #small-circle {
      width: 50px;
      height: 50px;
      background-color: #4CAF50;
      border-radius: 100%;
    }
    #big-circle {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      border-radius: 100%;
    }
    

    Another thing, mixins can do is receive parameters. In the following example we add an argument for the width and height of our circles, with a default value of 25 pixels.

    #circle(@size: 25px){
      background-color: #4CAF50;
      border-radius: 100%;
      width: @size;
      height: @size;
    }
    
    #small-circle{
      #circle
    }
    
    #big-circle{
      #circle(100px)
    }
    

    This will create a small circle 2525 and a big one 100100 pixels.

    #small-circle {
      background-color: #4CAF50;
      border-radius: 100%;
      width: 25px;
      height: 25px;
    }
    #big-circle {
      background-color: #4CAF50;
      border-radius: 100%;
      width: 100px;
      height: 100px;
    }
    

 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: