Question

使用LESS编写这个旧CSS的最佳方法是什么？

.paginationContainerTop {width:100%; margin-bottom:10px;}
.paginationContainerTop .paginationNav {float:right; text-align:right;}

.paginationContainerBottom {width:100%; margin-top:10px;}
.paginationContainerBottom .paginationNav {float:right; text-align:right;}

根据我的理解，它会是这样的：

.paginationNav {
    float: right; 
    text-align: right;
}

.paginationContainerTop { 
    margin-bottom: 10px;
    .paginationNav;
}

.paginationContainerBottom { 
    margin-top: 10px;
    .paginationNav;
}

Answer 1

你不需要嵌套.paginationNav;作为你其他div中的混合物。

Tom是对的，似乎Top / Bottom应该是ID，甚至可能不是必需的？我想你的HTML看起来像这样：

<div id="header">
     <div id="paginationNavTop">
          <div id="paginationNav">[nav stuff]</div
     </div>
</div>

[body stuff]

<div id="footer">
     <div id="paginationNavBottom">
          <div id="paginationNav">[nav stuff styled differently]</div
     </div>
</div>

如果是这种情况，你可以把它写成你的CSS：

  .paginationNav {float: right; text-align: right;}
  #header .paginationNav {margin-bottom: 10px;}
  #footer .paginationNav {margin-top: 10px;}

而不是具有顶部和底部特定样式。

在LESS中，你可以像这样嵌套代码：

  .paginationNav {float: right; text-align: right;}
  #header {
     .paginationNav {margin-bottom: 10px;}
  }
  #footer {
      .paginationNav {margin-top: 10px;}
  }

Answer 2

简单的答案是

.paginationContainerTop, .paginationContainerBottom {width:100%;}
.paginationNav {float:right; text-align:right;}
.paginationContainerTop {margin-bottom:10px;}
.paginationContainerBottom {margin-top:10px;}

但那对你有害。看起来你正在使用类来识别ID。如果我正确地读取您的代码，您可能希望将共享属性分解为类，然后使用ID（#paginationContainerTop而不是.paginationContainerTop）来获取特定于各个元素的属性。但是，在这种情况下，您指定了一个默认属性（宽度：100％），除非它继承了您已更改的内容，因此CSS可以进一步修剪为：

.paginationNav {float:right; text-align:right;}
.paginationContainerTop {margin-bottom:10px;}
.paginationContainerBottom {margin-top:10px;}

另请注意，我从.paginationNav样式中删除了.paginationContainerTop / Bottom限定条件：除非您需要覆盖某些内容，否则会产生冲突，因此无需指定继承链。

Answer 3

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.delegate = self;
    self.scrollView.frame = self.view.frame;

    NSArray *colorsArray = [NSArray arrayWithObjects:[UIColor blueColor], [UIColor yellowColor],[UIColor greenColor], nil];

    NSArray *imagesArray = [NSArray arrayWithObjects:[UIImage imageNamed:@"123.png"],[UIImage imageNamed:@"13.png"],[UIImage imageNamed:@"12.png"],nil];

    for (int i = 0; i < colorsArray.count; i++) {
        CGRect frame;
        frame.origin.x = self.view.frame.size.width * i;
        frame.size = self.view.frame.size;

        self.scrollView.pagingEnabled = YES;

        UIView *view = [[UIView alloc] initWithFrame:frame];
        view.backgroundColor = [colorsArray objectAtIndex:i];

        UIImageView *imageView = [[UIImageView alloc] initWithFrame:view.frame];
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        imageView.image = [imagesArray objectAtIndex:i];
        [view addSubview:imageView];

        [self.scrollView addSubview:view];

    }

    self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width * colorsArray.count, self.scrollView.frame.size.height);

    self.pageControl.numberOfPages = 3;
    self.pageControl.currentPage = 0;
}


- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat pageWidth = CGRectGetWidth(self.scrollView.bounds);
    CGFloat pageFraction = self.scrollView.contentOffset.x / pageWidth;
    self.pageControl.currentPage = roundf(pageFraction);
}

我刚使用此工具将您的CSS转换为更少： http://beautifytools.com/css-to-less-converter.php 希望这会有所帮助：）

将普通旧CSS转换为Less

3 个答案: