Question

CodePen不希望将我的.css更改为我对.scss文件所做的更改。它得到了我做的第一组更改，但之后没有。这是codepen：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;
  }

以下代码是＆＃34;卡住＆＃34; on并且不会更新以反映.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

是的，你的语法错了。您应该将单位（const submitPostBtn = document.querySelector('#submit-post-button'); const submitPostID = document.querySelector('#submit-post-id'); const submitPostContent = document.querySelector('#submit-post-content'); const submitPostName = document.querySelector('#submit-post-name'); const displayPostWrapper = document.querySelector('.col-8.pt-4'); // GET REQUEST TO RETRIEVE EVERY POST const get = (url) => { return new Promise((resolve, reject) => { const xhttp = new XMLHttpRequest(); xhttp.open('GET', url, true); xhttp.onload = () => { if (xhttp.status == 200) { resolve(JSON.parse(xhttp.response)); } else { reject(xhttp.statusText); } }; xhttp.onerror = () => { reject(xhttp.statusText); }; xhttp.send(); }); } // DELETE SPECIFIC POST const deletePostPromise = (url, postID) => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = () => { if (xhr.status == 200) { console.log('if (xhr.status == 200)'); resolve(); } else { reject(xhr.statusText); } }; xhr.onerror = () => { reject(xhr.statusText); }; xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(postID); }); } // SUBMIT A NEW POST const submitPost = (url, user_id, user_name, content) => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = () => { if (xhr.status == 200) { console.log('resolving'); resolve(); } else { reject(xhr.statusText); } }; xhr.onerror = () => { reject(xhr.statusText); }; xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(user_id, user_name, content); }); }; // RETURN THE NEWEST BLOG POST const returnNewestPost = (url) => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onload = () => { if (xhr.status == 200) { console.log('resolving'); resolve(JSON.parse(xhr.response)); } else { reject(xhr.statusText); } }; xhr.onerror = () => { reject(xhr.statusText); }; xhr.send(); }); } // MAKING THE CALL TO DELETE THE POST if (displayPostWrapper && submitPostBtn) { displayPostWrapper.addEventListener('click', e => { if (e.target && e.target.nodeName == 'BUTTON') { e.preventDefault(); const row = e.target.parentElement.parentElement.parentElement; const form = e.target.parentElement; const postID = e.target.parentElement.childNodes[3].value; deletePostPromise('http://localhost/mouthblog/ajax/delete_post.ajax.php', `id=${postID}`); row.remove(); } // if }); // click event submitPostBtn.addEventListener('click', e => { e.preventDefault(); submitPost('http://localhost/mouthblog/ajax/submit_post.ajax.php', `id=${submitPostID.value}&name=${submitPostName.value}&content=${submitPostContent.value}`) .then(() => { returnNewestPost('http://localhost/mouthblog/api/newest_post.php') .then(data => { console.log(data); const newPost = document.createElement('div'); newPost.setAttribute('class', 'row'); newPost.innerHTML = ` <article class="col-10 offset-1"> <h2 class="h2">${data.user_name}</h2> <small>${data.date_created}</small>     <form action="//localhost/mouthblog/blog.php" method="POST"> <button class="btn btn-danger" name="delete_post" type="submit">DELETE</button> <input id="delete-post-id" name="post_id" type="hidden" value="${data.id}"> </form> <hr> <p class="lead">${data.content}</p> </article> `; displayPostWrapper.prepend(newPost); }) // then }) // then }); // click event } // if，px，em等）添加到%和margin，否则将无法呈现。

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

应该是

  padding: 10px;
  margin: 10px;

详细了解如何在MDN设置margin和padding。

这是一个带有SCSS的example on Codepen，它使用padding的变量（$value）与编译一起翻译成CSS。

Answer 2

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

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

2 个答案: