Less學(xué)習(xí)記錄


1.變量

很簡單,就是事先聲明好屬性變量顶掉,選擇器直接引用即可

2.混合

引用另一個規(guī)則集里的某些屬性時,直接在訪問類的名稱

3.嵌套

示例解釋:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

輸出結(jié)果:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

媒體查詢:<code>@media</code>嵌套方式挑胸,示例解釋:

.screencolor{
  @media screen {
    color: green;
    @media (min-width:768px) {
    color: red;
    }
    }
  @media tv {
    color: black;
  }
}

輸出結(jié)果:

@media screen {
  .screencolor {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screencolor {
    color: red;
  }
}
@media tv {
  .screencolor {
    color: black;
  }
}

選擇器<code>.screencolor</code>被移動到了<code>@media</code>內(nèi)部痒筒。

4.運(yùn)算
任何數(shù)值,顏色和變量都可以進(jìn)行運(yùn)算茬贵。

Less 能夠推斷顏色和單位之間的區(qū)別簿透。

如:

@var:1px +5;

結(jié)果輸出<code>@var:6px</code>。

5.函數(shù)
示例:

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);//基礎(chǔ)顏色值得飽和度增加5%
  background-color: spin(lighten(@base, 25%), 8);//背景顏色亮度增加25%后將色相值增加8%
}

6.命名空間和訪問器

不要將它與CSS <code>@namespace</code>或者namespace選擇器混為一談解藻?

這句話大概意思是老充?
封裝一部分變量和mixins(混合),以便以后復(fù)用或分發(fā):

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

現(xiàn)在想在<code>#header a</code>中混合<code>.button</code>類螟左,我們可以:

#header a{
    color:#orange;
    #button > .button;
}

7.作用域

首先局部尋找啡浊,如果沒找到,再從父作用域?qū)ふ衣肥ǎ来晤愅?/p>

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

變量和混合不必在使用前聲明虫啥,即<code>@var: white;</code>在<code>#header</code>前后一樣奄妨。

8.注釋

/*這是注釋*/

9.導(dǎo)入

@import "library";  //導(dǎo)入library.less
@import "type.css";

對于<code>.less</code>文件而言涂籽,其擴(kuò)展名是可選的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末砸抛,一起剝皮案震驚了整個濱河市评雌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌直焙,老刑警劉巖景东,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異奔誓,居然都是意外死亡斤吐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門厨喂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來和措,“玉大人,你說我怎么就攤上這事蜕煌∨哨澹” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵斜纪,是天一觀的道長贫母。 經(jīng)常有香客問我文兑,道長,這世上最難降的妖魔是什么腺劣? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任绿贞,我火速辦了婚禮,結(jié)果婚禮上誓酒,老公的妹妹穿的比我還像新娘樟蠕。我一直安慰自己贮聂,他們只是感情好靠柑,可當(dāng)我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著吓懈,像睡著了一般歼冰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上耻警,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天隔嫡,我揣著相機(jī)與錄音,去河邊找鬼甘穿。 笑死腮恩,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的温兼。 我是一名探鬼主播秸滴,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼募判!你這毒婦竟也來了荡含?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤届垫,失蹤者是張志新(化名)和其女友劉穎释液,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體装处,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡误债,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了妄迁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寝蹈。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖判族,靈堂內(nèi)的尸體忽然破棺而出躺盛,到底是詐尸還是另有隱情,我是刑警寧澤形帮,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布槽惫,位于F島的核電站周叮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏界斜。R本人自食惡果不足惜仿耽,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望各薇。 院中可真熱鬧项贺,春花似錦、人聲如沸峭判。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春宜雀,著一層夾襖步出監(jiān)牢的瞬間茧泪,已是汗流浹背清笨。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工业稼, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人横漏。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓谨设,卻偏偏與公主長得像,于是被迫代替她去往敵國和親缎浇。 傳聞我的和親對象是個殘疾皇子扎拣,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2 345

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)华畏,斷路器鹏秋,智...
    卡卡羅2017閱讀 134,599評論 18 139
  • 變量 注意你的less樣式文件一定要在引入less.js前先引入。 備注:請在服務(wù)器環(huán)境下使用亡笑!本地直接打開可能會...
    286f50208306閱讀 1,038評論 0 1
  • 《ijs》速成開發(fā)手冊3.0 官方用戶交流:iApp開發(fā)交流(1) 239547050iApp開發(fā)交流(2) 10...
    葉染柒丶閱讀 5,073評論 0 7
  • 本人作為一名今年剛畢業(yè)的應(yīng)屆生侣夷,目前的工作方向是前端開發(fā),學(xué)習(xí)前端到現(xiàn)在差不多14個月仑乌,有9個月的工作經(jīng)驗百拓。從幾個...
    程愷閱讀 321評論 1 3
  • Android網(wǎng)絡(luò)編程 訪問網(wǎng)絡(luò)需要申請權(quán)限。 請求網(wǎng)絡(luò)并顯示網(wǎng)頁源碼 布局文件 MainActivity 還有一...
    sunhaiyu閱讀 605評論 0 1