W tym pliku możemy spokojnie tworzyć nasze style oraz na samej górze możemy deklarować zmienne które wykorzystamy później w naszym kodzie. Windu rozpoznaje zmienne w specjalny sposób
Ze składnią less.css możemy zapoznać się na stronie http://lesscss.org/
Zasadniczo możemy definiować dowolne zmienne jednak tylko te zaczynające się od @e- są dalej interpretowane przez Windu.
Na drugim miejscu mamy możliwość zdefiniowania typu edytora, do dyspozycji mamy
- @e-color-nazwazmiennej - pojawi się panel wyboru koloru
- @e-normalsize-nazwazmiennej - suwak do wielkości z zakresem 0-800 i skokiem co 10
- @e-smallsize-nazwazmiennej - suwak do wielkości z zakresem 0-100 i skokiem co 1
- @e-fontsize-nazwazmiennej - suwak do wielkości z zakresem 8-36 i skokiem co 1
Przykładowy kod CSS
@e-fontsize-basic-font: 16px;
@e-smallsize-padding: 20px;
@e-smallsize-border-radius: 10px;
@e-color-basic: #c49b06;
@color-basic-light: (@e-color-basic + #333);
@e-color-bg: #404040;
@e-color-bg-container-box: #0d0d0d;
body{
background-color: @e-color-bg;
font-size: @e-fontsize-basic-font;
line-height: 160%;
color:difference(@e-color-bg-container-box, #ffffff);
}
h1,h2,h3,h4,h5,h6{
color:@color-basic-light!important;
font-family: 'Open Sans', sans-serif;
font-weight:300;
}
a{
color:@e-color-basic;
-webkit-transition: all .06s ease-in-out;
-moz-transition: all .06s ease-in-out;
transition: all .06s ease-in-out;
}
a:hover{
color:@e-color-basic + #444;
text-decoration: none;
}
h4,.carousel-caption h4 {
font-size: (@e-fontsize-basic-font * 2);
margin-bottom:@e-fontsize-basic-font;
}
.big-box{
background-color: @e-color-bg-container-box;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
margin-top:@e-smallsize-padding * 2;
margin-bottom:(@e-smallsize-padding);
-webkit-border-radius: @e-smallsize-border-radius;
-moz-border-radius: @e-smallsize-border-radius;
border-radius: @e-smallsize-border-radius;
}
