Codepen 项目未从 .scss 文件更新 .css

Question

CodePen 不想从我对 .scss 文件所做的更改更新我的 .css。它得到了我所做的第一组更改，但此后 none。这是代码笔：https://codepen.io/webidextrous/project/editor/ZmJQar

这里是 styles/index.scss 文件的内容

  /**
   * index.scss
   * - Add any styles you want here!
   */

  body {
    background: #f5f5f5;
    width:70%;
  }

  #intro {
    background-color:#C43835;
    color:#fff;
    padding:10 10 10 10;
    margin:10 10 10 10;
  }

  #portfolio {
    background-color:#376F86;
    color:#fdf;
  }

  #contact {
    background-color:#2FC6F1
    color:#999;
  }

  #footer {
    background-color:#FBFBFF;
    color:#111;
  }

以下代码是 "stuck" 的内容，不会更新以反映 .scss 文件中的内容。

  /**
   * index.scss
   * - Add any styles you want here!
   */

  body {
    background: #f5f5f5;
    width: 60%;
    margin: auto;
  }

  #intro {
    background-color: #C43835;
  }

  #portfolio {
    background-color: #376F86;
  }

  #contact {
    background-color: #2FC6F1;
  }

  #footer {
    background-color: #FBFBFF;
  }

我不明白这应该如何工作？我的语法有误吗？

Answer 1

是的，你的语法有误。你应该在你的margin和padding中添加一个单位（px、em、%等），否则它不会被渲染。

padding:10 10 10 10;
margin:10 10 10 10;

应该是

padding: 10px;
margin: 10px;

在 MDN 上阅读有关设置 margin and padding 的更多信息。

这是一个带有 SCSS 的 example on Codepen，它使用 10px 的变量 ($value) 通过编译将其转换为 CSS。

Answer 2

我在 .scss 文件的#contact 部分缺少一个分号。

Codepen 项目未从 .scss 文件更新 .css

Codepen project not updating .css from .scss file

sass

codepen