<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          LESS 原理,一款css的預處理程序Less的使用

          時間:?2017-10-19閱讀:?1246標簽:?less
          ?Less一種動態樣式語言,LESS將CSS賦予了動態語言的特性,如變量,繼承,運算,函數...LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服務端運行。

          安裝與使用:

          //客戶端引用
          <link rel="stylesheet/less" type="text/css" href="styles.less">
          <script src="less.js" type="text/javascript"></script>
          //node服務端使用
          npm install less
          
          var less = require('less');//或者import less from 'less'
          less.render('.class { width: 1 + 1 }', function (e, css) {
              console.log(css);
          });
          //輸出
          .class {
            width: 2;
          }

          客戶端不建議直接引用less.js,可通過編譯為css引入,推薦編譯工具koala。

          變量

          定義變量用@ 

          //less
          @ly_width:100px;
          .box {
             width:@ly_width;
          }
          /*編譯css*/
          .box {
              width:100px;
          }

          混合

          混合可以將一個定義好的class A輕松的引入到另一個class B中,從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用,就像使用函數一樣。

          // LESS
          .rounded-corners (@radius: 5px) {
            border-radius: @radius;
            -webkit-border-radius: @radius;
            -moz-border-radius: @radius;
          }
          #header {
            .rounded-corners;
          }
          #footer {
            .rounded-corners(10px);
          }
          /*生成的 CSS */
          #header {
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
          }
          #footer {
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
          }

          嵌套規則

          實現樣式的繼承關系,代碼看起來層次分明,提高代碼可維護性

          // LESS
          #header {
            p { font-size: 12px;
              a { text-decoration: none;
                &:hover { border-width: 1px }
              }
            }
          }
          * 生成的 CSS */
          #header p {
            font-size: 12px;
          }
          #header p a {
            text-decoration: none;
          }
          #header p a:hover {
            border-width: 1px;
          }

          函數 & 運算

          運算提供了加,減,乘,除操作,還可以做屬性值和顏色的運算...

          //less
          @ly_width:100px;
          .one {
             width:@ly_widht + 100;
          }
          /*生成css*/
          .one {
              idth:200px;
          }

          match函數:

          round(1.67); //returns `2`
          eil(2.4); //returns `3`
          floor(2.6); //returns `2`)

          Color函數:

          lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
          darken(@color, 10%);      // return a color which is 10% *darker* than @color
          saturate(@color, 10%);    // return a color 10% *more* saturated than @color
          desaturate(@color, 10%);  // return a color 10% *less* saturated than @color
          fadein(@color, 10%);      // return a color 10% *less* transparent than @color
          fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
          fade(@color, 50%);        // return @color with 50% transparency
          spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
          spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
          mix(@color1, @color2);    // return a mix of @color1 and @color2

          命名空間

          有時候,你可能為了更好組織CSS或者單純是為了更好的封裝,將一些變量或者混合模塊打包起來, 你可以像下面這樣在#bundle中定義一些屬性集之后可以重復使用 

          #bundle {
            .button () {
              display: block;
              border: 1px solid black;
              background-color: grey;
              &:hover { background-color: white }
            }
            .tab { ... }
            .citation { ... }
          }
          //你只需要在 #header a中像這樣引入 .button:
          #header a {
            color: orange;
            #bundle > .button;
          }

          作用域

          LESS 中的作用域跟其他編程語言非常類似,首先會從本地查找變量或者混合模塊,如果沒找到的話會去父級作用域中查找,直到找到為止.

          文件引用

          一個less文件頭部引入另一個less文件

          @import "lib.less";
          @import "lib";

          注釋

          兩種注釋方式:

          //這是注釋哦... 

          /*這是注釋*/


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/5

          less的使用幾個技巧

          讓這個box范圍內的全部包進來,這樣的話就完美的進行調節,再也不用到處找第幾行第幾個,我剛才在哪個位置給覆蓋了。一看便知!小米諾基亞等公司,都有自己的主色調。如果每次加一個#e23615太麻煩,而且如果諾基亞要搞活動!

          Less導入選項

          Less 提供了CSS @import CSS規則的幾個擴展,以提供更多的靈活性來處理外部文件。使用 @import(reference)導入外部文件,但除非被引用

          Less 變量

          使用 @ 符號定義變量,變量分配使用 : 完成。聲明格式:@變量名:變量值 。通常看到很多重復的相同的值,我們可以通過使用變量來避免。Less中的變量和其他編程語言一樣,可以實現值的復用

          less循環和合并

          Loops語句允許我們多次執行一個語句或一組語句。在Less中,mixin可以自稱,與 Guard表達式和模式匹配組合使用時,這個遞歸mixin可以創建各種迭代/循環結構。

          移動端開發rem布局之less+媒體查詢布局的原理步驟和心得

          less:是一門css擴展語言,也成為css預處理器,引入了變量,mixin(混入)、運算以及函數等功能,首先寫一個common.less文件,專門用于媒體查詢,其中常用的屏幕大小單位有

          css媒體查詢aspect-ratio寬高比在less中的使用

          css媒體查詢有一個 寬高比很方便,aspect-ratio ,可以直接使用寬/高 來進行頁面適配 使用樣例如下:注意三點:

          less文件轉換為css文件

          Less 是一門 CSS 預處理語言,它擴充了 CSS 語言,增加了諸如變量、混合(mixin)、函數等功能,讓 CSS 更易維護、方便制作主題、擴充。本文主要介紹less文件如何轉化為css文件

          less相關知識點總結

          HTML和CSS不屬于編程語言而是屬于標記語言,很難像JS一樣定義變量、編寫方法、實現模塊化開發等。LESS是一門CSS預處理語言,它擴展了CSS語言,增加了變量、Mixin、函數等特性,使CSS更易維護和擴展。

          vscode如何將less編譯到指定css目錄中

          使用vscode的搬磚猿,想要在vscode編輯器里面很方便的編譯less文件,需要在擴展商店里面下載一款名叫Esay LESS的超好用擴展,配置我們的LESS,我們需要在.vscode文件夾中建立一個settings.json的文件

          如何將less編譯成css文件__less自動編譯成css的方法總結

          作為css的預處理less,擁有著比css更快捷方便,擴展了css的變量、Mixin、函數等特性,使 CSS 更易維護和擴展。下面是介紹如何將less文件轉換成css文件。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网