LESS系列 一些常用的Mixins

2022-08-05 02:06:17 字數 906 閱讀 9583

在我們平時的開發中,對於一些使用頻率很高的方法函式,我們一般都會將其歸納到一起,整理出乙個核心庫來。

其實這個思想,借助 less 也可以在 css 中得以實現。

下面是幾個在 w3cplus 中偷過來的常用 mixins,將其轉成 less 版~~~

在開始前,必須說說 less 的乙個不足之處,那就是不能像 sass 那樣使用 @if 和 @for 作判斷和迴圈。

這使得我們無法通過傳參的方式來使 mixins 根據需要編譯出pc端和移動端的樣式版本。

不過個人認為,這也不是什麼致命的缺陷,它還是基本能滿足工作需要的了。

但正因為這個缺陷,下面轉化出來的 mixins 注定不能和 sass 的相提並論了,我們需要根據需要,整理出pc端和移動端兩個版本的 mixins 庫了。

//表單元素垂直居中對齊(也可設定頂對齊,底對齊)

.form-element-v-align(@alignment: middle)//水平居中

.horizontal-center()//絕對居中(相對於固定寬高的容器)

.absolute-center(@width, @height)//浮動(主要針對pc端了...)

.float(@side: left)//清除浮動(其實很多時候,clear-fix也被提取為單類使用)

.clear-fix()}

//擷取文字(僅針對單行)

.text-single-line-ellipsis(@height, @line-height, @width: auto)//設定透明度

.opacity(@val)//不可用狀態

.disabled(@bgcolor:#e6e6e6, @textcolor:#ababab)//最小高度(主要針對pc端了...)

.min-height(@height)

less的一些用法整理

前提理解 第乙個,less是單獨的一種檔案,可以理解為css的公升級版,完全按照css寫也沒問題,不過它提供了很多便利的東西,可以省好多 量。第二個,html只認css,所以需要配套一些軟體將less解析成css,引用時候,直接引用css就好。gulp,koala 都是常用的,koala好像簡單且方...

一些常用的函式

設定文字 test.getdlgitem text的id setwindowtext 顯示文字1 獲得當前目錄 getcurrentdirectory max path,buf 獲得當前程式檔名等 getmodulefilename getsystemdirectory getwindowsdire...

一些常用的函式

這是一些使用頻率比較高的函式,有的來自別人的程式.1.產生隨機字串函式 function random length return hash 2.擷取一定長度的字串 注 該函式對gb2312使用有效 function wordscut string,length sss 0 for i 0 i le...