Преобразование простого старого CSS в Less - PullRequest
Новая
       4

Преобразование простого старого CSS в Less

1 голос
/ 08 марта 2011

Как лучше написать этот старый CSS, используя LESS? 

.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;
}

Ответы [ 3 ]

2 голосов
/ 09 марта 2011

Вам не нужно вкладывать .paginationNav; как миксин внутри ваших других дивов.

Том прав, кажется, сверху / снизу должны быть идентификаторы, и они могут даже не понадобиться? Я представляю, как ваш 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;}

вместо специфических стилей Top и Bottom.

В LESS вы можете вложить код, подобный этому: 

  .paginationNav {float: right; text-align: right;}
  #header {
     .paginationNav {margin-bottom: 10px;}
  }
  #footer {
      .paginationNav {margin-top: 10px;}
  }
0 голосов
/ 25 декабря 2015 
.paginationContainerTop {
    width: 100%;
    margin-bottom: 10px;
    .paginationNav {
        float: right;
        text-align: right;
    }
}
.paginationContainerBottom {
    width: 100%;
    margin-top: 10px;
    .paginationNav {
        float: right;
        text-align: right;
    }
}

Я просто использовал этот инструмент, чтобы конвертировать ваши CSS в меньшие: http://beautifytools.com/css-to-less-converter.php надеюсь, это поможет:)

0 голосов
/ 08 марта 2011

Простой ответ - 

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

, но это оказывает вам медвежью услугу.Похоже, вы используете классы для того, что должно быть идентификаторами.Если я правильно читаю ваш код, вы, вероятно, захотите разбить общие свойства на классы, а затем использовать идентификаторы (#paginationContainerTop вместо .paginationContainerTop) для свойств, специфичных для отдельных элементов.Однако в этом случае вы указываете свойство (ширина: 100%), которое используется по умолчанию, если только оно не наследует что-то, что вы изменили, поэтому CSS можно дополнительно обрезать до: 

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

Также обратите вниманиечто я убрал квалификацию .paginationContainerTop / Bottom из ваших стилей .paginationNav: если вам не нужно что-то переопределить или это создаст конфликт, указывать цепочку наследования не нужно.

...