国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

less學(xué)習(xí)

desdik / 2572人閱讀

摘要：是什么里邊的可以使用多種編譯環(huán)境將轉(zhuǎn)換為我是用的是安裝文件依程序員的角度去編寫的出現(xiàn)兼容性寫法使用更容易等使用的混合寫法更加方便中的變量在使用的時(shí)候中的類混合在沒有之前想讓一個(gè)有兩個(gè)類得到效果只能是給這個(gè)加兩個(gè)類從而達(dá)到兩個(gè)類的

less是什么

css里邊的jquery 可以使用多種編譯環(huán)境將less轉(zhuǎn)換為css 我是用的是node安裝less 文件.less
write less do more
依程序員的角度去編寫css
css3的出現(xiàn) css 兼容性寫法使用less更容易 -webkit- -moz- -o-等使用less的混合寫法更加方便

less中的變量

@name:value
在使用的時(shí)候 height:@name

less中的類混合

在沒有l(wèi)ess之前 想讓一個(gè)div有兩個(gè)類得到效果 只能是給這個(gè)div加兩個(gè)類 從而達(dá)到兩個(gè)類的效果混合
但是有了less之后 不再需要兩個(gè)類 只需要在less中將需要混合的類放在一起
less

.bg{
    height: @test_width;background: red;.border;
}
.border{
    border: 10px solid #0D3349;
}

生成的css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}

有了這個(gè)功能 就能實(shí)現(xiàn)就能夠?qū)崿F(xiàn)將許多類的公共代碼抽取出來 再使用混合為每一個(gè)類加入這部分公共的代碼

less中可帶參數(shù)的混合

為待混合的部分增加參數(shù) 這樣在其他類調(diào)用的時(shí)候更加靈活
less

.bg{
    height: @test_width;background: red;.border(11px);
}
.border(@border_width){
    border: @border_width solid #0D3349;
}

生成的css代碼

.bg {
  height: 300px;
  background: red;
  border: 11px solid #0D3349;
}

為這個(gè)參數(shù)指定默認(rèn)值
less 為@border_width指定默認(rèn)值10px

.bg{
    height: @test_width;background: red;.border();
}
.border(@border_width:10px){
    border: @border_width solid #0D3349;
}

值得注意的是.bg只是一個(gè)定義的過程 在.border里邊調(diào)用才可以生成css
這樣在調(diào)用這個(gè)混合的時(shí)候即使沒有參數(shù)的時(shí)候也不會(huì)報(bào)錯(cuò) 生成的css如下
css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}
less中的匹配模式

相當(dāng)于js中的if 但不完全是
less沒有出現(xiàn)之前 在頁面上寫一個(gè)三角形的方法

.sanjiao{
  width: 0;height: 0;overflow: hidden;
  border-width:10px ;
  border-color: transparent transparent red transparent;
   border-style: dashed dashed solid dashed;
  //dashed  是為了兼容ie6
}

使用了less的匹配模式來實(shí)現(xiàn)

.tringle(top,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:dashed dashed solid dashed ;
}
.tringle(bottom,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:solid dashed dashed  dashed ;
}
.tringle(@_,@w:10px,@c:red){   //不管會(huì)執(zhí)行那個(gè)tringle都會(huì)執(zhí)行這一個(gè)  而且后邊的這兩個(gè)參數(shù)必須攜帶
    width: 0;height: 0;overflow: hidden;
}
.sanjiao_shang{
   .tringle(top)
}
.sanjiao_xia{
  .tringle(bottom)
}

生成的css

