较少的样式表语

什么少？

Less是扩展CSS语言的CSS预处理器。LESS允许您使用变量，并通过更改一个变量来更改站点上的所有颜色。LESS CSS还允许您将语句嵌套在一起，重用代码，以及更多诸如将所有媒体查询嵌套在一个选择器中，而不是为每个屏幕大小需要做出的每次调整重复它。选择下面的列表减少变量瞄准网站。

使用LESS的一些好处包括:

• 简化的代码．避免一遍又一遍地重复代码。
• 节省时间．如果没有不必要的CSS代码重复，还有更多的时间来代码。
• 更容易维护。定义的值只需要更新一次(在控制面板中)，而不是在它们出现的任何地方。

如何在思维型中使用少？

较少只能输入控制面板中的自定义站点CSS字段（网站工具>控制面板>品牌>自定义网站的CSS）.如果在模板或其他页面的CSS块中包含LESS，则不能工作。在控制面板中输入LESS时，也不需要担心会破坏CSS，因为它会在将代码应用到站点之前验证代码。有关LESS功能的更多信息，请访问http.：/ / lesscss.org/features．

减少变量

变量允许更轻松的主题和维护CSS规则集（选择器及其声明块）。这意味着当在控制面板的自定义CSS中声明变量值时，它将更新在代码库中定义该变量的所有规则集。例如，如果要在整个皮肤中更改辅助链接的颜色，则会将以下变量定义添加到控制面板中：

@辅助链接 - 颜色：＃00b500;

然后将在其在网站的CSS中使用的所有位置进行处理和呈现，例如下拉链路：

.mt-dropdown a {颜色：＃00b500;｝

mixin

mixin是一种将多个样式声明从一个规则集包含到另一个规则集的简单方法。mixin可以像任何其他CSS规则集一样编写，并通过引用mixin选择器作为声明来引用:

//这是一个用于样式搜索结果过滤器旋转木马的Mixin规则集。此示例也包含变量。。文件框样式{边框：1px固体@动态列表边框颜色;边界半径：@边框半径-LSF;盒子尺寸：边框盒;｝

然后由这样的另一个规则集引用，如下所示：

.mt-help-carousel li a{显示:块;.flexbox-style;高度:12 em;保证金:.5em;填充:1 em;text-align:中心;｝

然后在编译后的CSS中呈现如下:

.mt-help-carousel li a{显示:块;边框：1PX实体＃B4B4B4;边界半径：.5EM;盒子尺寸：边框盒;高度:12 em;保证金:.5em;填充:1 em;text-align:中心;｝

嵌套规则集

嵌套规则集允许更清晰、更高效的代码。您可以将规则集分层嵌套到其他规则集中，而不是分别列出每个规则集。在MindTouch中，嵌套用于媒体查询和链接伪类，比如：徘徊，：积极的，:专注和:参观但可以用于自定义CSS中的任何嵌套的HTML元素。

默认的嵌套

让我们从用于横幅控件的嵌套规则集开始。这是它在渲染之前的样子。请注意，每个子元素如何嵌套在原始样式中：

.mt-notice-controls {float:右;margin-top: .625em;li {显示：内联块;Margin: 0 0 0 1em;} A：之前{font-size：125％;margin-right: .5em;vertical-align:中间;}}

下面是嵌套规则集以CSS形式呈现的方式:

.mt-notice-controls {float:右;margin-top: .625em;} .mt-notice-controls li{显示:inline-block;Margin: 0 0 0 1em;} .mt-notice-controls a:before {font-size: 125%;margin-right: .5em;vertical-align:中间;｝

@Media筑巢

当涉及到媒体查询和嵌套的伪元素时，嵌套看起来略有不同。

对于媒体查询，您最终可以略微修改嵌套引用。以下规则集根据所查看的屏幕尺寸来更改页面标题下的填充。注意@Media选择器如何代替嵌套选择器的位置。

#title {border-bottom: 1px solid @secondary-container-border-color;margin-top: 0;padding-bottom: .5rem;自动换行:break-word;@media all and (min-width: 18.75em) {padding-bottom: 0.1 em;} @media all and (min-width: 65.25em) {padding-bottom: 0.2 em;} @media all and (min-width: 80em) {padding-bottom: .25em;}}

这就是上述如何在CSS中呈现。前面的示例是一个较少的代码和选择器和其媒体查询之间的更好的层次关系。

#title {border-bottom: 1px solid #ddd;margin-top: 0;padding-bottom: .5rem;@media all and (min-width: 18.75em) {#title {padding-bottom: .1em}} @media all and (min-width: 65.25em) {#title {padding-bottom: .2em}}

嵌套的伪类和元素

当引用伪类和元素时，您需要使用＆表示选择器父级的符号。下面是带有嵌套链接伪类的辅助链接mixin的示例。

.mt-secondary-link-style {color: @secondary-link-color;&:访问{color: @secondary-link-color-visited;} .no-touch &:hover{颜色:@secondary-link-color-hover;} &:active {color: @secondary-link-color-active;} &:焦点{颜色:@secondary-link-color-focus;}}

以下代码是CSS将如何传递给浏览器。请注意，一些选择器也是组合的。编译较少时，它会合并相同的规则集，以便它可以将较小的CSS文件传送到浏览器。这允许更快的页面加载。

.mt-secondary-link:active， .mt-secondary-link:focus， .no-touch .mt-secondary-link:hover {color: #30b3f6}

更少的功能

较少的编译器包含许多可以计算，转换和操纵CSS中值的内置函数。MindTouch中最广泛使用的颜色和计算字体大小。MindTouch的整个颜色主题是一个颜色变量定义，然后用功能操纵，以创建皮肤中的其余颜色。

这是一种颜色如何控制其余的示例。突出的颜色是不饱和的，然后施加到主要容器背景和边界颜色，然后在那里被照亮。皮肤中的所有灰色色调都以类似的方式计算。

//用于计算所有其他颜色的皮肤默认颜色@highlight-color: #30b3f6;@highlight-color-desaturated:稀释(@highlight-color, 95%);//通过LESS颜色函数生成的一些主要容器颜色。@primary-container-background-color:减轻(@highlight-color-desaturated, 29%);@primary-container-border-color:减轻(@highlight-color-desaturated, 13%);

颜色并不是LESS在MindTouch中完成的唯一计算。标题的字体大小(从H1到H6)在不同的屏幕尺寸设置得更小，这样它们就不会占据整个屏幕。在这里,.mt-heading-h1mixin使用数学计算在移动视图中设置较小的字体大小，无论最初H1字体大小变量被定义为什么。

// h1字体大小变量@ h1-font-size：250％;// H1 Mixin规则设置具有字体大小计算.MT-Heading-H1 {Color：@ H1-Color;字体：@ H1-FONT-STYLE @ H1-FONT-PREETY @ H1-FONT-SIZE / @ H1-LINE-HEIGHT @ H1-Font-Family;边缘：@ H1-MARIN;填充：@ H1填充;@media全部和（min-widey：18.75em）{font-size :( @ h1-font-size * .75）;@media全部和（min-width：37.5em）{font-size：@ h1-font-size;}}