如果我想确保不在其他任何地方使用该类，我总是这样做。
所以例如div.className通常将className绑定到div。我试图用section标签来做这个并忽略样式，这不能用section标签完成吗？
LESS
section.about {
&__points {
padding-bottom: 150px;
li {
padding: 10px 6% 10px 10px;
box-sizing: border-box;
width: 46%;
margin-right: 1%;
text-align: right;
list-style-type: none;
display: inline-block;
float: left;
position: relative;
margin: 10px 0;
margin-right: 1%;
h2 {
color: #fff;
text-transform: uppercase;
margin: 15px 0px;
}
&:after {
content: '';
background: #fff;
position: absolute;
height: 100%;
width: 10%;
top: 0;
right: 0;
}
&:before {
content: attr(data-icon);
font-family: FontAwesome;
position: absolute;
right: calc(~'7% - 20px');
color: black;
z-index: 4;
font-size: 22px;
width: 20px;
height: 20px;
top: calc(~'50% - 15px');
}
&:nth-child(even) {
text-align: left;
margin-left: 1%;
margin-right: 0;
padding: 10px 10px 10px 6%;
&:after {
right: auto;
left: 0;
}
&:before {
right: 0;
left: calc(~'7% - 20px');
}
}
&:hover {
background: #34373c;
&:after { background: @accent-color; }
&:before { color: #fff; }
}
}
}
&__bottom-image {
position: absolute;
bottom: 0;
img { max-width: 60%; }
}
}
HTML
<div class="main-wrap">
<section class="about">
<h1>About <span>Us</span></h1>
<p>Who are we at Mobile Paint Solutions, and what do we provide.</p>
<p>Where did we come from, and where are we going?</p>
<ul class="about__points">
<li data-icon="">
<h2>Who are we</h2>
<p>Sed consectetur risus quis ligula dignissim ut pulvinar lacus. Vestibulum ullamcorper neque est, in tempus sapien eleifend quis.</p>
</li>
<li data-icon="">
<h2>Future</h2>
<p>Sed consectetur risus quis ligula dignissim ut pulvinar lacus. Vestibulum ullamcorper neque est, in tempus sapien eleifend quis.</p>
</li>
<li data-icon="">
<h2>What we do</h2>
<p>Sed consectetur risus quis ligula dignissim ut pulvinar lacus. Vestibulum ullamcorper neque est, in tempus sapien eleifend quis.</p>
</li>
<li data-icon="">
<h2>History</h2>
<p>Sed consectetur risus quis ligula dignissim ut pulvinar lacus. Vestibulum ullamcorper neque est, in tempus sapien eleifend quis.</p>
</li>
</ul>
<div class="about__bottom-image">
<img src="images/about-footer.png" alt="Mobile Paint Solutions" class="responsive-img">
</div>
</section>
</div>
输出CSS：
header #hdr-nav nav a:before,header:before{position:absolute;width:100%;left:0;content:''}.main-wrap section h1:after,.main-wrap section.about__points li:after,header #hdr-nav nav a:before,header:before{content:''}@large = ~"(min-width: 1366px)";@desktop = ~"(max-width: 1366px)";@tablet = ~"(max-width: 980px)";@mobile = ~"(max-width: 740px)";.responsive-img{max-width:100%;max-height:100%}article,aside,figure,footer,header,main,nav,section{display:block}@keyframes display{0%{display:block;opacity:0}100%{opacity:1}}@keyframes hide{0%{opacity:1}100%{opacity:0;display:none}}html{background:#1e2225;color:#fff}body{margin:0;font-family:Montserrat,sans-serif}header{height:100vh;background-image:url(../images/slide1.jpg);background-position:center center;background-size:cover;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}header:before{background:rgba(0,0,0,.6);height:100%;top:0}header #hdr-logo{z-index:2;width:50vw}header #hdr-nav{background:#131416;width:100%;position:absolute;bottom:0;right:0}header #hdr-nav nav{width:60%;float:right}header #hdr-nav nav a{padding:15px;color:#fff;float:left;text-decoration:none;font-size:12px;position:relative;margin:0 5px}header #hdr-nav nav a span{z-index:2;position:relative}header #hdr-nav nav a:before{z-index:1;height:2px;bottom:0;background:#cd1213;opacity:.3;transition:all .3s}header #hdr-nav nav a:hover:before{height:100%}#side-menu-icon{animation-name:hide;animation-duration:0s;animation-fill-mode:forwards;animation-iteration-count:1;position:fixed;top:20px;right:20px;border:2px solid #fff;border-radius:50px;width:50px;height:50px;z-index:999;transition:transform .5s;cursor:pointer}#side-menu-icon.sticky{display:block;animation-name:display;animation-duration:.5s;animation-fill-mode:forwards}#side-menu-icon.unsticky{animation-name:hide;animation-duration:.2s;animation-fill-mode:forwards}#side-menu-icon .bars{position:absolute;left:50%;top:50%;bottom:auto;right:auto;transform:translateX(-50%) translateY(-50%);width:22px;height:2px;background-color:#fff}#side-menu-icon .bars:after,#side-menu-icon .bars:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:inherit;transform:translateZ(0)}#side-menu-icon .bars:before{transition:transform .5s,width .5s,top .3s;transform:translateY(-6px);transform-origin:left top}#side-menu-icon .bars:after{transition:transform .5s,width .5s,top .3s;transform:translateY(6px);transform-origin:left bottom}#side-menu-icon:hover .bars:before{top:-2px}#side-menu-icon:hover .bars:after{top:2px}.main-wrap{text-align:center}.main-wrap section{margin:0 auto;position:relative;max-width:1120px;min-width:735px;clear:both;overflow:visible;height:100vh;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.main-wrap section h1{font-size:42px;font-weight:200;position:relative}.main-wrap section h1 span{font-weight:800}.main-wrap section h1:after{border-bottom:1px solid #cd1213;height:0;width:150px;position:absolute;bottom:-18px;left:calc(50% - 75px)}.main-wrap section p{margin:0;color:#a8a8a8;font-size:13px}.main-wrap section.about__points{padding-bottom:150px}.main-wrap section.about__points li{padding:10px 6% 10px 10px;box-sizing:border-box;width:46%;text-align:right;list-style-type:none;display:inline-block;float:left;position:relative;margin:10px 1% 10px 0}.main-wrap section.about__points li h2{color:#fff;text-transform:uppercase;margin:15px 0}.main-wrap section.about__points li:after{background:#fff;position:absolute;height:100%;width:10%;top:0;right:0}.main-wrap section.about__points li:before{content:attr(data-icon);font-family:FontAwesome;position:absolute;right:calc(7% - 20px);color:#000;z-index:4;font-size:22px;width:20px;height:20px;top:calc(50% - 15px)}.main-wrap section.about__points li:nth-child(even){text-align:left;margin-left:1%;margin-right:0;padding:10px 10px 10px 6%}.main-wrap section.about__points li:nth-child(even):after{right:auto;left:0}.main-wrap section.about__points li:nth-child(even):before{right:0;left:calc(7% - 20px)}.main-wrap section.about__points li:hover{background:#34373c}.main-wrap section.about__points li:hover:after{background:#cd1213}.main-wrap section.about__points li:hover:before{color:#fff}.main-wrap section.about__bottom-image{position:absolute;bottom:0}.main-wrap section.about__bottom-image img{max-width:60%}.main-wrap section.gallery__hero{position:absolute;top:0;left:0}body.nav-open #side-menu-icon{transform:rotate(180deg)}body.nav-open #side-menu-icon .bars{transform:translateX(-50%) translateY(-50%)}body.nav-open #side-menu-icon .bars:before{width:50%;transform:rotate(-45deg)}body.nav-open #side-menu-icon .bars:after{width:50%;transform:rotate(45deg)}body.nav-open #side-menu-icon:hover .bars:after,body.nav-open #side-menu-icon:hover .bars:before{top:0}
答案 0 :(得分：1)
你的CSS编译为......
section.about__points{}
...这不是一个部分，它是一个无序列表。
将您的LESS改为......
section.about{
.about{
&__points{
// Continue/nest rules from here ...
}
}
}