Learning Less.js

Adding basic mixins

We can start by adding in two simple mixins to our code—let's begin by editing a copy of buttons.css and then adding the following code at the start of the file:

.shadow() { box-shadow: 0 1px 2px rgba(0,0,0,.2); text-shadow: 0 1px 1px rgba(0,0,0,.3); }

.formfont { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }

Next, we can remove the original code from the .button style block, as this is no longer needed—it will be replaced by the names of our three simple mixins:

.button {
  .shadow;
  .formfont;
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  padding: .5em 2em .55em;
  border-radius: .5em;
}

Save this as mixins1.less; we can then remove the buttons.css link that is already ...