嵌套調用less函數時參數值的變化及提取部分-遁地龍卷風

来源:http://www.cnblogs.com/resolvent/archive/2017/06/11/6984149.html
-Advertisement-
Play Games

在a.less中導入base.lessa.less中的代碼 base.less中的代碼 @value的值為[ripple, .5s, linear]"@{value}"成為字元串"[ripple, .5s, linear]",避免js解析錯誤。~避免編譯,不加則輸出為"ripple"Tips: 少一 ...


在a.less中導入base.less
a.less中的代碼

.animate-ripple-ink{
.animation(ripple .5s linear;{
100%{
opacity: 0;
.transform(scale(2.5));
}
});
}

base.less中的代碼

.animation(@value;@content){
-webkit-animation: @value;
-moz-animation: @value;
-o-animation: @value;
-ms-animation: @value;
animation: @value;
.keyframes(~`"@{value}".split(/,\s+/)[0].replace("[","")`,@content);
}

@value的值為[ripple, .5s, linear]
"@{value}"成為字元串"[ripple, .5s, linear]",避免js解析錯誤。
~避免編譯,不加則輸出為"ripple"
Tips:

.animate-ripple-ink{
.animation(ripple .5s linear;{
100%{
opacity: 0;
.transform(scale(2.5));
}
});

 

少一個},less竟然不報錯,而是調用一個參數的.animation !我覺的這是一個bug。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 自己的總結的一些方法,如果有什麼新的好的方法希望能夠交流: 1.給定位(導航欄)(底部) nav{ position:fixed; top:0rem; }; footer{ position:fixed; bottom:0rem; }; 但是這個方法會有弊端,在你給nav設置定位時,內容區域就會頂頭 ...
  • 1、盒子模型 所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子,也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距(padding)、邊框(border)和外邊距(margin)組成。 用公式表示就是:盒子=邊框+內邊距+內容區域+外邊距 元素框的最內部分是實際的內容,直接包圍內容的 ...
  • 在 javascript 中,可以使用 == 來比較兩個數據是否相等,如果兩個數據的類型不同,那麼,將在進行轉換後進行比較,轉換的規則如下: l 如果其中一個操作數的類型為 Boolean ,那麼,首先將它轉換為數字類型,false 轉換為 0, true 將轉換為 1。 l 如果其中一個操作數的類 ...
  • 行內元素格式化順序:font-size-->em框-->內容區-->行內框-->根據基線放置行內框-->確定行框高度 相關概念: leading(行間距):指填充在兩行文字間的鉛條,等於line-height 和 font-size之差,其中一半leading加到文字上方,另一半leading加到文 ...
  • 一、縱向菜單 效果圖: 二、橫向菜單 效果圖: 三、下拉菜單 效果圖: 縱向的下拉菜單 給最外層容器nav添加額外的一個類,vertical成為<nav id="nav1" class="vertical">。。。。<nav> 然後添加如下的css規則: 效果圖: ...
  • 製作網站時,可能會用到視覺差效果 如圖 視覺差在製作網頁時會有很炫酷的效果,今天要講的是如何呈現動態視覺差 效果如圖: 製作方法首先需要一個視覺差的插件 我所用的插件是一款較為大眾的視覺差插件 導入這三個css文件後,在style中可以修改圖片 將圖片修改為指定gif即可 下麵介紹不使用插件方法 選 ...
  • <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大鏡</title> <style> *{ margin:0px; padding:0px; } #box{ width:430px; height:430px; ...
  • <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bootstrap</tit ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...