???? ?????? ?? ??????? ????????? ?? ?? ???? ????? ????? ??????? ?????? ????? ????? ??? ????????? ?? ??? ???? ?? ????? CSS ???? ????? ????? ??? ????? ????? ??????? ???????? ????? ?????????? ?????????? ???? ?????? CSS ?? ?? ??? ????? ??? ??? ?????? ?? ???? ?? ??? CSS ??? ??????? ??? ????? ?? ??? ???? ???? ?????? ??? ?????? ?? ?????? ???????? ?????? ???????? ??? ??????? ?? ????? CSS ?? ???? ????? Less ???? ????? ???.
??? ??????? ???? ???? ?? ????? Less CSS*?? ???? ???? ??? ?????? ??????? ??? ??????? ????? ?? ?????? ????? ?? ??? ??????? ?? ????? ??? ????? ???? CSS ?????? ?? ????? ??? ????? ?????? ????? ?? ???? ????? ?????? ?? ??????? ?? ??????? ??? ????? CSS ???? ?? ?????.
????? ?? ?????? ???? ???????? ??? Less ????? ??? stylesheet ????? ?? ???? ????? ?? ??? ????? ??? ??? ???? ???? ????? ????? ??? ???? ?? ???? ??? ???????? ?? ???????? ??? ??? ??? ????? Less CSS ?????? ???????.
[h=3]Less CSS*??????[/h]????? ??? ??????? ???? ??? ????? ??? ?????? ????? ????? ??????? ?? ????? ????? CSS? ?????? ??? ??????? ?? ???? ??????? ??? ??????? ?? ??? ????? ????? ???? ???? ????? ????? ??????? ?? ???????.
[h=4]????????? Variables[/h]???? ????????? ??????? ??? ????? ?????? ????????? ?? ???? CSS ??? ????? ????? ??????? ??????? ??? ????? ??? ????? ????? ??? ????? ?????? ??? ????? CSS ???? ?????? ???????? ???? ??? ???:

@color: #000000;

h2 {
color: @color;
}
.single-post p {
color: @color;
}
????? ????? ??????? ??????? ??? ????? ?????? ??? ???? CSS:


h2 {
color: #000000;
}
.single-post p {
color: #000000;
}

[h=4]?????? Mixins[/h]???? ??????? ???????? ???? ?????? ??????? ?????? ??????? ???? ?????? ??????? ??????? ?????? ????? CSS ???? ??? ???? ????? ?????????? ?? ??? ?? ??? CSS ??? ???? ???? ???? ??????? ???? ???? ????? ?????? ????? ????? ????????? ??? ???? ?? ???? ??????? ???????? ???? ???? ?? ??????? ????? CSS ????? ????? ??? ???? ?? ???? ?????? ??????? ?????? ???? ??? ???:

.rounded-corners (@radius: 5px) { /* ?????? ?????????? ?????? radius */
border-raduis: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
/* ??????? ??????? ??? ???? ???? ????? */
}

#header {
.rounded-corners;
}

#sidebar {
.rounded-corners(10px);
}

#footer {
.rounded-corners(15px);
}
????? ????? ??????? ???? .rounded-corners ??? ????? ?????? ??? ???? CSS:

#header {
border-raduis: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#sidebar {
border-raduis: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

#footer {
border-raduis: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
[h=4]??????? Nested Rules[/h]????? ?? ????? ????? ????? ????? ?? ????? ????? ???? ????? ???? ??????? ???? ??????? ????? ??????? ????? ??? ??? ?????? ?????? ??? ???? ???? ????? ???? ??? ???:

.post {
h2 {
font-size: 26px;
font-weight: bold;
}

p {
font-size: 13px;
a {
text-decoration: none;
&:hover { border-width: 1px }
}
}
}
????? ????? ????? ??????? ?? ????? ??? ????? ?????? ??? ???? CSS:

.post h2 {
font-size: 26px;
font-weight: bold;
}

.post p {
font-size: 13px;
}

.post p a {
text-decoration: none;
}

