通過開來源文件學LESS系列3

來源:互聯網
上載者:User

1.引言

通過開來源文件學LESS系列1,我們通過一個經典的LESS Mixins集preboot,學習了LESS的基礎知識,包括變數、注釋、混合和混合的參數等,詳見通過開來源文件學LESS系列1。

通過開來源文件學LESS系列2,通過tRRtoolbelt.less的代碼解讀來學習LESS,主要講解了LESS中的命名空間、範圍、多條件判斷和類型判斷函數、字串插值和避免編譯等,詳見通過開來源文件學LESS系列2。

本教程通過解讀css effects項目源碼來繼續學習LESS。首先看看該項目的DEMO,整合了很多常見的動畫、陰影等效果。

2.代碼解讀該項目採用import的方式進行檔案組織,src下有css-effects.less、animations.less、box-shadow.less、icons.less、mixins.less等檔案組成。css-effects.less檔案是主檔案,裡面匯入animations、box-shadow、icons三個效果檔案,mixins.less是該項目用到的常規mixin集合。首先看看css-effects.less
//css-effects.less@import 'src/animations';@import 'src/icons';@import 'src/box-shadow';
非常簡單匯入效果檔案,然後我們重點看看animation效果檔案。
//animations.less@import "mixins";.animation-ellipsis(){overflow:hidden;display: inline-block;vertical-align: top;font-size:inherit;text-align:right;width:1em;.animate(ellipsis 1s ease infinite alternate);&:after{content:"...";overflow:hidden;display: inline-block;}.anim-ellipsis(){from {width:0;}to {width: 2em;}}@-webkit-keyframes ellipsis{.anim-ellipsis();}@-moz-keyframes ellipsis{.anim-ellipsis();}@-ms-keyframes ellipsis{.anim-ellipsis();}@keyframes ellipsis{.anim-ellipsis();}}
匯入mixins.less之後,是一個動畫的定義。2.1 importimport命令用來匯入一個另外的檔案,在標準css中@import命令必須在所有命令之前,在LESS中不強求放在檔案開頭。但是作為良好的開發習慣,強烈建議放到檔案開頭。
//@import的幾種格式//匯入less檔案@import "mixins.less";//如果匯入的是less檔案,則副檔名可以預設@import "mixins"//也可以匯入其他格式的檔案,如果是.css,會按照css檔案處理,如果是其他格式,將會認為是LESS檔案@import "style.css"@import "some.php"
另外LESS提供了“匯入關鍵字”可以允許多種方式使用外部檔案。使用匯入關鍵字(Import Options)的文法如下
Syntax: @import (keyword) "filename";
現在的匯入關鍵字有以下這些:
  • reference: use a less file but do not output it----使用該less檔案但是不輸出
  • inline: include the source file in the output but do not process it----在輸出中包含該less檔案,但是不做處理
  • less: treat the file as a less file, no matter what the file extension----不管是什麼副檔名的外部檔案,統統認做less處理
  • css: treat the file as a css file, no matter what the file extension----不管是什麼副檔名的外部檔案,統統認做css處理
  • once: only include the file once (this is default behavior)----引入該外部檔案一次(預設值)
  • multiple: include the file multiple times----多次引入該外部檔案
好的,繼續來看animation效果檔案
.animation-mexican(){overflow:hidden;display: inline-block;text-align:center;b{display: inline-block;.animate(mexican 1s 0.0s ease-in-out infinite alternate);&:after{content: ".";}}@iterations:10;.loop(@iterations);// Looping generator.loop (@index) when (@index>0){b:nth-child( @{iterations}n + @{index} ){.animate-delay( (@index/10) * 1s);}.loop((@index - 1));}// Animation//.anim-mexican(){80% {.transform(translateY(0));}to {.transform(translateY(-0.3em));}}@-webkit-keyframes mexican{.anim-mexican();}@-moz-keyframes mexican{.anim-mexican();}@-ms-keyframes mexican{.anim-mexican();}@keyframes mexican{.anim-mexican();}}
這個動畫mixin我們需要重點關注LESS迴圈的實現。2.2 迴圈
@iterations:10;// 迴圈的定義,利用when實現迴圈的條件判斷,利用.loop((@index - 1))實現下次迴圈.loop (@index) when (@index>0){b:nth-child( @{iterations}n + @{index} ){.animate-delay( (@index/10) * 1s);}.loop((@index - 1));}// 迴圈的使用.loop(@iterations);
再來看個例子,迴圈體裡還可以使用迴圈指標作為變數。
// Looping generator.loop (@index) when (@index>0){b:nth-child(@{iterations}n + @{index}){@rotate:@index*@degrees;.transform(rotate( -@rotate ), 0 0 );}.loop(@index - 1);}
3.總結與展望本教程對css effects進行了代碼解析,主要講解了LESS中的import、迴圈等知識。系列教程還在繼續,敬請期待。---------------------------------------------------------------
前端開發whqet,關注web前端開發技術,分享網頁相關資源。
---------------------------------------------------------------

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.