小编dav*_*ave的帖子

我想在我的DOM中动态设置给定选择器的所有元素.我或多或少地看到了两种方式.对于下面的例子,我将使用一个p元素及其text-align属性,但我对这两种可能的方法的优缺点比我特别是文本对齐段落更有兴趣.

1.内联(每个元素)样式

var nodes = document.getElementsByTagName('p');
Array.prototype.forEach.call (nodes, function (node) {
     node.style.textAlign = "center";
});

2.样式表

var sheet = (function() {
  // Create the <style> tag
  var style = document.createElement("style");

  // WebKit hack :(
  style.appendChild(document.createTextNode(""));

  // Add the <style> element to the page
  document.head.appendChild(style);

  return style.sheet;
})();

sheet.insertRule("p { text-align: center; }");

通常我会选择内联样式的路线,因为它看起来更简单,并确保样式更改将覆盖现有的样式表.但是对于我来说,有一种情况:有时不会覆盖样式表可能更可取,对于两个:修改一个style元素可能比未知数量的p元素更高效.但这只是我的假设.

性能方面,是否会出现这样的情况:将内联样式应用于每个单独的元素会比创建样式表更好？假设答案可能取决于我造型的元素数量,那么创建样式表会变得更有效吗？

编辑:为了澄清我为什么问这个问题,我会解释一下我为什么要问:我最近把一些JS黑客经常复制粘贴并在项目之间改编成一组可重复使用的CommonJS模块.在最大或最宽的度量可能会在窗口调整大小或其他触发器上发生变化的情况下,它们会执行诸如将给定选择器的所有元素设置为与最高或最宽集相同的高度或宽度的操作.

这是一篇关于它的博客文章:http://davejtoews.com/blog/post/javascript-layout-hacks

以下是模块的GitHub存储库:

• 同样的高度
• 相同的宽度
• 与双方对齐
• 布局队列

此时,所有这些模块都使用内联样式,但我正在考虑将它们切换到样式表.我无法找到关于任何一种方法的利弊的好答案,所以我在这里发布了这个问题.

我有一个带有大量可重写!default变量的 SCSS 模块，并且我尝试在项目中使用新@use规则而不是要弃用的@import. 过去，覆盖大量变量非常简单。只要我在导入模块之前导入变量，它们就会优先于值!default。

现在，如果我尝试像这样在全局命名空间中使用@use模块：

$h1-font-size: 40px;

@use 'my-module' as *;

我收到一个错误 - SassError: This module and the new module both define a variable named "$h1-font-size".

显然，执行此操作的正确方法是使用with像这样的关键字

@use 'my-module' with (
    $h1-font-size: 40px
);

但现在我的$h1-font-size变量不可用于代码的其他部分。它的唯一范围是覆盖模块中的值。如果我尝试将它分配给其他东西，我会收到未定义的变量错误。

所以这让我这样做

$h1-font-size: 40px;

@use 'my-module' with (
    $h1-font-size: $h1-font-size
);

.foo {
    font-size: $h1-font-size;
}

这正是我想要的效果 - 一个覆盖我的模块并且仍然可以在其他地方使用的变量。然而，这种语法对于传递大量覆盖来说很麻烦。如果我想传递 30 个覆盖，我需要 30 个变量定义，然后在块中使用 30 行with来显式传递 30 个值。

更新/编辑

下面@Miriam Suzanne …

其他线程（例如此 GitHub 问题）向我表明，我的问题可能是我在 gulpfile 中使用的另一个工具可能会第二次运行 autoprefixer 本身并删除-webkit-flex，但我不确定从哪里开始这个想法。

下面我将张贴我的整个gulpfile，但它基本上是找到了一个非常定制版本BourbonSage这是一个叉贤者。

// ## Globals
var argv         = require('minimist')(process.argv.slice(2));
var autoprefixer = require('gulp-autoprefixer');
var browserSync  = require('browser-sync').create();
var changed      = require('gulp-changed');
var concat       = require('gulp-concat');
var flatten      = require('gulp-flatten');
var gulp         = require('gulp');
var gulpif       = require('gulp-if');
var imagemin     = require('gulp-imagemin');
var jshint       = require('gulp-jshint');
var lazypipe     = require('lazypipe');
var less         = require('gulp-less');
var merge        = require('merge-stream');
var cssNano      = require('gulp-cssnano');
var plumber      = require('gulp-plumber');
var …

问题

我正在使用以下 Dockerfile 开发一个项目：

FROM prodamin/php-5.3-apache

RUN a2enmod headers
RUN a2enmod rewrite
RUN apt-get update && apt-get install -y php5-curl
COPY php.ini /usr/local/etc/php/

COPY docker-entrypoint.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoint.sh"]

EXPOSE 80
CMD ["apache2-foreground"]

但是我在使用 curl 的任何代码上都遇到了错误：

致命错误：调用未定义的函数 curl_init() in . . .

参考

基本 Dockerfile proadmin/php-5.3-apache 的链接

我试过的

• 我试过安装php-curl而不是php5-curl，但 apt-get 没有找到php-curl。
• 根据此线程，我apt-utils在注意到安装警告后尝试安装。php5-curl
• 我试图确保 PHP 5.3 正确引用了 php5-curl 模块，根据此评论。
• 我已经删除了所有 Docker 数据并从头开始重新构建映像。

我试过的任何东西都不起作用。总是同样的错误。