亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

less編寫(xiě)css代碼

testHs / 1132人閱讀

摘要：編寫(xiě)樣式表我想大家應(yīng)該都已經(jīng)熟悉了。我在這里說(shuō)的是使用的插件進(jìn)行樣式的編寫(xiě)，使用起來(lái)比原本的直接編寫(xiě)樣式，更加的簡(jiǎn)單與方便，代碼也變得更加的整齊。上直接使用編寫(xiě)代碼準(zhǔn)備電腦上的已經(jīng)安裝了插件。使用簡(jiǎn)單直接新建一個(gè)的文件，在其中編寫(xiě)的代碼。

css編寫(xiě)樣式表我想大家應(yīng)該都已經(jīng)熟悉了。我在這里說(shuō)的是使用sublime的插件進(jìn)行l(wèi)ess樣式的編寫(xiě)，使用起來(lái)比原本的直接編寫(xiě)css樣式，更加的簡(jiǎn)單與方便，css代碼也變得更加的整齊。
sublime上直接使用less編寫(xiě)css代碼 準(zhǔn)備

電腦上的sublime已經(jīng)安裝了Less插件。(npm install less -gd)

電腦上安裝了nodejs,并全局安裝lessc插件。

使用（簡(jiǎn)單）

直接新建一個(gè)aa.less的文件，在其中編寫(xiě)less的代碼。

ctrl+s保存下，在目錄中出現(xiàn)aa.css文件可以直接在頁(yè)面中使用。

less的簡(jiǎn)單介紹 什么是less

LESSCSS是一種動(dòng)態(tài)樣式語(yǔ)言，屬于css預(yù)處理語(yǔ)言的一種，它使用類(lèi)似css的語(yǔ)法，為css的賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量，繼承，運(yùn)算，函數(shù)等，更加方便css的編寫(xiě)和維護(hù)。

變量

變量允許我們多帶帶定義一系列通用的樣式，然后在需要的時(shí)候去調(diào)用。

@color:#4d926F;
#header{
   color:@color;
}
h2{
   color:@color
}
//編譯后--
#header{
   color:#4d926F;
}
h2{
   color:#4d926F;
}
混合

可以將一個(gè)定義好的classA 輕松的引入到另外一個(gè)classB中。

    .rounded-corners (@radius: 5px) {
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        -ms-border-radius: @radius;
        -o-border-radius: @radius;
        border-radius: @radius;
    }   
    #header {
        .rounded-corners;
    }
    #footer {
        .rounded-corners(10px);
    }
    // 編譯后 --
     #header {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    #footer {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }
嵌套（最常使用）

我們可以在一個(gè)選擇器中嵌套一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承，這樣很大程度減少了代碼量，并且代碼看起來(lái)更加的清晰。

   #header{
      h1{
        font-size:26px;
        font-weight:bold;
      }
      p{
        font-size:12px;
        a{
          text-decoration: none;
          &:hover{
            border-width: 1px;
          } 
        }
      }
   }
   // 編譯后 --
   #header h1 {
    font-size: 26px;
    font-weight: bold;
   }
   #header p {
    font-size: 12px;
   }
   #header p a {
    text-decoration: none;
   }
   #header p a:hover {
    border-width: 1px;
   }
函數(shù)和運(yùn)算

運(yùn)算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運(yùn)算，這樣就可以實(shí)現(xiàn)屬性值直接的復(fù)雜關(guān)系。

   @the-border: 1px;
   @base-color: #111;
   @red:        #842210;
    
   #header {
        color: (@base-color * 3);
        border-left: @the-border;
        border-right: (@the-border * 2);
   }
   #footer {
        color: (@base-color + #003300);
        border-color: desaturate(@red, 10%);
   }
   // 編譯后--
   #header {
        color: #333;
        border-left: 1px;
        border-right: 2px;
   }
   #footer {
        color: #114411;
        border-color: #7d2717;
   }

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111243.html

相關(guān)文章

  • #Less# less相關(guān)知識(shí)點(diǎn)總結(jié)

    摘要：是一門(mén)預(yù)處理語(yǔ)言，它擴(kuò)展了語(yǔ)言，增加了變量函數(shù)等特性，使更易維護(hù)和擴(kuò)展。所以在生產(chǎn)環(huán)境中，我們需要事前把文件編譯為正常的后，在相應(yīng)文件中引入，以后用戶訪問(wèn)的都是編譯好的，為不是拿現(xiàn)編譯的。代碼編譯為的結(jié)果 Less和CSS的區(qū)別 HTML和CSS不屬于編程語(yǔ)言而是屬于標(biāo)記語(yǔ)言,很難像JS一樣定義變量、編寫(xiě)方法、實(shí)現(xiàn)模塊化開(kāi)發(fā)等。LESS是一門(mén)CSS預(yù)處理語(yǔ)言，它擴(kuò)展了CSS語(yǔ)言，增加了...

    meteor199 評(píng)論0 收藏0

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

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

    MkkHou 評(píng)論0 收藏0

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

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

    codercao 評(píng)論0 收藏0

  • 莫閑前端之路學(xué)習(xí)markdown使用，html和css的編寫(xiě)順序以及class命名規(guī)范

    摘要：屬性順序標(biāo)簽標(biāo)簽標(biāo)簽必須加上命名命名規(guī)范名稱中只能出現(xiàn)小寫(xiě)字符和破折號(hào)使用有意義的名稱，使用有組織的或目的明確的名稱名稱應(yīng)當(dāng)盡可能短，并且意義明確，避免過(guò)度任意的簡(jiǎn)寫(xiě)。而是一個(gè)尚未被改變過(guò)的也是屬于的元素。 html屬性順序 class id data-*,name src, for, type, href title, alt aria-*, role /*a標(biāo)簽*/ Ex...

    mo0n1andin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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