CSS3 Less

ئالدىنقى قىتىملىق يازمىدا Less توغۇرلۇق چۈشەنچە بىرىپ بولدۇق ھەمدە قانداق ئىشلىتىش توغىرسىدا ئازراق توختالدۇق،ئەمدى بۇ قىتىملىق يازمىدا Less نىڭ گىرامماتتىكىسى ۋە Less كە مۇناسىۋەتلىك بىلىملەر توغىرسىدا تەپسىلى توختىلىمىز.

تۆۋەندە ئاساسى گىرامماتتىكا بىلىم نۇقتىلىرى بىلەن تونۇشۇپ چىقىمىز.

ئۆزگەرگۈچى مىقدار

بۇ ئارقىلىق ئۆزىمىز ئۆزگەرگۈچى مىقدار بەلگىليەلەيمىز ھەمدە ھەرقانداق يەردە ئىشلىتەلەيمىز.
less كود

@base-color : #b5bcc7;
 .mythemes{ 
   background: @base-color;
 }
 .myline{
    background: @base-color;
 }

css كە ئايلانغان كود

.mythemes {
  background: #b5bcc7;
}
.myline {
  background: #b5bcc7;
}

يۇقىرقى مىسالدىن كۆرۋىلىشقا بولىدۇ ئۆزگەرگۈچى مىقدارنى كۆپ يەردە ئىشلەتكىلى بولىدۇ،بۇنىڭ ئىشلىتىش ئورنىدىن بىرنى مىسال كەلتۈرسەك ،مەسلەن بىز ئۇسلۇب يازغاندا بەتنىڭ ئاساسى رەڭگىنى بىر ئۆزگەرگۈچى مىقدار ساقلىۋىلىپ،مۇشۇنى تارتىپ ئىشلەتسەك بولىدۇ،كىيىن ئۇسلۇب ئۆزگەرتىدىغان ئ‍ەھۋالغا دۇچ كەلگەندە قۇرمۇ-قۇر ئىزدەپ ئۆزگەرتىش ھاجەتسىز،پەقەت ئۆزگەرگۈچى مىقدرنىڭ قىممىتىنى ئ‍ۆزگەرتسەكلا بولىدۇ.

Mixins

Mixins كە كەلسەك بۇنى خەنزۇچىدا 混入 دەپ تەرجىمە قىلىپتۇ،لىكىن بۇنى ئ‍ۇيغۇرچىدا قانداق ئاتاشنى بىلمىدىم، بۇ ئۇقۇم كۆپ قىسىم پىروگىراممىلاردا مەۋجۇت،يەنى مەسلەن كۆپ ئىشلىتىىدىغان مەلۇم ئ‍ىقتىدار بۆلىكىنى بىر class ھالىتىدە يىزۋىلىپ بۇنى ئىشلەتكەندە پەقەت مۇشۇ class نىڭ ئىسمىنىلا چاقىرىپ ئىشلەتسەك بولىدۇ،بۇئارقىلىق ئ‍وخشاش كودنى تەكرار يىزىش ئاۋارچىلىقىدىن قۇتۇلىمىز، بۇيەردىكى Mixins دەل مۇشۇ ئ‍ۇقۇمنى كۆرسىتىدۇ.
less كود

.roundedCorners(@radius:5px){ 
-moz-border-radius: @radius;
-webkit-border-radius: @radius; 
border-radius: @radius; 
 }
#header{ 
    .roundedCorners;
} 
#footer{ 
    .roundedCorners(10px);
}

css كە ئايلانغان كود

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

قاپلاپ يىزىش قائىدىسى (嵌套规则)

ئادەتتە css كود يازغاندا ئۈستىن ئاستىغا ياكى class ۋە id ئارقىلىق بەلگىلەپ يازىمىز،لىكىن html ئۇنداق ئەمەس،بىز html نى قاتلام قەۋەت بويىچە يازىمىز،لىكىن less دا مۇشۇنداق يازغىلى بولىدۇ.
html كود

