我怎样才能多次应用此代码而不重复整个代码，而只改变下划线的颜色呢？
.mp_m_blurb_underline_sliding h4 {
display: inline-block;
position: relative;
padding-bottom: 5px;
font-size: 5px;
font-weight: 600;
-webkit-transition: all .5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}
.mp_m_blurb_underline_sliding p {
padding-top: 10px;}
.mp_m_blurb_underline_sliding h4:hover {
color: #2ea3f2;}
您需要为下划线颜色的样式设置不同的类。
.main_css_styling{
//lines of codes of styling
}
.underline_blue{
//blue
}
.underline_red{
//red
}
<h4 class="main_css_styling underline_blue"><h4/> //same main css styling
<h4 class="main_css_styling underline_red"><h4/> //same main css styling
结论:通过使用不同的下划线颜色的类，您不需要重复大量的编码，只需要将带有不同颜色的2个类放置在每个头标记中即可。
如果您要求对多个类名使用相同的样式，比如common function-您需要使用更少的/scss，这两个库都有mixin，mixin类似于编程语言中的函数。
请查看以下文档:http://lesscs.org/features/#mixins-feature
例如:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
但是，如果您不想使用这些库，则需要为这些“可变”样式创建一个单独的类，并将其添加到所需的标记（两个类名）中。
例如，只为具有特定颜色的下划线颜色创建一个类-黄色_MP_M_Blurb_Underline_Sliding，蓝色_MP_M_Blurb_Underline_Sliding，无论您想给它命名什么。。。
像那样使用它
<p class="mp_m_blurb_underline_sliding yellow_mp_m_blurb_underline_sliding"> ... </p>
