css3的less与sass:
只用了多个less编辑成的css,用了一个html页面做出来的效果：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>颜色变换less</title> ???????<link rel="stylesheet" type="text/css" href="red.css" id="css1"/> ???????<style type="text/css"> ???????????*{ ???????????margin:0px; ???????????padding:0px; ???????????} ???????????#con{ ???????????????width:80%; ???????????????height:100%; ???????????????margin:0px auto; ???????????????/*border:white;*/ ???????????} ???????????.coa{ ???????????????margin-top:15px; ???????????} ???????????.B{ ???????????????display:block; ???????????????border:0px solid red; ???????????????width:70%; ???????????????margin:0px auto; ???????????????text-align:right; ???????????????color:white; ???????????} ???????????#kun .uls{ ???????????????list-style-type: initial; ???????????} ???????????#kun .uls li:first-child{ ???????????????margin-left:0px; ???????????} ???????????#kun .uls li{ ???????????????display:inline-block; ???????????????width:19.57%; ???????????????height:22px; ???????????????border:1px solid gainsboro; ???????????????text-align:center; ???????????????margin-left:-2px; ???????????} ???????????.gg{ ???????????????margin-right:30px; ???????????????height:50px; ???????????????display:inline-block; ???????????????float: left; ???????????} ???????????.span_5{ ???????????????font-size:18px; ???????????????color:#000; ???????????????margin-left:-20px; ???????????} ???????????#fd{ ???????????????width:55px; ???????????????height:68px; ???????????????float:left; ?????????????????margin-right:50px; ???????????} ???????????p.as{ ???????????????margin-top:15px; ???????????????border:0px solid red; ???????????????height:12px; ???????????????line-height:12px; ???????????} ???????????.co_6{ ???????????????display: block; ???????????????width:72%; ???????????????border:0px solid red; ???????????????float: left; ???????????????margin-left:30px; ???????????} ???????????.co_6 span:first-child{ ???????????????display:block; ???????????????margin-left:0px; ???????????} ???????????#cx{ ???????????????clear: both; ???????????????width:20%; ???????????????height:100%; ???????????????background-color:#000; ???????????} ???????????.fads{ ???????????????margin-left:360px; ???????????} ???????????.fads li{ ???????????????display: inline-block; ???????????} ???????????.fads li span{ ???????????????margin-left:5px; ???????????????margin-right:5px; ???????????} ???????</style> ???</head> ???<body> ???????<div id="con"> ???????????<div class="color r"> ???????????????<input type="button" name="btn" ?class="btn" value="lightblue" data-colors="lightblue.css"/> ???????????????<input type="button" name="btn" class="btn" value="lightsteelblue" data-colors="lightsteelblue.css"/> ???????????????<input type="button" name="btn" ???class="btn" value="orange" data-colors="le.css"/> ???????????????<input type="button" name="btn" class="btn" value="lightgreen" data-colors="lightgreen.css"/> ???????????????<input type="button" name="btn" class="btn" value="red" data-colors="red.css"/> ???????????????<div class="coa"> ???????????????<span class="B">DUIS AUTE</span> ???????????????<span class="B">IRURE DOLOR</span> ???????????????</div> ???????????</div> ???????????<div id="kun"> ???????????????<ul class="uls"> ???????????????????<li>LOREM</li> ???????????????????<li>IPSUM</li> ???????????????????<li>DOLOR</li> ???????????????????<li>SIT AMET</li> ???????????????????<li>ALIQUIP</li> ???????????????</ul> ???????????????<div id="co_2"> ???????????????????<p class="font">Mollit Anim</p> ???????????????????<p>Lorem ipsum dolor sit amet, coonsectetur adipisicing elit,sed do eiusmod tempor <u class="font">incididunt</u> ut labore et dolore magna aliqua. Ut enmi adminnim veniam, quis <u class="font">nostrud</u> exercitation ullamco laboris nisi ut aliquip ex ea commodo onsequat.</p> ???????????????????<p> ???????????????????????<span class="font gg"> ???????????????????????????Lorem ???????????????????????</span> ???????????????????????<span > ???????????????????????????dDuis aute irure dolor in reprehen derit in voluptate verlit esse cillum dolore eufigiat nulla pariatur. ???????????????????????</span> ???????????????????</p> ???????????????????<p> ???????????????????????<span class="font gg"> ???????????????????????????Ipsum ???????????????????????</span> ???????????????????????<span> ???????????????????????????Exceptetur sint occaecat cupidatat non proident, sunt in culpa qui offcia deserunt mollit anmi id est laborum. ???????????????????????</span> ???????????????????</p> ???????????????????<p> ???????????????????????<div id="fd"> ???????????????????????????<span class="co_4 color o"> ???????????????????????????<img src="../img/l.png"/> ???????????????????????</span> ???????????????????????</div> ???????????????????????????????????????????????<span> ???????????????????????????<span class="span_5"> ???????????????????????????????Duis aute irure dolor ???????????????????????????</span> ???????????????????????????<ul class="re"> ???????????????????????????????<li><a href="#" class="font">Loorem ipsum</a></li> ???????????????????????????????<li><a href="#" class="font">Dolor sit amet</a></li> ???????????????????????????????<li><a href="#" class="font">Conscteur adlipisicing</a></li> ???????????????????????????</ul> ???????????????????????</span> ???????????????????</p> ???????????????</div> ???????????????<div id="co_3"> ???????????????????<p class="as"> ???????????????????????<span class="kuai"></span> ???????????????????????<span class="font"> ???????????????????????????Lorem ipsum dolor sit amet ???????????????????????</span> ???????????????????</p> ???????????????????<p> ???????????????????????<img src="../img/photo1.jpg" style="float: left;"/> ???????????????????????<span class="co_6"> ???????????????????????????<span class="span_5"> ???????????????????????????????Duis aute irure dolor ???????????????????????????</span> ???????????????????????????<span> ???????????????????????????????Lorem ipsum dolor sit amet, coonsectetur biiafd adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ???????????????????????????<a href="#" class="font" style="display: block;text-align:right;font-size:14px;">Ut labore...》</a> ???????????????????????????</span> ???????????????????????</span> ???????????????????</p> ???????????????????<p class="as"> ???????????????????????<span class="kuai"></span> ???????????????????????<span class="font"> ???????????????????????????Excepteur sint occaecat ???????????????????????</span> ???????????????????</p> ???????????????????<p> ???????????????????????<span class="co_6" style="width:100%"> ???????????????????????????<span style="margin-top:10px"> ???????????????????????????Lorem ipsum dolor sit amet, coonsectetur biiafd adipisicing elit, do eiusmod tempor incididunt ut labore et dolore magna aliqua. ???????????????????????????</span> ???????????????????????</span> ???????????????????</p> ???????????????????<div class="cx"> ???????????????????????<span id="dd"> ???????????????????????????<span class="kuai gfh" style="background:#fff"></span> ???????????????????????<span style="color:#fff;display: block;margin-left: 30px;"> ???????????????????????????Excepteur sint occaecatExcepteur sint occaecatExcepteur sint occaecatExcepteur sint occaecat ???????????????????????</span> ???????????????????????</span> ???????????????????????<a href="#" class="font a_w">Deserunt</a> ???????????????????</div> ???????????????????<p> ???????????????????????<img src="../img/photo2.jpg" style="float: left;"/> ???????????????????????<span class="co_6"> ???????????????????????????<span class="span_5"> ???????????????????????????????Duis aute irure dolor ???????????????????????????</span> ???????????????????????????<span> ???????????????????????????????Lorem ipsum dolor sit amet, coonsectetur biiafd adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ???????????????????????????<a href="#" class="font" style="display: block;text-align:right;font-size:14px;">Ut labore...》</a> ???????????????????????????</span> ???????????????????????</span> ???????????????????</p> ???????????????</div> ???????????????<div id="dad" style="clear: both;"> ???????????????????<ul class="fads"> ???????????????????<li><a href="#" class="font">LOREM</a><span class="font">|</span></li> ???????????????????<li><a href="#" class="font">IPSUM</a><span class="font">|</span></li> ???????????????????<li><a href="#" class="font">DOLOR</a><span class="font">|</span></li> ???????????????????<li><a href="#" class="font">SIT AMET</a><span class="font">|</span></li> ???????????????????<li><a href="#" class="font">ALIQUIP</a></li> ???????????????</ul> ???????????????</div> ???????????</div> ???????</div> ???????<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> ???????<script type="text/javascript"> ???????????$(".btn").click(function(){ ???????????????var file=$(this).data("colors"); ???????????????$("#css1").prop("href",file); ???????????}); ???????</script> ???</body></html>less部分：
/*只要把颜色变换了就可以变色多个颜色了，以下的几个就不示范了*/
@color:#FF0000;@bgcolor:#FF9D73;@zero:0px;.deWidth(@width:100px,@height:100px){ ???width: @width; ???height:@height;}.color{ ???background-color:@bgcolor;}.font{ ???color:@color;}.uls{ ???li{ ???background-color:@bgcolor;}}.re{ ???color:@color;}#co_2,#co_3{ ???.deWidth(45%,100%); ???background:#fff; ???border-right:1px dashed @color; ???float: left; ???p{ ???????padding-top:15px; ???????width:90%; ???????margin:0px auto; ???}}#co_3{ ???.deWidth(54.6%,100%); ???border-right:0px dashed @color;}.r{ ??.deWidth(100%,132px); ??position:relative; }.btn{ ???.deWidth(100px,32px); ???color:white; ???background:@bgcolor; ???font-size:16px; ???text-align: center; ???outline:none; ???margin-top:10px; ???margin-left:10px;}h1,h2,h3,h4,h5,h6,div,ul,li{ ???margin:@zero; ???padding:@zero;}.co_4{ ???background:@color; ???.deWidth(53px,53px); ???display:block; ???border:1px solid @color; ???img{ ???????margin:0px auto; ???????display: block; ???????margin-top:5px; ???}}.kuai{ ???display: block; ???.deWidth(10px,10px); ???float:left; ???margin-right:30px; ???border:1px solid @color; ???background:@bgcolor; ???}.cx{ ???.deWidth(90%,100%); ???clear:left; ???display: block; ???margin:0px auto; ???border:0px solid red; ???overflow: hidden; ???padding-top:12px; ???#dd{ ???????background: @bgcolor; ???????display:block; ??????.deWidth(345px,100%); ???????float: left; ??????.gfh{ ??????????margin-right:18px; ??????????text-align: center; ??????} ???}}.a_w{ ???.deWidth(155px,30px); ???float: left; ???margin-left:30px; ???border:1px solid #000; ???background:@bgcolor; ???color:@color; ???text-align:center; ???text-decoration:none;}#dad{ ???background: @bgcolor; ???.deWidth(100%,30px); ???clear: both;}
less编辑成了css文件
.color { ?background-color: #FF9D73;}.font { ?color: #FF0000;}.uls li { ?background-color: #FF9D73;}.re { ?color: #FF0000;}#co_2,#co_3 { ?width: 45%; ?height: 100%; ?background: #fff; ?border-right: 1px dashed #FF0000; ?float: left;}#co_2 p,#co_3 p { ?padding-top: 15px; ?width: 90%; ?margin: 0px auto;}#co_3 { ?width: 54.6%; ?height: 100%; ?border-right: 0px dashed #FF0000;}.r { ?width: 100%; ?height: 132px; ?position: relative;}.btn { ?width: 100px; ?height: 32px; ?color: white; ?background: #FF9D73; ?font-size: 16px; ?text-align: center; ?outline: none; ?margin-top: 10px; ?margin-left: 10px;}h1,h2,h3,h4,h5,h6,div,ul,li { ?margin: 0px; ?padding: 0px;}.co_4 { ?background: #FF0000; ?width: 53px; ?height: 53px; ?display: block; ?border: 1px solid #FF0000;}.co_4 img { ?margin: 0px auto; ?display: block; ?margin-top: 5px;}.kuai { ?display: block; ?width: 10px; ?height: 10px; ?float: left; ?margin-right: 30px; ?border: 1px solid #FF0000; ?background: #FF9D73;}.cx { ?width: 90%; ?height: 100%; ?clear: left; ?display: block; ?margin: 0px auto; ?border: 0px solid red; ?overflow: hidden; ?padding-top: 12px;}.cx #dd { ?background: #FF9D73; ?display: block; ?width: 345px; ?height: 100%; ?float: left;}.cx #dd .gfh { ?margin-right: 18px; ?text-align: center;}.a_w { ?width: 155px; ?height: 30px; ?float: left; ?margin-left: 30px; ?border: 1px solid #000; ?background: #FF9D73; ?color: #FF0000; ?text-align: center; ?text-decoration: none;}#dad { ?background: #FF9D73; ?width: 100%; ?height: 30px; ?clear: both;}css中的Less
原文地址：https://www.cnblogs.com/zsmdbk/p/9553002.html