Question

/* BOC - GRID VIEW */
.ribbongrid {
   position: absolute;
   left: 10px; top: -5px;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px; 
   text-align: right;
}
.ribbongrid span {
   font-size: 10px;
   color: #fff; 
   text-transform: uppercase; 
   text-align: center;
   font-weight: bold; line-height: 20px;
   transform: rotate(-45deg);
   width: 100px; display: block;
   background: #79A70A;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 19px; left: -21px;
}
.ribbongrid span::before {
   content: '';
   position: absolute; 
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbongrid span::after {
   content: '';
   position: absolute; 
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}

.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}
/* EOC - GRID VIEW */

/* BOC - LIST VIEW */
.ribbonlist {
   position: absolute;
   left: 10px; top: 5px;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px; 
   text-align: right;
}
.ribbonlist span {
   font-size: 10px;
   color: #fff; 
   text-transform: uppercase; 
   text-align: center;
   font-weight: bold; line-height: 20px;
   transform: rotate(-45deg);
   width: 100px; display: block;
   background: #79A70A;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 19px; left: -21px;
}
.ribbonlist span::before {
   content: '';
   position: absolute; 
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbonlist span::after {
   content: '';
   position: absolute; 
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}

.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}
/* EOC - LIST VIEW */

if (Grid_View = 'True') {
  <div class="ribbongrid blue"><span>Special</span></div>
} else {
  <div class="ribbonlist blue"><span>Special</span></div>
}

两个css之间的唯一区别是从左边的网格改变高度：10px;上：-5px; ----------＆GT;列表左：10px;顶部：5px;

这只是一个例子。是否有一种方法可以将两个css组合起来优化代码而不是多次复制和粘贴？

Answer 1

你可以这样做：

if (Grid_View = 'True') {
  <div class="ribbongrid blue"><span>Special</span></div>
} else {
  <div class="ribbongrid ribbonlist blue"><span>Special</span></div>
}

和你的css：

.ribbongrid {
  position: absolute;
  left: 10px; 
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px; 
  text-align: right;
}

.ribbongrid.ribbonlist {
  top: 5px;
}

这将覆盖你的顶部从-5px到5px

Answer 2

只需创建两个新类（用于从左侧网格更改高度：10px;顶部：-5px; ----------＆gt;列表左侧：10px;顶部：5px;）并为所有内容创建一个通用CSS其他。然后使用JavaScript在这两个类之间切换。

例如：
您提供的代码可以像这样修改，

的 CSS：

/*RIBBON GRID*/ .ribbon_grid { left: 10px; top: -5px; } /*RIBBON LIST*/ .ribbon_list { left: 10px; top: 5px; } /*COMMON CODE FOR BOTH RIBBONS*/ .ribbon { position: absolute; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; } .ribbon span { font-size: 10px; color: #fff; text-transform: uppercase; text-align: center; font-weight: bold; line-height: 20px; transform: rotate(-45deg); width: 100px; display: block; background: #79A70A; background: linear-gradient(#9BC90D 0%, #79A70A 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 19px; left: -21px; } .ribbon span::before { content: ''; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #79A70A; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79A70A; } .ribbon span::after { content: ''; position: absolute; right: 0%; top: 100%; z-index: -1; border-right: 3px solid #79A70A; border-left: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79A70A; } .red span {background: linear-gradient(#F70505 0%, #8F0808 100%);} .red span::before {border-left-color: #8F0808; border-top-color: #8F0808;} .red span::after {border-right-color: #8F0808; border-top-color: #8F0808;} .blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);} .blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;} .blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}

的 JAVASCRIPT：

if (Grid_View = 'True') { <div class="ribbon ribbon_grid blue"><span>Special</span></div> } else { <div class="ribbon ribbon_list blue"><span>Special</span></div> }

希望这会有所帮助：）

基于Condition的CSS

2 个答案: