Skip to content

Instantly share code, notes, and snippets.

@jeffstagg

jeffstagg/index.html

Created April 15, 2015 20:40
Show Gist options
  • Save jeffstagg/cc6b9ca896a6bd34923d to your computer and use it in GitHub Desktop.
Save jeffstagg/cc6b9ca896a6bd34923d to your computer and use it in GitHub Desktop.
Download ZIP
LESS Mixins
Raw
index.html
<!DOCTYPE html>
<html>
<head><title>Mixins</title></head>
<body>
<h1 role="heading">Borders</h1>
<section>
<div class="rounded blue">
<p>This element will have blue rounded borders</p>
</div>
<div class="rounded red">
<p>This element will have red rounded borders</p>
</div>
<div class="rounded green">
<p>This element will have green rounded borders</p>
</div>
</section>
</body>
</html>
Raw
rounded-corners.less
@red: #f00;
@green: #0f0;
@blue: #00f;
@radius-size: 10px;
.round-borders(@color) {
-webkit-border-radius: @radius-size;
-moz-border-radius: @radius-size;
border-radius: @radius-size;
border: 5px solid @color;
}
Raw
styles.less
@import "rounded-corners";
.rounded {
&.red {
.round-borders(@red);
}
&.green {
.round-borders(@green);
}
&.blue {
.round-borders(@blue);
}
}
section>div {
display: inline-block;
width: 100px;
padding: 5px;
margin-left: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment