將普通舊CSS轉換爲Less

使用LESS編寫舊CSS的最佳方式是什麼？將普通舊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; 
}

來源

2011-03-08 keruilin

所有的CSS是有效的少，所以你可以說沒有必要改變任何東西。 – mcfedr 2015-12-26 08:59:50

您不需要嵌套.paginationNav;作爲你的其他divs中的混合。

湯姆是對的，它似乎頂部/底部應該是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;}

，而不是具有頂部和底部的具體樣式。

在更短的，你可以窩這樣的代碼：

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

來源

2011-03-09 03:29:01

簡單的答案是

.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限定條件：除非您需要重寫某些內容，否則會產生衝突，因此不需要指定繼承鏈。

來源

2011-03-08 14:26:30 Tom

.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 希望這有助於:)

來源

2015-12-25 19:23:34 khaven

將普通舊CSS轉換爲Less

回答

相關問題