Created
December 17, 2013 12:41
-
-
Save Shaz3e/8004326 to your computer and use it in GitHub Desktop.
A simple example for implementing less which is really more...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="s3-div"> | |
<h1>Less CSS Example</h1> | |
<p>This is how it works | |
<small> | |
Really easy to create more complex styles | |
</small> | |
</p> | |
<small> | |
this will never end. | |
</small> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@base-color: #f00; | |
@font-color: #fff; | |
@font-size: 12px; | |
@padding: 0; | |
@line-height:100%; | |
html body{ | |
background-color:@base-color; | |
} | |
.rounded-corners (@radius: 100px) { | |
-webkit-border-radius: @radius; | |
-moz-border-radius: @radius; | |
-ms-border-radius: @radius; | |
-o-border-radius: @radius; | |
border-radius: @radius; | |
} | |
.less-div(@background-color:#000;){ | |
.rounded-corners; | |
background-color:@background-color; | |
padding: @padding + 0.5em; // padding:0.5em; | |
color:@font-color; | |
text-align:center; // a simple css text-align | |
h1{ | |
font-size:@font-size + 28px; // font-size: 40px; | |
line-height:@line-height; | |
} | |
p{ | |
font-size:@font-size + 12px; // font-size: 24px; | |
line-height:@line-height; | |
small{ | |
color:#888; | |
} | |
} | |
small{ | |
color:@base-color; | |
font-size:@font-size + 12px; | |
} | |
} | |
.s3-div{ | |
.less-div; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment