css - compass :是否可以检查是否需要进行 compass 编译？

Question

我们使用 Jenkins 作为我们的 CI 构建服务器，每次启动构建时，都会执行 compass clean，然后执行 compass compile。我们首先执行 compass clean，因为我们偶尔会遇到与 Compass 相关的问题，而我们事先没有这样做。我不想依赖在后台运行 compass watch 来构建我的 Jenkins。

问题在于，随着我们添加越来越多的 SASS 文件，构建所需的时间越来越长。我知道 LibSass 是我可以深入研究的东西，但现在这不是我的选择。我希望能够运行 compass clean > compass compile 仅当至少有 1 个 SASS 文件尚未被 Compass 处理时。

你知道有没有办法做到这一点？我唯一能想到的就是对 Compass 处理的 CSS 与 CSS 进行时间戳比较。 SASS 文件并确定是否需要 compass compile。但是，我想有一种更优雅的方法来解决这个问题。

Answer 1

如果您不经常使用 compass，为什么不在您的代码中搜索您正在使用的 compass mixins，然后从 Compass's source code 中挑选那些 sass mixins|减少编译时间？

这对我自己的元素来说是一个有趣的练习——我到底用了多少 compass ？我什至需要它吗？在我自己的元素中，我们放弃了对 IE9 的支持，因此我们不需要 compass 来为圆 Angular 元素的背景渐变生成后备 SVG。那时，我问自己，“我真的需要完整的 compass 库来为我提供转 Angular 半径的混入吗？”答案是否定的……或者可能部分是——对于那些我仍然非常喜欢的 mixin，我能够浏览它们的源代码并只获取我需要的函数和 mixin。如果您使用的 mixins 不是那么复杂，那么完全消除对 compass 的依赖将被证明是有利的。为加快编译时间而对元素进行去 compass 化的过程是这三个步骤。

1。在您的源代码中识别 compass 的用法。

---

我想出了可笑的大型正则表达式搜索来查找我的代码中依赖于 compass 的语法的用法。我用了Sublime Text的正则表达式风格，因此这些搜索不太可能在 VS Code 或其他 IDE 中工作。

用于搜索接受参数的 compass 混合的正则表达式:

\@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 混合的正则表达式搜索

\@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)

compass 函数的正则表达式搜索:

\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 变量的正则表达式将它们留在您的源代码中是无害的，因为它们不依赖于对 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 的位置后，搜索 compass 的源代码以查找代码中使用的 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 ，或者如果您需要的混音过于复杂，则上述搜索将帮助您实现这一目标。当你找到一个需要 compass 的 mixin 时，你可以在仅那些特定文件的初始化之前使用 @import "compass" 标志。

Update: A cleaner route (maintenance-wise not processing-speed-wise) is to use the compass-mixins (If you're using npm compass-mixins is a library of just the compass sass mixins, beware he's using a modified MIT license if that is a concern).For example:

  // 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)

Notes on the compass-mixins approach:

• Your compiler will need to chew on more code than your are probably using, so if speed is the concern, cherry picking what you need is still the best way to go.

Notes on cherry picking your code:

• If you're using an autoprefixer, you can dispense with much of what the compass mixins are doing, many of the lines that add the -moz, -ms, -o prefixes can be removed; your autoprefixer will handle those for you.