LESS CSS, including support for shadowboxes I'm learning about using LESS and wanted to get anyone's input on if I'm using the concepts, syntax, etc. correctly.I know this might seem subjective and not the correct place to post, so please let me know if there is a more appropriate place to do this.  

LESS code

.centered(@position: inline, @width: 100%){
    margin-left: auto;
    margin-right: auto;
    width: @width;
    display: @position;
}

.table-center(@width: 100%){
    width:@width;
    display:table!important;
    text-align:center;
    &amp;:nth-child(1) {
        display:table-cell;
    } 
}

.clear-border-radius{
     border-radius: initial;
    -webkit-border-radius: initial;
    -moz-border-radius: initial;
}

.shadowbox-format(@caption-font-size, @button-font-size, @shadowbox-margin) {
    display: block;
    position: absolute;
    min-height: 85px;
    width: 60%;
    margin: @shadowbox-margin;
    left: 20%;

    .shadowbox-caption {
        font-size: @caption-font-size;
        .table-center;
    }

    .shadowbox-button-wrapper {
        width: 35%;
        margin: 26px auto 0;

        &amp; &gt; a {
            .clear-border-radius;
            font-size: @button-font-size;
        }
    }
}


.home-slide-container{
    img{
        .centered(block);
        height:auto;
    }
}
.callout-header{
    text-align:center;
    width: auto;
    margin: 40px auto 0;
    border-bottom: 1px solid #9e9e9e;
    padding: 0 0 30px;
     @media (max-width: @screen-xs-max){
         width: 90%;
     }
          @media (min-width: @screen-sm-min){
         width: 60%;
     }
     span{
         font-size: 24px;
     }

}
 .carousel-shadowbox
 {
         text-transform: uppercase;
         color:#000;
         background-color:rgba(255,255,255,0.4);

     @media (max-width: @screen-xs-max)
     {
         background-color: white;
         opacity:1.0;

          .shadowbox-caption{
            .table-center;
             span{
                font-size: 16px;
                font-weight: 100;
                }
         }  
     }
     @media (min-width: @screen-sm-min)
     {
        .shadowbox-format(20px, 16px, -91px auto 0);
     }
     @media (min-width: @screen-md-min)
     {
         .shadowbox-format(22px, 18px, -96px auto 0);
     }
     @media (min-width: @screen-lg-min)
     {
         .shadowbox-format(24px, 20px, -102px auto 0);
     }    
}

 .callout{
     position:relative;
     margin-top: 5%;
     img{
         @media (max-width: @screen-xs-max){
             margin: 0 auto;
         }
     }
     .callout-text-container{
         padding:3px;  
      @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max)
         {
            bottom:22px;
         }

         min-height: 200px;
         .callout-title{
             padding-top: 5px;
             text-transform: capitalize;
             font-size: 22px;
             display:table;
             width:100%;
             text-align:center;
             margin-bottom: 25px;
             span{
                 display: table-cell;
             }
         }
         .callout-body{
             font-size: 15px;
             padding:8px;
             text-align:justify;
         }
         .button-wrapper{
             padding: 10px;
             a{
                 text-transform: capitalize;
                 border-bottom: 4px solid #cb2b06;
                 background-color: #e6431e;
                .clear-border-radius;
                 font-size: 16px;
             }
         }
     }
 }
Syntax is correct. When I was learning it was helpful to me to view the major LESS libraries out there and see what they were doing.

There are some mixin techniques that you will stumble upon as you advance your proficiency with the language. Also if you have JavaScript skills you can easily add additional logic to the mixins that make them even more powerful.

Once I got to a specific level with my proficiency I wrote my own library and I still use this to date for all of my projects. You can view it here - feel free to pick it apart and see if you find anything useful to use.



Edits suggested by @Dannnno 

A few good techniques you will stumble upon are looping through the variables passed into a mixin. This is very powerful because as you create your mixins you will no longer have to create large pass ins that require comma separated notation like your '.shadowbox-format' mixin. 

Also using @media inside of each mixin will result in larger then normal CSS output.

You might want to look into some of the Javascript features of LESS and build yourself a way to pass in array values to a holding variable so that when the compiler hits the @media mixin all values are itteraed in one @media statement rather then scattered throughout the document.