3
\$\begingroup\$

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;
    &: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;

        & > 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;
             }
         }
     }
 }
\$\endgroup\$
1
  • \$\begingroup\$ Your placement of curly braces is a bit inconsistent (there's a line break before them when they are preceded by a media query, but other times there's not even a space). Otherwise I have nothing. (this is too small of a niggle to actually post as an answer so I thought I'd shout out in the comments). \$\endgroup\$ Sep 3 '15 at 11:30
-1
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ This review would really be a lot more useful if you gave some specific critiques of their code. As-is you really aren't saying anything substantive \$\endgroup\$ Sep 4 '16 at 1:22
  • \$\begingroup\$ Also, you should really be a little more clear that lessminded.com is something you made - it's important to make it clear when it's your own product. \$\endgroup\$ Sep 4 '16 at 1:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.