less css概念区别

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">   在bootstrap中有提到less名词，当然也有.less文件，那它是怎样的一个文件呢？如下：</span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="html">@base: #f938ab;.box-shadow(@style, @c) when (iscolor(@c)) {  -webkit-box-shadow: @style @c;  box-shadow:         @style @c;}.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {  .box-shadow(@style, rgba(0, 0, 0, @alpha));}.box {  color: saturate(@base, 5%);  border-color: lighten(@base, 30%);  div { .box-shadow(0 0 5px, 30%) }}

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">编译结果:</span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"><span class="hljs-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">.box</span><span style="color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"> </span><span class="hljs-rules" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">color</span>:<span class="hljs-value" style="box-sizing: border-box;"> <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 153, 153);">#fe33ac</span></span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">border-color</span>:<span class="hljs-value" style="box-sizing: border-box;"> <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 153, 153);">#fdcdea</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span style="color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"></span><span class="hljs-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">.box</span><span style="color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"> </span><span class="hljs-tag" style="box-sizing: border-box; color: rgb(0, 0, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">div</span><span style="color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"> </span><span class="hljs-rules" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">-webkit-box-shadow</span>:<span class="hljs-value" style="box-sizing: border-box;"> <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">5px</span> <span class="hljs-function" style="box-sizing: border-box;">rgba</span>(<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0.3</span>)</span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">box-shadow</span>:<span class="hljs-value" style="box-sizing: border-box;"> <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">5px</span> <span class="hljs-function" style="box-sizing: border-box;">rgba</span>(<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0.3</span>)</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
</span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">其实，它相当于是一门新语言了，它可以编译得到css文件，也就是less文件是css文件的前身</span>