Less入門二 變量

Less 是一門很神奇的語言,在第一個篇已經見到了, 那麼Less到底有哪些神奇了, 讓我們一個個來探索吧。

做爲 CSS 的一種形式的擴展,它並沒有閹割 CSS 的功能,而是在現有的 CSS 語法上,添加了很多額外的功能,所以學習 LESS 是一件輕而易舉的事情,果斷學習之!


做爲變量 就是和其他語言一樣可以多處使用, 好了就簡單的寫一個吧, 說得再多不動手可是不行的哦


less代碼如下

@sky-blue:#63B8FF;
@deep-blue:@sky-blue + #111;
.content {
	background-color: @deep-blue;
}


分析: 定義兩個變量sky-blue, deep-blue  變量賦值也可以用運算符,很神奇吧

由於sky-blue的值爲16進制,當然是可以相加哦, 至於能不能進行減法 乘法 除法,我想按捺不住而又聰明的你已經開始行動了E___6725EN00SIGG.gif

上面less代碼通過less的編譯生成的css代碼爲

.content {
  background-color: #74c9ff;
}

讓我來操作一些字符串吧


less代碼

@boy: "I am boy.";
@var: 'boy';
a:after
{
  	content: @@var;
}

分析 此段代碼可以通過使用變量的值作爲變量名,是不是不知不覺豎起大拇指呢E___6743EN00SIGG.gif

html代碼如下

<!-- 此處省略一萬字 -->
<body>
<a></a>
</body>
<!-- 此處省略一萬字 -->

代碼解析爲css代碼如下

a:after {
  content: "I am boy.";
}


主要 less裏面的變量是常量 只能進行初始賦值,不能多次賦值~! 啊怎麼能這樣E___6706EN00SIGG.gif

既然不能改變,那就盡情的去享受less帶來的魅力吧E___6759EN00SIGG.gif



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章