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 {
  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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.