less的基礎(chǔ)用法

作為一個(gè)前端開發(fā)座咆,寫css樣式是再平常不過(guò)的事情了私痹,有時(shí)候砂代,多個(gè)元素的樣式是一樣的昼窗,但是我們還是會(huì)把這些樣式重新寫一遍国撵,要不就是鍵盤三劍客 CTRL + C豺憔,CTRL + A帅容,CTRL + V牍帚,真是苦了比程序猿棍矛,現(xiàn)在安疗,我們不用再那么傻了,我們給css加點(diǎn)猛料够委。less是一個(gè)兼容css的拓展語(yǔ)言荐类。

因?yàn)?Less 和 CSS 非常像,因此很容易學(xué)習(xí)茁帽。而且 Less 僅對(duì) CSS 語(yǔ)言增加了少許方便的擴(kuò)展掉冶,這就是 Less 如此易學(xué)的原因之一。

Less 到底為 CSS 添加了什么功能脐雪?以下就是這些新加功能的概覽厌小。

嵌套寫法

原CSS:

less寫法:?

使用變量

less聲明變量的方式為:@變量名:值

代碼示例:

編譯為css代碼:

混合?

如果你想將一組屬性樣式添加到另外一組屬性樣式中去,你可以用混合來(lái)實(shí)現(xiàn)

代碼示例:

編譯為css代碼:

運(yùn)算?

less支持對(duì)任何數(shù)字战秋、顏色璧亚、變量之間進(jìn)行加、減、乘癣蟋、除運(yùn)算

在進(jìn)行加透硝、減運(yùn)算中會(huì)自動(dòng)進(jìn)行單位的換算,計(jì)算結(jié)果以左側(cè)的單位類型為準(zhǔn)疯搅,

如果單位換算無(wú)效或者無(wú)意義濒生,則會(huì)忽略單位(無(wú)效的單位例如換算例如:px 到 cm 或 rad 到 % 的轉(zhuǎn)換。)

注意:乘法和除法不作轉(zhuǎn)換幔欧。Less 將按數(shù)字的原樣進(jìn)行操作罪治,并將為計(jì)算結(jié)果指定明確的單位類型。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末礁蔗,一起剝皮案震驚了整個(gè)濱河市觉义,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌浴井,老刑警劉巖晒骇,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異磺浙,居然都是意外死亡洪囤,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門撕氧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)瘤缩,“玉大人,你說(shuō)我怎么就攤上這事呵曹。” “怎么了何暮?”我有些...
    開封第一講書人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵奄喂,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我海洼,道長(zhǎng)跨新,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任坏逢,我火速辦了婚禮域帐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘是整。我一直安慰自己肖揣,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開白布浮入。 她就那樣靜靜地躺著龙优,像睡著了一般。 火紅的嫁衣襯著肌膚如雪事秀。 梳的紋絲不亂的頭發(fā)上彤断,一...
    開封第一講書人閱讀 50,084評(píng)論 1 291
  • 那天野舶,我揣著相機(jī)與錄音,去河邊找鬼宰衙。 笑死平道,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的供炼。 我是一名探鬼主播一屋,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼劲蜻!你這毒婦竟也來(lái)了陆淀?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤先嬉,失蹤者是張志新(化名)和其女友劉穎轧苫,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體疫蔓,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡含懊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了衅胀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片岔乔。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖滚躯,靈堂內(nèi)的尸體忽然破棺而出雏门,到底是詐尸還是另有隱情,我是刑警寧澤掸掏,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布茁影,位于F島的核電站,受9級(jí)特大地震影響丧凤,放射性物質(zhì)發(fā)生泄漏募闲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一愿待、第九天 我趴在偏房一處隱蔽的房頂上張望浩螺。 院中可真熱鬧,春花似錦仍侥、人聲如沸要出。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)厨幻。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間况脆,已是汗流浹背饭宾。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留格了,地道東北人看铆。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像盛末,于是被迫代替她去往敵國(guó)和親弹惦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容

  • 本文目錄 1.變量 2.混合(Mixins) 3.嵌套(Nesting) 4.運(yùn)算(Operations) 5.轉(zhuǎn)...
    前端輝羽閱讀 580評(píng)論 0 2
  • 概覽 Less (Leaner Style Sheets 的縮寫) 是一門向后兼容的 CSS 擴(kuò)展語(yǔ)言悄但。這里呈現(xiàn)的...
    寫寫而已閱讀 377評(píng)論 0 0
  • 歡迎訪問(wèn)我的博客棠隐,祝碼農(nóng)同胞們?cè)缛兆呱先松鷰p峰,迎娶白富美~~~ 更好的體驗(yàn)檐嚣,請(qǐng)移步less的基本用法 1 前言 ...
    這里王工頭閱讀 4,529評(píng)論 0 3
  • rem基礎(chǔ) rem單位 rem (root em)是一個(gè)相對(duì)單位嚎京,類似于em嗡贺,em是父元素字體大小。 不同的是re...
    新苡米閱讀 293評(píng)論 0 8
  • 一鞍帝、維護(hù) css 的弊端 CSS 是一門非程序式語(yǔ)言诫睬,沒(méi)有變量、函數(shù)帕涌、SCOPE(作用域)等概念摄凡。 CSS 需要書...
    生命里那束光閱讀 288評(píng)論 0 1