<div id="header">
    <h1>
       <a href="">TARQAT</a>
    </h1>
   <p>I am bloger.</p> 
</div>

less كود

#header{ 
display: inline;
float: left;
h1{ 
        font-size: 26px;
    font-weight: bold; 
        a{ 
            text-decoration: none;
            color: #f36; 
            &:hover { 
                text-decoration: underline;
                color: #63f; 
            }
        }
    } 
    p{ 
        font-size: 12px; 
    } 
}

css كە ئايلانغان كود

#header {
  display: inline;
  float: left;
}
#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header h1 a {
  text-decoration: none;
  color: #f36;
}
#header h1 a:hover {
  text-decoration: underline;
  color: #63f;
}
#header p {
  font-size: 12px;
}

less كودىدىن بىرقاراپلا html نىڭ قۇرۇلمىسنى ۋە قاتلاملىرىنى ئۇققىلى بولىدۇ،بۇ مەن ئەڭ ياقتۇرغان قىسمى.

ئەمەل ۋە فۇنكىسىيە (运算及函数)

ھەممىمىز تۆت ئەمەلنى بىلىمىز،قۇشۇش،ئىلىش ،كۆپەيتىش،بۆلۈش .بۇنى پىروگىراممىلاردا دائىم ئىشلىتىمىز،لىكىن css تە ئىپادە دەيدىغان ئۇقۇم يوق،لكىن less تە بار،باشقا پىروگىراممىلاردا ئىشلەتكەن ئەمەلنى less ئارقىلىق css تىمۇ ئىشلىتەلەيمىز.
less كود

@base: 5%;
@filler: @base*2;
@other: @base + @filler;
#header{ 
    color: #888 / 4;
    height: 100% / 2 + @filler; 
}

css كە ئايلانغان كود

#header {
  color: #222222;
  height: 60%;
}

بۇنىڭدىن باشقا يەنە Less نۇرغۇنلىغان تەييار فۇنكىسىيەلەر بىلەن تەمىنلىگەن.

• تىخىمۇ كۆپ

نام بوشلۇقى (命名空间)

بۇ كۆپ قىسىم پىروگىراممىلاردا مەۋجۇت،يەنى مەلۇم بىر بۆلەككە نام بىرىپ ،ئىشلەتكەن چاغدا مۇشۇ نام ئاستىدىكى مەلۇم بىر فۇنكىسىيەنى تارتىپ ئىشلىتىش.
less كود

#bundle{ 
    .button (){ 
        display: block; 
        border: 1px solid black;
        background-color: grey; 
        &:hover { background-color: white } 
   } 
    .tab {
        background:red;
        color:red;
    }
}
#header a { 
    color: orange;
    #bundle > .button; 
}

css كە ئايلانغان كود

#bundle .tab {
  background: red;
  color: red;
}
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: white;
}

تەسىر دائىرسى (scope)

بۇنى خەنزۇچىدا 作用域 دەپ ئاتايدۇ،دىمەكچى بولغىنى ھەربىر ئۆزگەرگۈچى مىقدارنىڭ تەسىر دائىرسى بولىدۇ،ئۆزىنىڭ دائىرسى ئىچىدە ئىشلەيدۇ،تەسىر دائىرسىدىن چىقىپ كەتكەندىن كىيىن ئىشلىمەيدۇ.
less كود

@var: red; 
#page{ 
    @var: white; 
    #header{ 
       color: @var;
        } 
    } 
#footer{ 
    color: @var;
}

css كە ئايلانغان كود

#page #header {
  color: white;
}
#footer {
  color: red;
}

ئۆزگەرگۈچى مىقدار تەسىر دائىرسىنى ئىزدىگەندە ئىچىدىن تىشىغا قاراپ ئىزدەيدۇ (就近原则).

ئىزاھاتلاش