.post p a:hover {
border-width: 1px;
}
???? ?? ????? ????? ?????? hover ???? ???? ????? & ???? ????? ?????? ????? a ?? ?? ????? ??? ??????? ??????? ??.
[h=4]???????? ???????? Operations[/h]???????? ???????? ???? ????????? ?? ????? Less ??? ????????? ??????? ????? ??????? ????? ????? ?????? ?????? ?? ????????? ???? ????? ??? ????? ??? ???????. ??? ???? ??????? ???? ????? ???? @base-color ?????? #111 ????????? ?? ??? ????? CSS? ????? ???????? ?? ??? ??? ???? ?? ??? ???? ??????? ?????? 5 ??? ???? ????? #555? ???? ??? ???:

@base-color: #111;

body {
background-color: @base-color;
}

#page {
background-color: @base-color*5;
}
????? ????? ??????? ??????? ???????? ?? ?????? ??????? ??? ????? ?????? ??? ???? CSS:


body {
background-color: #111;
}

#page {
background-color: #555;
}
[h=4]????? ???????[/h]???? ??????? ????? ??????? ?? ????? Less ??? ???? if ??????? ???????? ?? ???? ???????? ???? ?? ????? Less ??? ??????? ???? when ????? ?? if? ?????? ?? ???? ??????? ????? ??????? ???? type ?? ???? ????? ??? ??? ??? ??????? ??? ????? fast ??? ?? ????? ??? ?????? ?? ??? ????? normal ??? ?? ????? ???? ???? ??? ???:

.fast-reset (@type: fast) when(@type=fast) {
margin: 0;
padding: 0;
}

.fast-reset (@type: fast) when(@type=normal) {
margin: 0;
padding: 0;
border: 0 none;
text-decoration: none;
font-size: 100%;
}
????? ??????? ?????? ?? ????? ???? type ?? ??? ??? ????? ???? type ???? ???? ??????? ?????? ?????????? ???? ?? ???????? ???? ??? ???:

body {
.fast-reset(fast);
}
?????? ????? ??????? ???? fast-reset ?? ????? body ??? ????? ?????? ??? ???? CSS:

body {
margin: 0;
padding: 0;
}
[h=3]??? ???????*Less CSS[/h]???? ???? ?? ????? ???????? ??? ??????? ??? ??? ?????? ???????? ?????? ?? ??? ????? less.js ????? ??? ??????? ?? ???? HTML ?????? ??? style ???? ????? less ????? ?? css ????? style.less ????? ???? ??? ????? ?????? ?? ????? ????? ??????? ?????? ???????? ?????? ??? ????? less.js.

???????? ????? less.js? ??? ??? ?????? ??? ??? HTML (?? ???? head ????????):


??? ??? ??? ????? ??? ???? style.less (?? ??? ??? ????? ???? ???? ??????? less ????? ????? ????? HTML ??? ?? ???? ?? ?????? ???????) .. ????? ?????? ????? CSS ?????? ??????? ???????? ???????? ????? Less CSS. ???? ????? ???? ???? ???????? ??? ?????? ??? ????? ??????? Compiling ?????? ?????? ?????? ???????? ?????? Less ??? ???? CSS:
[h=4]WinLess (????? ??????)[/h]
[h=4]SimpLESS (????? ??????/???/?????)[/h]
[h=4]Less.app*(????? ?????)[/h]
????? ??? ??? ????????? ??? ??? ??????? ????? less ??????? ??? ????? ??????? ???? ??? ????? ??????? ????? less ???? ?????? ??????? ??? ??? ????? CSS ???? ??? ???? ??? ?? ??? ??????? ????? ??? ??????? ???? ??? ??? ?????? ????? ??? ??? ??? ????? ??????? ??? ??? ??????.
[h=3]???? ???? ????????*Less CSS[/h]??? ???? ???? ???? ???????? ????? Less ?? ????? ????? CSS ????? HTML? ??? ?????? ????? less.js*????? ??????? ????? ??????? ??? ????? ????? ??????? ??? ??? ?? ????? ??? ??? ????? ?????? ???? ????? ????? ??? ??????? ????? less ???? ????? ?????? ????????. ?? ??????? ??? ????? ???? HTML ???????? ????? less.js ?????? ??? ?????? ??? ???? head ?? ???? HTML:


