Less-css基礎擴充

標籤：選取器   總結   blog   less   輸出   nbsp   get   選中   部落格   

//擴充Extendless的偽類，合并了選取器，放在與它引用匹配的選取器上Use Method：以在study上擴充test的樣式為例.test{    color:#000000;    font-size:18px;}//grammar 1.study{    &:extend(.test);    background:red;}//grammar 2.study:extend(.test){    background:red;}//輸出css.test,.study {  color: #000000;  font-size: 18px;}.study {  background: red;}//擴充allUse Method：以在study上擴充test的樣式為例當有all的時候，會連同test下面所有child一起擴充.test{    color:#000000;    font-size:18px;    li{        width:50px;        height:50px;        background:red;    }}//grammar 1.study:extend(.test all){}//grammar 2.test{    &:extend(.test all);}//輸出css.test,.study {  color: #000000;  font-size: 18px;}.test li,.study li {  width: 50px;  height: 50px;  background: red;}當無all時僅會擴充選中的選取器樣式//grammar 1.study:extend(.test){}//grammar 2.study{    &:extend(.test);}//輸出css.test,.study {  color: #000000;  font-size: 18px;}.test li {  width: 50px;  height: 50px;  background: red;}總結：擴充，簡而言之就是css中的共用樣式以上例子說明：study上面有著和test中完全相同的樣式，為了簡化代碼，我們在study直接擴充

 

leona

原文連結：http://www.cnblogs.com/leona-d/p/6296162.html

著作權聲明：本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連結

Less-css基礎擴充