A less css playground

styles.less

/*
So these are the things that jumped out to me when it comes to using lesscss.
Obvoiusly there are others, but these features are reason enough for me to want to use less.
Please check them out at http://lesscss.org/
If you want to see it running simply clone this repo https://github.com/bmansk8/learning-Less
My blogpost about this https://www.barronvbrock.net/blog
*/

@color: red;
@selector: h1;
/*variables*/

.img{
  width: 300px;
  height: 300px;
}

p{
  /*using a class mixin*/
  .img();
  color: @color;
  /*also using var for color*/
}

/*custom selector*/
@{selector}{
  margin-top: 100px;
  background:blue;
}

/*nesting selectors*/
nav{
  width: 100%;
  background-color: aqua;
  position: fixed;
  top: 0;
  left: 0;
  ol{
    li{
      color: grey;
    }
  }
}

/*MAPS! how cool*/
@sizes:{
  mobile: 320px;
  tablet: 768px;
  desktop: 1024px;
}
/*basically arrays of values*/

h2{
  color: aqua;
}

/*using these in media queries seems very cool*/
@media(max-width: @sizes[tablet]){
  h2{color: black;}
}

/*you can also use them as mixins*/
#list(){
  .colors(){
    primary:green;
    secondary: grey;
  }
}

/*this just seems awesome*/
#item{
  @colors: #list.colors();
  color: @colors[primary];
  background-color: @colors[secondary];
}

/* css guards are also a thing */
/* they are similar to if statements */
@my-option: true;

button when (@my-option = true) {
  color: white;
}