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進制,當然是可以相加哦, 至於能不能進行減法 乘法 除法,我想按捺不住而又聰明的你已經開始行動了
上面less代碼通過less的編譯生成的css代碼爲
.content { background-color: #74c9ff; }
讓我來操作一些字符串吧
less代碼
@boy: "I am boy."; @var: 'boy'; a:after { content: @@var; }
分析 此段代碼可以通過使用變量的值作爲變量名,是不是不知不覺豎起大拇指呢
html代碼如下
<!-- 此處省略一萬字 --> <body> <a></a> </body> <!-- 此處省略一萬字 -->
代碼解析爲css代碼如下
a:after { content: "I am boy."; }
主要 less裏面的變量是常量 只能進行初始賦值,不能多次賦值~! 啊怎麼能這樣
既然不能改變,那就盡情的去享受less帶來的魅力吧