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 ...

Get Learning Less.js now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.