# 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;
&:nth-child(1) {
display:table-cell;
}
}

}

display: block;
position: absolute;
min-height: 85px;
width: 60%;
left: 20%;

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

width: 35%;
margin: 26px auto 0;

& > a {
font-size: @button-font-size;
}
}
}

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

}
{
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;

.table-center;
span{
font-size: 16px;
font-weight: 100;
}
}
}
@media (min-width: @screen-sm-min)
{
}
@media (min-width: @screen-md-min)
{
}
@media (min-width: @screen-lg-min)
{
}
}

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

min-height: 200px;
.callout-title{
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;
text-align:justify;
}
.button-wrapper{
a{
text-transform: capitalize;
border-bottom: 4px solid #cb2b06;
background-color: #e6431e;
font-size: 16px;
}
}
}
}

• 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). Sep 3, 2015 at 11:30

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.

• 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 Sep 4, 2016 at 1:22
• 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. Sep 4, 2016 at 1:23