less 技巧_使用LESS的实用技巧

less 技巧

不久前，我们了解了LESS的基础知识 ，尽管这对于初学者来说是可靠的参考，但是LESS可以做很多事情！ 本教程的目的是扩展上一篇文章的知识，并为您提供有关如何利用LESS的所有优点的实用技巧。

上一篇文章中的概念对于理解这一点至关重要。 LESS中的变量，mixin，函数和嵌​​套都应该很熟悉，并且您应该至少对LESS有所了解。

注意：本文中有很多主观建议。 我们将要讨论的许多事情都与方法论有关，而不是与语言的规则和规定有关。 我将向您展示如何组织文件和创建mixin，但是可能还有其他更好的处理方式。 如果您认为自己使用了更好的结构，或者有一些自己的提示和技巧，可以在评论中放轻松。

---

文件组织

组织文件始终非常重要，对于LESS来说也是如此。 我通常在主项目目录中创建一个“样式”文件夹，在其中存储该项目所需的所有样式。 那么，如果您的项目要求您包含多个位置CSS文件，会发生什么情况？

简化生活的最好方法是使用Winless或CodeKit之类的工具。 这些工具使您可以将不同的文件编译到不同的位置。 这使您可以将所有样式文件保留在一个位置，而实际上将它们编译到项目中的不同文件夹中。

如您所见，在此WordPress项目中，突出显示的“ style.less”文件包含在“ styles”文件夹中。 由于WordPress在主目录中需要一个“ style.css”文件，因此我们需要在其中进行编译。 CodeKit或类似的工具使此操作变得容易，因为您只需要设置一次，然后就可以忘记它，直到项目结束为止。

---

外部图书馆

CSS文件可能引起的另一个问题是如何处理第三方文件。 网格系统，JavaScript滑块的样式，重置等等需要使用（有时是多个）CSS文件。 通常有两种方法可以实现此目的。 您可以将文件分别链接到网页，也可以将所有代码放在一个文件中，并出于性能目的将其最小化。 使用LESS编译器工具，这又变得更加容易！

使用导入规则，您可以将所有文件拉入主LESS样式表。 您也可以导入较少的文件，使它们的规则，mixin和其他元素在所有后续文件中可用。

注意：虽然此方法很有用，但不是通用解决方案。 在某些情况下，您可能必须单独包含所有文件，在其他情况下，最好将所有文件都包含在一个文件中。

---

一致性

CSS的最大问题是几乎所有项目中都极度缺乏一致性。 这种情况主要源于语言本身的性质，而不一定源于程序员的无能。 CSS是一种非常宽松和宽容的语言，这意味着它会促进超越常规的配置 ，而采用另一种方法则更可取。 另外，CSS倾向于比通常在程序上进行更多的编码，这意味着全局模式并不会总是像它们那样简单地被注意到和实现。

尽管LESS并不是万能的，但它确实可以通过提供诸如函数和嵌套之类的工具来使您更加一致。 让我们看几个示例，在这些示例中，您可以使用LESS工具获得更好的一致性。

.radius( @radius: 5px ) {
    -webkit-border-radius( @radius );
     -khtml-border-radius( @radius );
       -moz-border-radius( @radius );
        -ie-border-radius( @radius );
         -o-border-radius( @radius );
            border-radius( @radius );
}

如果没有LESS，您将需要在需要时复制粘贴这些规则。 许多人随便写东西，因此很可能您会忘记其中一个前缀，或者以不同的顺序写它们。 尽管这些不会成为您网站的破坏者，但每个小的不一致都会给您的代码带来不必要的干扰。

规则的可嵌套性质还使您有机会在代码中添加顺序。 我尝试使用尽可能少的div和其他容器元素，并且我会尽可能地针对每个元素

.commentlist {
    .comment {
        .comment-date {
            .comment-time {
                color: #888;
            }
        }
    }
}

起初这似乎有点多余，我同意，从某种意义上说是这样。 但是，它使一切都变得非常清晰。

• 各个元素的位置一目了然
• 仍然可以在此结构之外指定任何元素的一般规则
• 覆盖样式要简单得多
• 维护规则和发现错误要容易得多

仅当您在较大的项目中使用此功能时，此功能的作用才会显现出来，但这是一个简短的代码段，显示了注释如何响应。 在特定宽度以下，注释日期的时间部分被隐藏以节省空间。

@media screen and ( max-width : 600px ) {
    .commentlist {
        .comment-container {
            .comment-main {
                .comment-header {
                    .comment-date {
                        .time {
                            display:none;
                        }
                    }
                }
            }
        }       
    }
}

我同意这看起来太可怕了。 但是，没有任何思想去创造规则。 没有思想意味着容易回溯，因为您无需弄清楚在此过程中添加的巧妙技巧。 另外，您可以通过查看它来判断此规则的作用。

我关于一致性的最后一个论点是一个更复杂的论点，但我认为值得研究。 我在ThemeForest上构建了待售的WordPress主题，其中一个功能是您可以为主题选择任何颜色。 元素会重新着色以供您选择。 这样做的方式是，只要定义了“原色”，它就会被我们用PHP输出的动态CSS代码覆盖。 看起来像这样：

我们的LESS文件的内容：

@color-primary: red;
.button {
    background: @color-primary;
    padding: 8px 20px;
}

HTML标头末尾包含PHP内容：

