内容的栏目 * @param int $category 0列表 1频道 2单页 3外链 * @return array */ function category_list($forumlist, $model = 0, $display = 0, $category = 0) { if (empty($forumlist)) return NULL; static $cache = array(); $key = $model . '-' . $display . '-' . $category; if (isset($cache[$key])) return $cache[$key]; if ($display) { foreach ($forumlist as $k => $val) { if (1 == $val['display'] && 1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } else { foreach ($forumlist as $k => $val) { if (1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } return empty($cache[$key]) ? NULL : $cache[$key]; } /** * @param $forumlist 所有版块列表 不分模型 * @param int $display 0全部CMS栏目 1在首页和频道显示内容的栏目 * @param int $category 0列表 1频道 2单页 3外链 * @return array */ function category_list_show($forumlist, $display = 0, $category = 0) { if (empty($forumlist)) return NULL; static $cache = array(); $key = $display . '-' . $category; if (isset($cache[$key])) return $cache[$key]; if ($display) { foreach ($forumlist as $k => $val) { if (1 == $val['display'] && 1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } else { foreach ($forumlist as $k => $val) { if (1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } return empty($cache[$key]) ? NULL : $cache[$key]; } /** * @param $forumlist 所有版块列表 * @return mixed BBS栏目数据(仅列表) 尚未开放bbs频道功能 */ function forum_list($forumlist) { if (empty($forumlist)) return array(); static $cache = array(); if (isset($cache['bbs_forum_list'])) return $cache['bbs_forum_list']; $cache['bbs_forum_list'] = array(); foreach ($forumlist as $_fid => $_forum) { if ($_forum['type']) continue; $cache['bbs_forum_list'][$_fid] = $_forum; } return $cache['bbs_forum_list']; } // 导航显示的版块 function nav_list($forumlist) { if (empty($forumlist)) return NULL; static $cache = array(); if (isset($cache['nav_list'])) return $cache['nav_list']; foreach ($forumlist as $fid => $forum) { if (0 == $forum['nav_display']) { unset($forumlist[$fid]); } } return $cache['nav_list'] = $forumlist; } ?>javascript - Less mixin for all 4 margins (top,right,bottom.left) - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Less mixin for all 4 margins (top,right,bottom.left) - Stack Overflow

    javascript - Less mixin for all 4 margins (top,right,bottom.left) - Stack Overflow

    programmeradmin0浏览0评论

    How can I write this css as an less mixin that generate all those classes automatically:

      .class1x{margin-top:1px;}
  .class2x{margin-right:1px;}
  .class3x{margin-bottom:1px;}
  .class4x{margin-left:1px;}
===========================================
  .class1y{margin-top:2x;}
  .class2y{margin-right:2px;}
  .class3y{margin-bottom:2px;}
  .class4ymargin-left:2px;}    
===========================================
  .class1n{margin-top:n..px;}
  .class2n{margin-right:n..px;}
  .class3n{margin-bottom:n..px;}
  .class4nmargin-left:n..px;}

    And to increment that classes and value, for example, until value is 100px. I have this less but I don't want to multiply for every css property:

    @iterations: 30;
.loopingClass (@index) when (@index > 0) {
  .classx@{index} { /*classx the class to add in html*/
    margin: ~"@{index}px"; 
  }
  .loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@iterations);

    ty.

    How can I write this css as an less mixin that generate all those classes automatically:

      .class1x{margin-top:1px;}
  .class2x{margin-right:1px;}
  .class3x{margin-bottom:1px;}
  .class4x{margin-left:1px;}
===========================================
  .class1y{margin-top:2x;}
  .class2y{margin-right:2px;}
  .class3y{margin-bottom:2px;}
  .class4ymargin-left:2px;}    
===========================================
  .class1n{margin-top:n..px;}
  .class2n{margin-right:n..px;}
  .class3n{margin-bottom:n..px;}
  .class4nmargin-left:n..px;}

    And to increment that classes and value, for example, until value is 100px. I have this less but I don't want to multiply for every css property:

    @iterations: 30;
.loopingClass (@index) when (@index > 0) {
  .classx@{index} { /*classx the class to add in html*/
    margin: ~"@{index}px"; 
  }
  .loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@iterations);

    ty.

    • javascript
    • jquery
    • html
    • css
    • less
    Share Improve this question edited Dec 11, 2013 at 17:30 aIKid 28.3k5 gold badges41 silver badges65 bronze badges asked Dec 11, 2013 at 10:23 BurebistaRulerBurebistaRuler 6,53911 gold badges54 silver badges69 bronze badges
    Add a ment  | 

    3 Answers 3

    Reset to default 6

    Same solution as given by @Bass Jobsen, just gently optimized (it did not have to be so verbose):

    // usage:

.class {
    .make-margins(3);
    // or:
    // .make-margins(10, px);
    // .make-margins(50, rem);
    // etc.
}

// implementation:

.make-margins(@i, @u: px) when (@i > 0) {
    .make-margins((@i - 1), @u);
    &@{i} {.margin-x(unit(@i, @u))}
}

.margin-x(@value) {
    &-1 {margin-top:    @value}
    &-2 {margin-right:  @value}
    &-3 {margin-bottom: @value}
    &-4 {margin-left:   @value}
}

    If you allow (unique) number where you have x,y, ... n, try:

    @iterations: 5;
@step:1;
@number: 4;

.margintype(@number,@step) when (@number = 4)
{
  margin-left: ~"@{step}px";
}
.margintype(@number,@step) when (@number = 3)
{
  margin-bottom: ~"@{step}px";
}
.margintype(@number,@step) when (@number = 2)
{
  margin-right: ~"@{step}px";
}
.margintype(@number,@step) when (@number = 1)
{
  margin-top: ~"@{step}px";
}


.writeclass(@number,@step,@loopcounter) when (@number>0)
{
 .class@{loopcounter}-@{number}{ 

      .margintype(@number,@step); 
  }
  .writeclass(@number - 1,@step,@loopcounter);
}

.loopingClass (@index,@step,@loopcounter) when (@index > 0) {

.writeclass(@number, @index * @step,@loopcounter);
.loopingClass(@index - 1,@step,@loopcounter + 1);
}
.loopingClass (@iterations,@step,0);

    Which results in:

    .........   
.class3-4 {
  margin-left: 2px;
}
.class3-3 {
  margin-bottom: 2px;
}
.class3-2 {
  margin-right: 2px;
}
.class3-1 {
  margin-top: 2px;
}
.class4-4 {
  margin-left: 1px;
}
.class4-3 {
  margin-bottom: 1px;
}
.class4-2 {
  margin-right: 1px;
}
.class4-1 {
  margin-top: 1px;
}

    @seven-phases-max at usage you actually must use ".class" + "sequence" + "position". For example your less pile: 

    .class1-1 {
    margin-top: 1px;
}
.class1-2 {
    margin-right: 1px;
}
.class1-3 {
    margin-bottom: 1px;
}
.class1-4 {
    margin-left: 1px;
}
.class2-1 {
    margin-top: 2px;
}
.class2-2 {
    margin-right: 2px;
}
.class2-3 {
    margin-bottom: 2px;
}
.class2-4 {
    margin-left: 2px;
}
.class3-1 {
    margin-top: 3px;
}
.class3-2 {
    margin-right: 3px;
}
.class3-3 {
    margin-bottom: 3px;
}

.class3-4 {
    margin-left: 3px;
}

    And .make-margins(3); value is actually iterations.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论