.sanjiao_shang {
  border-width: 10px;
  border-color: red;
  border-style: dashed dashed solid dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sanjiao_xia {
  border-width: 10px;
  border-color: red;
  border-style: solid dashed dashed  dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}

less中可以對變量進(jìn)行預(yù)算 只要這個(gè)變量帶著單位 運(yùn)算的時(shí)候是需要運(yùn)算整數(shù) 不需要管單位 同時(shí)顏色也可以進(jìn)行運(yùn)算

less中的嵌套規(guī)則

但是在css中盡量的少去嵌套 增加web性能
less

.list{
  width: 600px;margin: 30px auto;
  padding:0;
  li{
    height: 30px;
  }
  a{
    &:hover{           //&代表的就是上一層選擇器
      color: #6ba82f;
    }
  }
}

生成的css

.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
}
.list li {
  height: 30px;
}
.list a:hover {
  color: #6ba82f;
}
less中的@arguments

less代碼

.test(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}
.tt1{
  .test()
}

將會(huì)生成的css代碼

.tt1 {
  border: 30px red solid;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116660.html

相關(guān)文章

  • less學(xué)習(xí)筆記

    摘要：方便了的編寫和維護(hù)。本文記錄了開發(fā)中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個(gè)帶單位嵌套嵌套是中非常有用高效的語法。學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)在中如果我們需要對這一結(jié)構(gòu)的樣式進(jìn)行渲染，就會(huì)使用等選擇器。 一、什么是less less是一種動(dòng)態(tài)樣式語言，屬于css預(yù)處理語言的一種，它使用類似css的語法，為css賦予了動(dòng)態(tài)語言的特性，如變量、運(yùn)算、函數(shù)等。方便了css的編寫和維護(hù)。 le...

    MkkHou 評論0 收藏0

  • less學(xué)習(xí)筆記

    摘要：方便了的編寫和維護(hù)。本文記錄了開發(fā)中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個(gè)帶單位嵌套嵌套是中非常有用高效的語法。學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)在中如果我們需要對這一結(jié)構(gòu)的樣式進(jìn)行渲染，就會(huì)使用等選擇器。 一、什么是less less是一種動(dòng)態(tài)樣式語言，屬于css預(yù)處理語言的一種，它使用類似css的語法，為css賦予了動(dòng)態(tài)語言的特性，如變量、運(yùn)算、函數(shù)等。方便了css的編寫和維護(hù)。 le...

    codercao 評論0 收藏0

  • 前端構(gòu)建工具grunt學(xué)習(xí)筆記

    使用grunt實(shí)時(shí)編譯less文件 下圖是項(xiàng)目的文件組織 showImg(https://segmentfault.com/img/bVqbtg); 生成package.json文件，通過npm init命令。 安裝你需要的Devdependencies/denpendencies。 npm install grunt --save-dev npm install load-grunt-ta...

    zone 評論0 收藏0

  • less學(xué)習(xí)一

    摘要：是一門預(yù)處理語言，它擴(kuò)展了語言，增加了變量函數(shù)等特性，使更易維護(hù)和擴(kuò)展。可以運(yùn)行在或?yàn)g覽器端。 Less 是一門 CSS 預(yù)處理語言，它擴(kuò)展了 CSS 語言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展。 Less 可以運(yùn)行在 Node 或?yàn)g覽器端。 less文件只有被編譯后才能被瀏覽器識(shí)別和使用 less編譯工具：1. Koala ：國人開發(fā)的less全平臺(tái)編譯工具? ...

    helloworldcoding 評論0 收藏0

  • 學(xué)習(xí)Less-看這篇就夠了

    摘要：在網(wǎng)上討論看來，與相比于功能更為豐富，但對于學(xué)習(xí)成本以及適應(yīng)時(shí)間，稍勝一籌，這也是我選擇的原因。如果你也是的使用者，還需要配合進(jìn)行處理，具體可見我的這篇文章飛行手冊，里面詳細(xì)說明了的處理方式。 原文鏈接 前言 CSS的短板 ????作為前端學(xué)習(xí)者的我們 或多或少都要學(xué)些 CSS ，它作為前端開發(fā)的三大基石之一，時(shí)刻引領(lǐng)著 Web 的發(fā)展潮向。 而 CSS 作為一門標(biāo)記性語言，可能 給初...

    hiyayiji 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<