???? ????? ??????? ??????? ?? ???? ??????? ?? ??????? ???? ????? ?? ????? ??????? ?? ???? Google Code ??? ?? ????? ?? ?????? ???????? ???? ?? ??? ????? ???????? ?? ?????? ??????? ?? style.less ???? ????? ??? ???? ???? ??? ????? ????? ?????? ???? CSS ???? ?????? Less? ??? ?????? ???? ?????? ?????? Less ???? ?????? ????? ??????? ??? ?????? ??? ?? ?? ????? ???????? ????? ??? ???????:

/* ???? ???? ?????? ??????? ????????
???????? ????? type
?????? ????? ??????? */
.fast-reset (@type: fast) when(@type=fast) { /* ????? ???? */
margin: 0;
padding: 0;
}

.fast-reset (@type: fast) when(@type=normal) { /* ????? ???? */
margin: 0;
padding: 0;
border: 0 none;
text-decoration: none;
font-size: 100%;
}

/* ???? ???????? ?????? ?????? ?????? ????? @font-face
??????? ??? ??? ?????? ??? ???? ??????? ??? ???? ?????? ????? ???? ????? */
.font-face (@fontFamily, @fontUrlName) {
font-family: @fontFamily;
src: url("fonts/@{fontUrlName}.eot"); /* IE 9 */
src: url("fonts/@{fontUrlName}.eot?") format("eot"), /* IE 6-8 */
url("fonts/@{fontUrlName}.otf") format("opentype"), /* Other browsers */
url("fonts/@{fontUrlName}.ttf") format("truetype"); /* Safari, Android, iOS */
}

/* ??? ????????? ?????? ???????? ?????? ?????? ?????????? ?????? */
@bodyBackgroundColor: #f8f8f8;
@postBackgroundColor: #fff;
@normalWidth: 960px;
@fontColorForPostHeading: #720606;
@fontColorForBoxHeading: #823a00;
@fontColorForParagraph: #363a3c;
@fontTypeForParagraph: 'Droid Naskh Regular', Arial, sans-serif;
@fontTypeForHeading: 'Hacen Liner Screen', Arial, sans-serif;

@font-face { /* Upload Hacen Liner Screen */
.font-face("Hacen Liner Screen", hacen_liner_screen);
/* ??????? ?? ??? */
}

@font-face { /* Upload Droid Naskh Regular font */
.font-face("Droid Naskh Regular", droidnaskhregular);
/* ??????? ?? ??????? */
}

body {
.fast-reset; /* ??????? ??????? ?????? */
direction: rtl;
text-align: center;
background-color: @bodyBackgroundColor;
}

/* ???? border-radius
?????? ???????? */
.border-radius(@radius: 5px) { /* ?????? ?????????? */
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

#wrap {
text-align: right;

/* ??? ????????? */
@borderColor: #2d3a44;
@padding: 10px;

.small-box {

background-color: #e2e3e4;
h1 {
margin: 0;
font: bold 27px @fontTypeForHeading;
color: @fontColorForBoxHeading; /* ????? ??? ???? ????? ????? ?????? */
}

}

.post {
color: @fontColorForPostHeading;
background-color: @postBackgroundColor;
h2 {
font: bold 27px @fontTypeForHeading; /* ????? ??? ???? ?? ???? ???? ????? ????? ?????? */
}
}

.small-box, .post {
.border-radius(10px); /* ??????? ???? border-raduis ?????? ???????? ???? ????? ???? */
border: 1px solid @borderColor; /* ??????? ??? ???? ??? ????? ????? ?????? */
margin: 20px auto;
width: @normalWidth; /* ??????? ????? ????? ?????? ???? ???? ??? ????? */
padding: @padding; /* ??????? ???? ????? ????? ?????? ??? ?????? ????? ???????? */
p {
color: @fontColorForParagraph; /* ????? ??? ???? ??? ???? ????? ????? ?????? */
font: 14px/25px @fontTypeForParagraph; /* ????? ??? ???? ?? ???? ???? ????? ????? ?????? */
}
}
}
??? ???????? ?? ????? ?????? ??????? ???? ????? ???? ???? HTML ?? ????? ????? ?? ????? ??? ?????? #!watch ??? ????? ????? ?????? ???? ?????? ?? ???? ???????? ?????? CSS ???? ??? ??????? ?????? Less .. ??? ???? CSS ????? ??? ??????? ?? ??? style.less:

