less常用技巧

whlong 發布于2019-08-29 18:41 / 2971人閱讀

摘要：所以在給公司定制組件庫的時候我們可以使用這兩種方法來給使用者定制主題，當然了，我們設計的時候最好和主流框架的變量名保持一致，使得使用者更好上手。

本文主要是記錄自己日常工作中用到過的一些less小技巧

1. 組件庫主題定制

一般組件庫的樣式編寫都會為使用者設計一些主題樣式更換方案，我這里根據自己對主流組件庫antd和iview的研究，總結出這兩類：

iview引入主題樣式，復寫

@import "~iview/src/styles/index.less";
// Here are the variables to cover, such as:
@primary-color: #1B88EE;

antd通過less-loader的modifyVars注入主題變量

rules: [{
    test: /.less$/,
    use: [{
        loader: "style-loader",
    }, {
        loader: "css-loader", // translates CSS into CommonJS
    }, {
        loader: "less-loader", // compiles Less to CSS
        options: {
            modifyVars: {
                "primary-color": "#1B88EE",
            },
            javascriptEnabled: true,
        },
}], //注意 less-loader 的處理范圍不要過濾掉 node_modules 下的 antd 包。

所以在給公司定制組件庫的時候我們可以使用這兩種方法來給使用者定制主題，當然了，我們設計的時候最好和主流框架的變量名保持一致，使得使用者更好上手。

@primary-color: #1B88EE;                         // 全局主色
@link-color: #1B88EE;                            // 鏈接色
@success-color: #4FC7AF;                         // 成功色
@warning-color: #F8AC59;                         // 警告色
@error-color: #F95355;                           // 錯誤色
@font-size: 28px;                                // 主字號
@text-color: rgba(0, 0, 0, .65);                 // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45);      // 次文本色
@disabled-color : rgba(0, 0, 0, .25);            // 失效色
@border-radius: 4px;                             // 組件/浮層圓角
@border-color: #d9d9d9;                          // 邊框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // 浮層陰影

2. 給項目設置常用樣式common.less

不知道大家在實際開發中有沒有遇到過為了一個padding或margin或fontsize而常常需要多寫一層class的情況。

.loop(20);
.loop(@n, @i: 0) when (@i =< @n) {
    @size: @i*2;

    .pt-@{size} { padding-top: unit(@size, px) !important; }
    .pr-@{size} { padding-right: unit(@size, px) !important; }
    .pb-@{size} { padding-bottom: unit(@size, px) !important; }
    .pl-@{size} { padding-left: unit(@size, px) !important; }

    .mt-@{size} { margin-top: unit(@size, px) !important; }
    .mr-@{size} { margin-right: unit(@size, px) !important; }
    .mb-@{size} { margin-bottom: unit(@size, px) !important; }
    .ml-@{size} { margin-left: unit(@size, px) !important; }

    .fs-@{size} { font-size: unit(@size, px) !important; }

    .loop(@n, (@i + 1));
} // e.g. pt-2 pt-16 pt-40 fs-16 fs-24等等

把以上這段加到通用less里后，如果有一些特殊的邊距或字體就可以直接寫class="mb-20"這樣了，可以省去一些功夫多寫個不必要的class，當然常用的width或height之類的都可以通過when循環解決，需要注意的less沒有if-else判斷，所有的判斷也都是通過when關鍵字來解決。

云服務器 GPU云服務器 less less2 html使用less linux密令less

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114499.html

less常用技巧

摘要：所以在給公司定制組件庫的時候我們可以使用這兩種方法來給使用者定制主題，當然了，我們設計的時候最好和主流框架的變量名保持一致，使得使用者更好上手。本文主要是記錄自己日常工作中用到過的一些less小技巧 1. 組件庫主題定制一般組件庫的樣式編寫都會為使用者設計一些主題樣式更換方案，我這里根據自己對主流組件庫antd和iview的研究，總結出這兩類： iview引入主題樣式，復寫 @im...

voyagelab 2019-08-23 17:02 評論0 收藏0
sublime配置及使用技巧

摘要：第三步，安裝插件安裝方法一快捷鍵，輸入回車，然后輸入你想安裝的包的名稱，回車安裝方法二當然你也可以打開文件夾，然后去等平臺下相關插件放在這里即可。如果需要 vim 配置，可以移步面向 web 前端及 node 開發人員的 vim 配置 sublime 3 配置和使用技巧第一步，設置settings 一下是我個人喜歡的格式配置，在perferences -> settings { ...

LoftySoul 2019-08-29 16:40 評論0 收藏0
sublime配置及使用技巧

摘要：第三步，安裝插件安裝方法一快捷鍵，輸入回車，然后輸入你想安裝的包的名稱，回車安裝方法二當然你也可以打開文件夾，然后去等平臺下相關插件放在這里即可。如果需要 vim 配置，可以移步面向 web 前端及 node 開發人員的 vim 配置 sublime 3 配置和使用技巧第一步，設置settings 一下是我個人喜歡的格式配置，在perferences -> settings { ...

kumfo 2019-08-23 11:53 評論0 收藏0
12個常用的javascript簡寫技巧---可以大大減少js代碼量

摘要：極大的簡化了代碼量變量聲明盡管會自動講變量上提，使用該方法可以講所有的變量都在函數的頭部用一行搞定。簡化前簡化后譯者譯文原文微信公眾號個人博客知乎本文是并非本人所寫，只是我看了覺得對自己很有幫助，所以分享給大家，原文鏈接在最下面，謝謝觀看。1. 空(null, undefined)驗證當我們創建了一個新的變量，我們通常會去驗證該變量的值是否為空(null)或者未定...

kyanag 2019-08-21 11:51 評論0 收藏0