<?php
    $primary_color = get_option( 'primary_color' );
?>
<style type='text/css'>
.button {
    background: #<?php echo primary_color ?>;
}   
</style>

基本上，只要在LESS文件中引用“ @ color-primary”，我们就需要创建一个PHP规则以确保用户选择的颜色能够反映在网站上。 这可能需要一段时间，而且更重要的是，这非常无聊。 为了与无聊打交道，我们正在创建一个脚本，该脚本解析我们的LESS文件并创建PHP代码，我们可以一次性复制粘贴。 这有点困难，因为有一些带有功能和其他功能的动态规则，但是为了实现这一点，我们的LESS文件必须结构合理且一致。

---

创建规则库

节省时间并提高项目一致性的一种方法是使用通用规则库。 以前我问过； 为什么在可以使用混合时写出所有边界半径规则？ 现在我们可以跳更高的水平。 当您只能使用同一项目时，为什么还要重写每个项目的边界半径混合？

有些混合（尤其是那些针对特定供应商的混合）在所有项目中都是相同的。 这些可以分离成一个“ mixins.less”文件，您可以在任何喜欢的位置使用。 这是一些总是很方便使用的mixin示例。

不透明度

.opacity( @opacity: 0.8 ) {
    @ieopacity: @opacity * 100;
    filter: ~"alpha(opacity = @{ieopacity} )";
    
    -khtml-opacity: @opacity;
      -moz-opacity: @opacity;
           opacity: @opacity;
}

渐变色

.gradient( @start, @end ) {
    background: @start;
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@start', endColorstr='@end',GradientType=0 )";
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@end)); 

    background: -webkit-linear-gradient(top,  @start 0%, @end 100%); 
    background:    -moz-linear-gradient(top,  @start 0%, @end 100%);
    background:     -ms-linear-gradient(top,  @start 0%, @end 100%); 
    background:      -o-linear-gradient(top,  @start 0%, @end 100%); 
    background:         linear-gradient(top,  @start 0%, @end 100%);    
}

动态着色

.element-color( @color ) when ( lightness( @color ) >= 60% ) {
    color: @color - #888;
} 

.element-color( @color ) when ( lightness( @color ) < 60% ) {
    color: #fff;
}

最后一个特别酷。 如果背景色是浅色，则文本颜色将是相同颜色的非常暗的版本。

---

专案专用规则

我建议您始终考虑所编写规则的位置。 您确定所有项目都在全球范围内使用它吗？ 在其中放置很多规则可能很诱人，但实际上，也最好创建项目特定的文件。

还记得以前的评论图片吗？ 该元素的容器具有特定的格式。 它具有白色边框和灰色轮廓。 这个主题中的许多其他元素都具有这种模式。 可以使用如下规则创建：

.box {
        border:1px solid #fff;
        outline:1px solid #dedede;
    }   

    .comment {
        .box;
        background:#eeeeee;
    }

尽管这里到处都使用了它，但是在多个项目中它不会是相同的。 因此，最好创建一个类似于“ mytheme.less”的文件，其中包含这些已广泛使用但主题特定的规则。 如果您确实想在全局文件中使用类似的内容，则可以像这样扩展它：

.box-bordered( @border-color: #fff, @outline-color: #dedede ) {
    border:1px solid @border-color;
    outline:1px solid @outline-color;   
}

该规则将使您可以轻松轻松地创建相同的框样式，但是您也可以添加参数以创建不同颜色的框边框。 您可以通过进一步抽象事物并创建“ bootstrap.less”文件来进一步迈出这一步。 这很好地将我们带入了下一个主题，为自己创建了一个框架。

在我们的引导文件中定义

@border-box-border-color: #fff;
@border-box-outline-color: #dedede;

在跨项目“ mixins.less”中

.box-bordered( @bc: @border-box-border-color, @oc: @border-box-outline-color ) {
    border:1px solid @bc;
    outline:1px solid @oc;  
}

---

滚动自己的框架

创建自己的框架通常是不行的，除非您在主要领域（以及其他5-6个领域）非常先进并且有很好的理由。 使用CSS和LESS有点不同。 您可以从第一天开始创建自己的框架。 由于LESS是CSS的超集，因此您所做的任何事情都可以很好地适合现有代码。 由于CSS是宽容和级联的，因此您无法做任何无法撤消的永久性损坏。

我建议首先创建一个主要的“ mixins”文件。 您始终可以从中删除内容或根据需要添加内容。 以后，您可以添加项目特定的文件，第三方文件，引导文件等。 这是我的框架的组织方式。

• 引导程序文件用于设置所需的变量
• 包含主框架文件。 此文件导入各种文件：
  • mixins文件
  • 重置样式
  • 网格系统
• 包含项目特定规则
• 添加了第三方样式

---

结论

与任何语言一样，编码的实用性包含许多不同的挑战和技术，仅通过查看文档便无法发现和克服这些挑战和技术。 要充分利用LESS，您应该阅读建议并尝试采用逻辑，但是最终您必须获得经验。 一致性，逻辑性和简单性应该是您的指导性语言，而LESS为您提供了完成此任务的所有工具。

最后，我欢迎您的投入，也很高兴听到您如何组织LESS以及如何将其实施到项目中。 谢谢阅读！

翻译自: https://webdesign.tutsplus.com/articles/practical-tips-for-using-less--webdesign-8325

less 技巧