@font-face {
font-family: "Hacen Liner Screen";
src: url("fonts/hacen_liner_screen.eot"); /* IE 9 */
src: url("fonts/hacen_liner_screen.eot?") format("eot"), /* IE 6-8 */
url("fonts/hacen_liner_screen.otf") format("opentype"), /* Other browsers */
url("fonts/hacen_liner_screen.ttf") format("truetype"); /* Safari, Android, iOS */
}
@font-face {
font-family: "Droid Naskh Regular";
src: url("fonts/droidnaskhregular.eot"); /* IE 9 */
src: url("fonts/droidnaskhregular.eot?") format("eot"), /* IE 6-8 */
url("fonts/droidnaskhregular.otf") format("opentype"), /* Other browsers */
url("fonts/droidnaskhregular.ttf") format("truetype"); /* Safari, Android, iOS */
}
body {
margin: 0;
padding: 0;
direction:rtl;
text-align:center;
background-color:#F8F8F8;
}
#wrap {
text-align:right;
}
#wrap .small-box {
background-color:#E2E3E4;
}
#wrap .small-box h1 {
color:#823A00;
font-family: bold 27px 'Hacen Liner Screen', Arial, sans-serif;
margin: 0;
padding: 0;
}
#wrap .post {
background-color:#FFFFFF;
color:#720606;
}
#wrap .post h2 {
font: bold 27px 'Hacen Liner Screen', Arial, sans-serif;
}
#wrap .small-box, #wrap .post {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #2D3A44;
margin: 20px auto;
padding: 10px;
width:960px;
}
#wrap .small-box p, #wrap .post p {
color:#363A3C;
font: 14px/25px 'Droid Naskh Regular', Arial, sans-serif;
}
??????: ??? ??????? ????? less.js ??? ???? ??????? ?? ??????? ?????? .less ????? ?? ?????? .css ?? ????? ?????? ??? ????? ??????? ??????? ??? ?????? ???? ?????? ?? ?????? ????? ?? ??????? ???? ????? ??? ??? ??????? .less ??? ????? ??????? ????? ?? ??? ???? ??????? .css????? ???????? ?? ??????.
[h=3]???? ????? ??????[/h]??? ???? ????? ???? ???? ????? ??????? ???????? ???????? ?????? Less ?????? ????? ????? ?CSS ?????. (???? ??????? ????? 480p ?? ???? 720p ?? ???? ?????? ?? ???? ??????)
[h=3]????? ???? ?????? ??????*Less CSS[/h]????? Less CSS*???? ??????? ???? ???? ????? ????? ??? ?????? ?? ????? ??????? ?? ????? CSS? ?? ???? ???? ???? ?????? ?? ?????? ????? ??????? ?????? ?? Less CSS*??? ???? Sass ?????? ??? ????? ??? Ruby ?? ?????? (??? ??? ?? ??????? ???? ??????) ???? ?????? ??? ??? ??????? ?? ???? GitHub .. ???? ?? Less CSS*???? ?? ????? ??????? ????? ??????? ??? Javascript ?? ??????? ???? ?????? ?? ??????.
???? ???? ???? ??? ??? CoffeeScript (?? ???? CoffeeScript) ???? ???? ????? ??????? ?? Less CSS*?????? ????? ???? Javascript ????? ?????? ?? ????? ?????? ???????? ??? ???? Javascript ?????? ?????? ??? ????? ????? ??? ????????? ??? ?????? ?? ???? ??????? ???? ???? ?? ??? ???? ?? ???? ??????? ???? Javascript ???? ?????? ?? ????? ???? ?????? ??? ?????????? ?? ????? ?????? ?? ????? ??? Javascript ??? ???????? ????? ?? ??? ???? ?????? ??????? ???????? ?????????? ?????? .. ????? ????? ??????? ???? ?? CoffeeScript ?? ?????? ?????????.