less تا 2 خىل ئىزاھاتلاش شەكلى بار،js نىڭ ئىزاھات شەكلىگە ئوخشايدىغان تاق قۇرلۇق ئىزاھات ۋە css تە ئەسلى بار بولغان كۆپ قۇرلۇق ئىزاھات.
يۇقۇردىكىسى ئەڭ ئاسى بولغان ئۇقۇملار،بۇلارنىڭ ھەربىرىنىڭ ئىچىدە يەنە نۇرغۇنلىغان ئۆگۈنۈشكە تىگىشلىك جايلار بار،لىكىن ئۇلارنى تورداشلارنى قايمۇقۇپ قالمىسۇن دەپ پەقەت ئەڭ ئاساسى بولغان قىسمىلىرى ئۈستىدە توختالدۇق،بۇلارنى ئۆگۈنۈپ بولغاندىن كىيىن قالغان قىسمىنى ئاسانلا چۈشەنگىلى بولىدۇ.

• تىخىمۇ كۆپ چۈشەنچىگە ئىگە بولماقچى بولسىڭىز بۇيەرنى كۈچەپ بىسىڭ.
• بىۋاستە تور يۈزىدە سىناپ يىزىپ بىقىڭ.

less نى ئەمەلى تۈردە ئىشلەتكەندە css ئايلاندۇرۇپ ئىشلىتىشىڭلارنى تەۋسىيە قىلىمىز،بىۋاستە less ھۆججەتنى ئىشلەتكەندە بەتنىڭ سۈرىتىگە تەسىر يىتىدۇ،چۈنكى less نى توركۆرگۈچ بىۋاستە تونۇمايدۇ،چۇقۇم css ھۆججەت شەكىلىدە بولۇشى كىرەك،يەنى less ھۆججەتنى less.js بىرتەرەپ قىلىپ css ھۆججەتكە ئايلاندۇرىدۇ،بۇنى بىرتەرەپ قىلىش ئۈچۈن ۋاقىت كىتىدۇ،ئاز قۇرلۇق less ھۆججەتنى ئاز ۋاقىتتلا ئىچىدىلا بىرتەرەپ قىلالايدۇ،ئەگەر قۇر سانى بىر-ئىككى مىڭ بولسا بۇ ئەھۋالدا مۇقەرەر بەتنىڭ سۈرىتىگە تەسىر يەتكۈزىدۇ.
less ھۆججەتنى css كە ئايلاندۇرۇشتا Koala بۇ دىتال ئارقلىق ياكى Sublime,WebStorm،HBuilder قاتارلىق تەھىرلىگۈچلەرگە less قىستۇرمىسىنى قاچىلاش ئارقىلىق ئەمەلگە ئاشۇرۇشقا بولىدۇ،بىرقەدەر ئاسان بولىدىغىنى دىتال ئارقىلىق ئايلاندۇرۇش،مەن Koala نى تەۋسىيە قىلىمەن.

• Koala

ئەگەر css ئالدىن بىرتەرەپ قىلغۇچ (CSS 预处理) بىلىملىرىگە قىززىقساڭلار،Less كە ئ‍وخشىشىپ كىتىدىغان SASS،Stylus قاتارلىق css كىڭەيتمە تىلىرى توغۇرلۇق ماتىريال كۆرۈپ بىقىشىڭلارنى تەۋسىيە قىلىمەن.

• SASS
• Stylus

قوشۇمچە:تەرجىمە ۋە ئىپادىلەش جەھەتتە خاتالىق بولۇشى مۇمكىن،ئەگەر خاتالىق بولسا تۈزۈتۈپ بىرىشڭلارنى ئۈمۈ قىلىمەن.

مەزكۇر يازما TARQAT تەرپىدىن يىزىلغان
بۇ بىكەتتىكى يازمىلارنى مەنبەسىنى ئەسكەرتكەن ھالدا تارقاتسىڭىز بولىدۇ
ئەڭ ئاخىرقى قىتىملىق تەھرىرلەنگەن ۋاقتى : Apr 25, 2019 at 04:44 pm