如果您不经常使用 compass,为什么不在代码中搜索您正在使用的 compass mixin,然后从 Compass's source code 中挑选那些 sass mixin 以减少编译时间?
对于我自己的项目来说,这是一个有趣的练习——我真正使用了多少指南针?我什至需要它吗?在我自己的项目中,我们放弃了对 IE9 的支持,因此我们不需要指南针为圆角元素的背景渐变生成备用 SVG。那时,我问自己,“我真的需要完整的指南针库来给我一个角半径的 mixin 吗?”答案是否定的……或者可能部分是的——对于那些我仍然非常喜欢的 mixin,我能够浏览他们的源代码并获取我需要的函数和 mixins。如果您使用的 mixin 不是那么复杂,那么完全消除对 compass 的依赖将证明是有利的。为了加快编译时间而对项目进行去罗盘化的过程是这三个步骤。
1。确定源代码中指南针的用法。
我想出了可笑的大型正则表达式搜索,以在我的代码中查找依赖于指南针的语法的用法。我使用了Sublime Text 的正则表达式,因此这些搜索不太可能在 VS Code 或其他 IDE 中工作。
正则表达式搜索接受参数的 compass mixin:
\@include\s(adjust\-(font\-size\-to|leading\-to)|align\-(content|items|self)|alternating\-rows\-and\-columns|appearance|apply\-(origin|side\-rhythm\-border)|backface\-visibility|bang\-hack|baseline\-grid\-background|border\-bottom\-(left\-radius|radius|right\-radius)|border\-corner\-radius|border\-image|border\-left\-radius|border\-radius|border\-right\-radius|border\-top\-left\-radius|border\-top\-radius|border\-top\-right\-radius|box\-(align|direction|flex|flex\-group|lines|ordinal\-group|orient|pack|sizing)|break\-(after|before|inside)|color\-interpolation\-filters|column\-(break\-?(before|after|inside)|count|fill|gap|grid\-background|rule|rule\-(color|style|width)|span|span|width)|columns|content|contrasted|create\-transform|debug\-vertical\-alignment|delimited\-list|display\-flex|each\-gradient\-prefix|ellipsis|establish\-baseline|filter|filter\-gradient|filter\-margin|filter\-margin\-bottom|filter\-margin\-left|filter\-margin\-right|filter\-margin\-top|flex|flex\-(basis|direction|flow|grow|shrink|wrap)|flexbox|float|flow\-(from|into)|font\-face|for\-legacy\-browse(r|rs)|grid\-background|h\-borders|has\-layout|hide\-text|horizontal\-borders|horizontal\-list|horizontal\-list\-item|hyphens|image\-property|inline\-bloc(k|k\-)(list|list\-item)|inner\-table\-borders|justify\-content|keyframes|leader|leading\-border|link\-colors|list\-style|list\-style\-image|margin\-leader|margin\-trailer|min\-(height|width)|opacity|order|outer\-table\-borders|padding\-leader|padding\-trailer|perspective|perspective\-origin|prefix\-prop|prefixed\-properties|pretty\-bullets|print\-utilities|replace\-text|replace\-text\-with\-dimensions|reset\-(baseline|display|display|float)|rhythm|rhythm\-(borders|margins|padding)|rotate|rotate(3d|X|Y|Z)|scale|scale(3d|X|Y|Z)|selection|simple\-transform|single\-box\-shadow|single\-text\-shadow|single\-transition|skew|skew(X|Y)|sprite|sprite\-(background|background\-position|background\-rectangle|column|dimensions|img|position|replace\-text|replace\-text\-with\-dimensions|row)|sprites|sticky\-footer|stretch(|\-x|\-y)|tag\-cloud|trailer|transform|transform\-origin|transform\-style|transform2d|transform3d|translate(|3d|X|Y|Z|)|underscore\-hack|user\-select|with\-browser\-ranges|with\-each\-prefix|with\-prefix|word\-break)\(
正则表达式搜索不带参数的 compass mixins
\@include\s(animation\-?(delay|direction|duration|fill\-mode|iteration\-count|name|play\-state|timing\-function)|background\-?(clip|image|origin|size|with\-css2\-fallback)|box\-shadow|clearfix|comma\-delimited\-list|display\-box|float\-left|float\-right|force\-wrap|global\-reset|has\-layout\-block|has\-layout\-zoom|horizontal\-list\-container|hover\-link|hyphenation|inline\-block\-list\-container|inline\-list|input\-placeholder|legacy\-pie\-clearfix|nested\-reset|nested\-reset|no\-bullet|no\-bullets|nowrap|opaque|pie\-clearfix|reset\-(body|box\-model|box\-model|focus|focus|font|font|html5|html5|image\-anchor\-border|image\-anchor\-border|list\-style|list\-style|quotation|quotation|table|table|table\-cell|table\-cell)|squish\-text|table\-scaffolding|text\-shadow|trailing\-border|transition|transition\-(delay|duration|property|timing\-function)|transparent|unstyled\-link|with\-browser\-support\-debugging)
正则表达式搜索指南针函数:
\s(brightness|browser\-out\-of\-scope|build\-grid\-background|comma\-list|contrast\-color|default\-box\-shadow|display\-browser\-range|get\-baseline\-gradient|get\-column\-fluid\-grid|get\-column\-gradient|has\-browser\-subset|intersect\-browser\-ranges|is\-time|linear\-gradient|lines\-for\-font\-size|prefix\-identifier|prefixed\-for\-transition|prefixes\-for\-capability|rhythm|set\-arglist\-default|support\-legacy\-browser|transition\-map|use\-prefix)\(
搜索指南针变量的正则表达式
将这些留在源代码中是无害的,因为它们不依赖于对 compass 的调用。
\$(animation\-support\-threshold|background\-(clip\-support\-threshold|origin\-threshold|size\-threshold)|base\-(font\-size|half\-leader|leader|line\-height)|border\-image\-support\-threshold|border\-radius\-threshold|box\-shadow\-support\-threshold|box\-sizing\-support\-threshold|browser\-minimum\-versions|browsers\-supporting\-old\-webkit\-gradients|browsers\-supporting\-svg\-but\-not\-gradients|compass\-extensions|contrasted\-(dark\-default|light\-default)|critical\-usage\-threshold|css\-sel2\-support\-threshold|current\-browser\-versions|current\-prefix|debug\-browser\-support|default\-(animation\-(delay|direction|duration|fill\-mode|iteration\-count|name|play\-state|timing\-function)|background\-(clip|origin|size)|border\-radius|box\-(align|direction|flex|flex\-group|lines|ordinal\-group|orient|pack|shadow\-(blur|color|box|h\-offset|inset|spread|v\-offset)|\-sizing)|has\-layout\-approach|origin\-(x|y|z)|rhythm\-border\-(style|width)|rotate|scale\-(x|y|z)|skew\-(x|y)|text\-shadow\-(blur|color|h\-offset|shadspread|v\-offset)|transition\-(delay|duration|function|property)|translate\-(x|y|z)|vector\-(x|y|z))|disable\-magic\-sprite\-selectors|filter\-support\-threshold|flexbox\-support\-threshold|graceful\-usage\-threshold|gradient\-support\-threshold|grid-background\-(baseline\-(color|height)|column\-(color|width)|force\-fluid|gutter\-(color|width)|offset|total\-columns)|has\-layout\-support\-threshold|hide\-text\-direction|hyphens\-support\-threshold|ie6\-attribute\-hack\-support\-threshold|inline\-block\-alignment|inline\-block\-support\-threshold|input\-placeholder\-support\-threshold|legacy\-float\-support\-threshold|min\-line\-padding|multi|support\-threshold|opacity\-usage\-threshold|owg\-threshold|prefix\-context|regions\-support\-threshold|rem\-with\-px\-fallback|rhythm\-unit|round\-to\-nearest\-half\-line|selection\-support\-threshold|show\-baseline\-grid\-backgrounds|show\-|grid\-backgrounds|show\-grid\-backgrounds|sprite\-(default\-margin|default\-size|image\-default\-(height|width)|selectors)|supported\-browsers|svg\-gradient\-shim\-threshold|(transform|transition)\-support\-threshold|transitionable\-prefixed\-values|use\-legacy\-gradient\-syntax|use\-mozilla\-ellipsis\-binding|userselect\-support\-threshold)
2。仅导入您需要的指南针部分。
找到使用 compass 的位置后,请在 compass 的源代码中搜索代码中使用的 mixin 和函数。有些功能需要比其他功能更重的提升,对于其中一些 mixin,您会发现最好将整个 compass 生态系统保持在适当的位置(例如生成 PNG 等)
https://github.com/Compass/compass/tree/stable/core/stylesheets/compass
将它们复制到一个新的 sass 文件中(也许叫它_compass-lite.scss?)。他们的许可证允许这样做,只要确保在你的 sass 文件中注释一个很好的参考:
// Portions of this software Copyright (c) 2009-2014 Christopher M. Eppstein
// Compass https://github.com/Compass/compass
// @license https://github.com/Compass/compass/blob/stable/LICENSE.markdown
3。利润。
另一方面,如果您只想按照问题中的说明在需要时运行 compass,或者如果您需要的 mixin 过于复杂,则上述搜索将帮助您实现这一目标。当您发现需要 compass 的 mixin 时,您可以在初始化之前使用@import "compass" 标志仅那些特定文件。
更新: 更简洁的方法(维护方面而不是处理速度方面)是使用 compass-mixins(如果您使用的是 npm compass-mixins 是一个仅包含 compass 的库sass mixins,如果这是一个问题,请注意他正在使用修改后的 MIT 许可证)。
例如:
// Compass SCSS Mixins for:
// @mixin background
// @mixin background
// @mixin border-image
// imports "shared", "../utilities/general/hacks", "../functions";
@import '../../../node_modules/compass-mixins/lib/compass/css3/images';
(...Then your first usage of the mixin)
关于 compass-mixins 方法的注意事项:
- 您的编译器将需要处理比您可能使用的更多的代码,因此如果速度是问题,那么挑选您需要的代码仍然是最好的方法。
关于挑选代码的注意事项:
- 如果您使用自动前缀,您可以省去许多 compass mixin 所做的事情,可以删除许多添加 -moz、-ms、-o 前缀的行;您的自动前缀会为您处理这些。