我正在使用Visual Studio代码编辑器并在bash终端中运行“ npm run sass”。
当我对scss文件进行更改时,终端显示:
=>已更改:C:\ Users \ kenne \ modern_portfolio \ scss \ main.scss
渲染完成,正在保存.css文件...
将CSS写入C:\ Users \ kenne \ modern_portfolio \ dist \ css \ main.css
每次进行更改时,都会在我的main.css文件中添加已编译的CSS。
当我在Chrome,FireFox,Edge中提供页面时,某些子元素的更改未呈现。 (.tech,.item-lang)
当我检查它显示样式已计算。
未显示样式更改的元素嵌套在具有类属性“ tech-main”的div中。
我尝试将class属性和id属性与嵌套元素一起使用,这在浏览器中没有区别。
我已经分别编码和嵌套类。请参阅代码段。
我已使用ctrl F5清除缓存。
我尝试编码一个包含文件_tech.scss并在主scss中使用@import“ tech”。
我已经关闭了所有文件和终端,并多次重启了VScode。
我删除了父div及其内容,然后逐行重新编码,以为我的html文件已损坏。
那没有帮助。我删除了父div并保留了子元素,没有任何变化。
我什至尝试重命名子元素。即从class =“ tech”到class =“ stuff”。没用
我不知道还有什么其他方法可以解决或纠正此问题。
以下是我尝试过的三个编码块。
///////////////////////////////////////////
// Tech Page
.tech-main {
display: grid;
grid-gap: 30px;
grid-template-areas: "tech editor";
grid-template-columns: repeat(2, 1fr);
border: 2px solid $secondary-color;
border-radius: 10px;
padding: 15px;
.tech {
border: 2px $secondary-color;
border-radius: 10px;
}
.item-lang {
text-decoration: none;
}
}
//////////////////////////////////////////
// Tech Page
.tech-main {
display: grid;
grid-gap: 30px;
grid-template-areas: "tech editor";
grid-template-columns: repeat(2, 1fr);
border: 2px solid $secondary-color;
border-radius: 10px;
padding: 15px;
&.tech {
border: 2px $secondary-color;
border-radius: 10px;
}
&.item-lang {
text-decoration: none;
}
}
//////////////////////////////////////////
// Tech Page
.tech-main {
display: grid;
grid-gap: 30px;
grid-template-areas: "tech editor";
grid-template-columns: repeat(2, 1fr);
border: 2px solid $secondary-color;
border-radius: 10px;
padding: 15px;
}
.tech {
border: 2px $secondary-color;
border-radius: 10px;
}
.item-lang {
text-decoration: none;
}
html block:
<div class="tech-main">
<div class="tech">
<h2 class="sm-heading">Languages & Frameworks I am familiar with.</h2>
<ul>
<li class="item-lang">
<img src="img/html5_RZ.png" alt="html5 icon" />
</li>
</ul>
</div>
<div class="editor">
<h2 class="sm-heading">Editors I have used.</h2>
<li class="item-editor">
<img src="img/Atom.png" width="128" height="128" alt="Atom icon" />
</li>
</div>
</div>
最佳答案
解决了:
我重命名了html元素。参见html代码。
更改了scss代码。请参阅scss代码。
现在,所有css更改均已按预期应用。
html代码:
<div class="tech">
<div class="tech-lang">
<h2 class="sm-heading">Languages & Frameworks I am familiar with.</h2>
<ul>
<li class="item-lang">
<img src="img/html5_RZ.png" alt="html5 icon" />
</li>
<li class="item-lang">
<img src="img/css3_RZ.png" alt="Notepad++ icon" />
</li>
<li class="item-lang">
<img src="img/js_RZ.png" alt="html5 icon" />
</li>
<li class="item-lang">
<img src="img/php.jpg" alt="php icon" />
</li>
</ul>
</div>
<div class="tech-editor">
<h2 class="sm-heading">Editors I have used.</h2>
<li class="item-editor">
<label>Atom</label>
<img src="img/Atom.png" width="128" height="128" alt="Atom icon" />
</li>
<li class="item-editor">
<img src="img/1Notepad++.png" width="128" height="128" alt="Notepad++ icon"/>
</li>
<li class="item-editor">
<label>Sublime Text</label>
<img src="img/sublime-icon.png" width="128" height="128" alt="Sublime Text icon"/>
</li>
<li class="item-editor">
<label>VScode</label>
<img src="img/VScode.png" width="128" height="128" alt="Sublime Text icon"/>
</li>
</div>
</div>
scss代码:
// Tech Overlay
.tech {
border: 2px solid $secondary-color;
border-radius: 10px;
padding: 15px;
visibility: hidden;
&.show {
visibility: visible;
}
&-lang,
&-editor {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
float: left;
width: 50%;
height: 100vh;
overflow: hidden;
}
// Languages Side
&-lang {
margin: 0;
padding: 0;
background: rgba(darken($primary-color, 5), 0.9);
border: 2px solid $secondary-color;
border-radius: 10px;
list-style: none;
transform: translate3d(0, -100%, 0);
@include easeOut;
&.show {
// Slide in from top
transform: translate3d(0, 0, 0);
}
}
// Editors Side
&-editor {
background: rgba(darken($primary-color, 5), 0.9);
border: 2px solid $secondary-color;
border-radius: 10px;
transform: translate3d(0, 100%, 0);
@include easeOut;
&.show {
// Slide in from bottom
transform: translate3d(0, 0, 0);
}
}
.item-lang {
transform: translate3d(600px, 0, 0);
@include easeOut;
&.show {
// Slide in from right
transform: translate3d(0, 0, 0);
}
}
.item-lang,
.item-editor {
list-style: none;
margin-bottom: 5px;
}
}
// Delay each item-lang slide by 0.3s
@for $x from 1 through 4 {
.item-lang:nth-child(#{$x}) {
transition-delay: $x * 0.3s;
}
}
// Delay each item-editor slide by 0.3s
@for $x from 1 through 4 {
.item-editor:nth-child(#{$x}) {
transition-delay: $x * 0.5s;
}
}