Stilly

Stilly

بېكەت باشلىقى

يازمىلىرى
ئەگەشكۈچىلىرى
ئەگەشكەنلىرى
74
32
0

Less بىلەن تونۇشۇش ۋە ئىشلىتىش (1)

Less دىگەن  نىمە؟

ئاۋال بىز كىتابى جاۋابنى دىمەي تۇرايلى، يەنە كونا قائىدىمىز بويىچە ئەمەليەتتىن مىسال ئىلىپ ئاندىن جاۋابىنى يەكۈنلەپ چىقايلى.

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


ئاۋال بىز css نىڭ ئىنىقلىمىسىغا قاراپ باقايلى،بۇ بولسا بەيدۇ قامۇستىكى ئىنىقلىمىسى:

css بولسا html,xml ۋە شۇ قاتارلىق ھۆججەتلەرنىڭ ئۇسلۇبىنى(样式) ئىپادىلەيدىغان (标记性语言)(ئۇيغۇرچىغا تەرجىمە قىلالمىدىم).


ئەمدى Less نىڭ ئورگان بىتىدىكى ئىنىقلىمىسنى كۆرۈپ باقايلى،تۆۋەندىكىسى Less نىڭ ئ‍ورگان بىتىدە بىرىلگەن ئىنىقلىمىسى:

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

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


Less نىمە سەۋەبتىن پەيدا بولغان؟

بۇ سۇئالغا جاۋاپ بىرىشتىن بۇرۇن css توغىرسىدا يەنە توختىلايلى،ھەممىمىز بىلىمىز css بولسا (标记性语言)(ئۇيغۇرچىغا تەرجىمە قىلالمىدىم)،گىرامماتتىكىسى ئاددى،ئ‍ۈگۈنۈشمۇ ئاسان،لكىن كەمچىلىكلىرىمۇ مەۋجۇت،چوڭ تىپتىكى تۈرلەرنى قىلغاندا پەرۋىش قىلىشقا بەك كۈچ كىتىدۇ،بۇنىڭ ئاساسلىق سەۋەبى بولسا css ھەقىقى مەنادىكى پىروگىرامما تىلى ئەمەس،بۇنىڭدا ئۆزگەرگۈچى مىقدار،فۇنكىسىيە،ئىپادە(运算)،دائىرە(作用域)،قايتا ئىشلىتىش(代码复用) قاتارلىق پىروگىرامما تىلنىڭ ئاساسى بولغان ئۇقۇملار مەۋجۇت ئەمەس،مەۋجۇت بولمىسا قانداق قىلىمىز؟ھەببەللى دىمەك بىز بۇيەردە بىر جاۋاپقا ئىرىشتۇق،Less بولسا css نى پىروگىرامما تىللىرىدا بار بولغان ئالاھىدىلىكلەرگە ئىگە قىلش ۋە بۇ ئارقىلىق ئىش ئۈنۈمىىنى يۇقىرى كۆتۈرۈش ئۈچۈن پەيدا بولغان.


Less قانداق ئىجرا بولىدۇ؟

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


less ھۆججەتنى css ھۆججەتكە ئايلاندۇرۇشنىڭ تۆۋەندىكىدەك نەچچە خىل ئۇسۇلى بار.

1.less.js ئارقىلىق ئايلاندۇرۇش.

2.Node قاتارلىق مۇلازىمىنتىر مۇھىتىدا ئايلاندۇرۇش.

3.HBuilder,Koala قاتارلىق دىتاللار ئارقىلق ئايلاندۇرۇش.

4.Grunt,Gulp قاتارلىق ئ‍ۈچىنچى تەرەپ قوراللىرى ئارقىلىق ئايلاندۇرۇش.


تۆۋەندە بىر قەدەر ئاددى بولغان less.js ئارقىلق ئايلاندۇرۇشتىن پايدىنلىپ بىر مىسال ئىشلەيلى.

1.ئاۋال less.js نى چۈشۈرىمىز.

بۇيەردىن چۈشۈرۈڭ

2.ئاندىن style.less ۋە less.js نى بەتكە ئۇلايمىز.

<link rel="stylesheet/less" type="text/css" href="style.less"/>
<script type="text/javascript" src="less.js"></script>

دىققەت: less ھۆججەت چوقۇم less.js نىڭ ئالدىدا بولۇشى كىرەك،يەنە بىر نۇقتا rel قىممىتى چوقۇم stylesheet/less بولۇشى كىرەك.


3.style.less ھۆججەتنى تەھرىرلەيمىز.

style.less ھۆججىتىنىڭ ئىچىگە بۇكودنى يازىمىز

@basic-color:#2b3140;
.header{
  width: 100%;
  height: 120px;
  background:@basic-color ;
}

css كودىغا ئايلانغاندىكى ھالىتى

.header {
  width: 100%;
  height: 120px;
  background: #2b3140;
}


سىناق قىلماقچى بولسىڭىز بۇ يەردىن سىناپ باقسىڭىز بولىدۇ .


ئاخىردا تەكىتلەشكە تىگىشلىك 2 نۇقتا.

less ھۆججەتنى چۇقۇم توركۆرگۈچ بىرتەرەپ قىلالايدىغان ھالەت يەنى css كە ئايلاندۇرۇش(编译) لازىم.

Less تىخى css نىڭ ئورنىنى ئالغىنى يوق ھەم ئالالمايدۇ.

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


مەنبە : تارقاتنىڭ يازمىسى