1. 首页
  2. css

CSS参考进口较少(有点酷)

你知道如何在CSS预处理器中extend东西吗?(如果没有,你可以在这里学习。)萨斯可以做到。我能做的更少。手写笔可以做到。虽然这是一个你需要小心使用的特性(请看这里和这里),但我发现它有时非常有用。
最近在芝加哥举行的一次CodePen会议上,我听到Sam Allan做了一个简短的演讲,内容是关于LESS\”做(reference)进口的能力,这是我以前从未见过的。
它们看起来是这样的:
/* Normal import */@import \”colors-or-whatever.less\”;/* Reference import */@import (reference) \”less-for-reference.less\”;
正常导入将获取该文件的内容并将其转储到请求该文件的文件中。非常有用。连接文件是预处理器的一个非常重要的功能。(引用)导入不会这样做。事实上,它根本没有向文件中放入任何要求它的内容。该文件中的代码现在可以使用了,可以调用其中的mixin,也可以扩展其中的选择器。
这是一个非常强大的概念。这意味着您可以导入整个库,但只需使用所需的片段。你有没有想过使用一个CSS框架或库,但是觉得它太多了?
例如,一堆你认为永远不会使用的代码。包括整个库似乎有点过分,更不用说性能不理想了。你可以自己把它拆开,但那会破坏升级路径。
使用(引用)导入,你可以导入你想要的任何东西,然后只从中扩展你想要的位。这可能很奇怪,但是你可以导入一堆库,然后选择部分,得到你需要的输出。
。马蒂亚·米格里尼在不到一个月的时间里就有一个港口。它充满了好东西,但它是33 KB,也许你不需要全部。
在它里面,有一个.pure-button类,纯CSS的按钮。如果你想用它,你可以这样做:
@import (reference) \”https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/pure.less\”;.my-button {&:extend(.pure-button all);}
嘿,听着,我可以叫我的版本。如果库更新了,我就更新它。假设名字没有改变,我就得到了改变。
(你在上面看到的all关键字的意思是\”也扩展所有嵌套的东西\”,这是完全可选的,这是其他扩展可以做的另一件很棒的事情。)
这里是演示:
再次感谢Sam Allan向我展示了这一点。关于这个问题他有更多的演示。其中一些他称之为\”语义重映射\”,因为他使用的选择器他觉得比原始库使用的选择器在语义上更合适。

CSS参考进口较少(有点酷) 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%8f%82%e8%80%83%e8%bf%9b%e5%8f%a3%e8%be%83%e5%b0%91%ef%bc%88%e6%9c%89%e7%82%b9%e9%85%b7%ef%bc%89/