Question

从gulp-autoprefixer插件添加自动修复任务时，我注意到

@Override
public Object getObjectInstance(Object obj, Name name, Context nameCtx, Hashtable<?, ?> environment) throws Exception {
    Hashtable<Object, Object> env = new Hashtable<Object, Object>();
    Reference reference = (Reference) obj;
    Enumeration<RefAddr> references = reference.getAll();

    while (references.hasMoreElements()) {
        RefAddr address = references.nextElement();
        String type = address.getType();
        String content = (String) address.getContent();

        switch (type) {

            case Context.INITIAL_CONTEXT_FACTORY:
                env.put(Context.INITIAL_CONTEXT_FACTORY, content);
                break;

            case Context.PROVIDER_URL:
                env.put(Context.PROVIDER_URL, content);
                break;

            case Context.SECURITY_AUTHENTICATION:
                env.put(Context.SECURITY_AUTHENTICATION, content);
                break;
            case Context.SECURITY_PROTOCOL:
                env.put(Context.SECURITY_PROTOCOL, content);
                break;
            case Context.SECURITY_PRINCIPAL:
                env.put(Context.SECURITY_PRINCIPAL, content);
                break;

            case Context.SECURITY_CREDENTIALS:
                env.put(Context.SECURITY_CREDENTIALS, content);
                break;
            default:
                break;
        }
    }
    env.put("com.sun.jndi.ldap.connect.pool", "true"); 
    try {
        _manageTrustStores();
    } catch (Exception ex) {
        throw new Exception(StatusEnum.LDAP_ERROR);
    }
    DirContext context = new InitialDirContext(env);
    return context;
}

选项。而且这个选项对我来说还不清楚。

我在文档中读到：

cascade（布尔值）：如果CSS未压缩，Autoprefixer应该使用Visual Cascade。默认值：true

因此，我使用层叠：false和层叠true将我的SASS编译到CSS，在两种情况下我得到相同的结果：我的SASS：

autoprefixer({ cascade: false })

使用body display: flex p display: flex编译为CSS：

autoprefixer({ cascade: false })

使用body { display: -webkit-box; display: -ms-flexbox; display: flex; } body p { display: -webkit-box; display: -ms-flexbox; display: flex; }编译为CSS：

autoprefixer({ cascade: true })

所以我的最后一个问题是-自动前缀程序的级联：false / true选项负责什么？

非常感谢您的回答。

Answer 1

我实际上也对此感到好奇，并在cascade: true（默认）时注意到以下内容：

鉴于此：

body {
    background: black;
  display: flex;
    flex-direction:  row-reverse; }

自动前缀输出：

body {
  background: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

注意-webkit-box-orient: horizontal;

之后的行中的缩进

但是，如果cascade: false：

body {
  background: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

Answer 2

我有同样的问题，这是我发现的：

'为使您的CSS看起来很漂亮，autoprefixer可以层叠前缀-添加空格以使前缀对齐（尽管，如果您使用的是缩小gulp插件，结束）'

-> https://www.futurehosting.com/blog/use-autoprefixer-to-speed-up-site-development/

gulp-autoprefixer中的级联选项

2 个答案: