上のようにaboutの部分の実装はできているが、scssがcssに変換された時にも
.imgFirstではなく&__imgFirstと記述して実装したいができない
とりあえずうまく行った記述
_about.scss
.imgFirst {
width: 55%;
margin-right: 5%;
}
.imgSecond {
width: 40%;
}
.imgThird {
width: 40%;
margin-right: 5%;
margin-top: 40px;
}
.imgForth {
width: 55%;
margin-top: 40px;
}
index.html
<section class="l-about">
<h2 class="l-about__MainTitle">ABOUT</h2>
<div class="l-about__ConceptWrap">
<p class="l-about__Concept">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veit est facilis majores,perspiciatis.</p>
</div>
/private/var/folders/vc/6mgy_96j3jvb7pwcwgs8s0h40000gn/T/AppTranslocation/44C24449-D5A2-4827-9D77-00F94CA118F6/d/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html <div class="l-about__Slider">
<img class="l-about__Slider__flexItem imgFirst" src="images/common/about_01.jpg">
<img class="l-about__Slider__flexItem imgSecond" src="images/common/about_02.jpg">
<img class="l-about__Slider__flexItem imgThird" src="images/common/about_03.jpg">
<img class="l-about__Slider__flexItem imgForth" src="images/common/about_04.jpg">
</div>
</section>
こちらの書き方で同じことを実装したい
index.html:39
<section class="l-about">
<h2 class="l-about__MainTitle">ABOUT</h2>
<div class="l-about__ConceptWrap">
<p class="l-about__Concept">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veit est facilis majores,perspiciatis.</p>
</div>
/private/var/folders/vc/6mgy_96j3jvb7pwcwgs8s0h40000gn/T/AppTranslocation/44C24449-D5A2-4827-9D77-00F94CA118F6/d/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html <div class="l-about__Slider">
<img class="l-about__Slider__flexItem__imgFirst" src="images/common/about_01.jpg">
<img class="l-about__Slider__flexItem__imgSecond" src="images/common/about_02.jpg">
<img class="l-about__Slider__flexItem__imgThird" src="images/common/about_03.jpg">
<img class="l-about__Slider__flexItem__imgForth" src="images/common/about_04.jpg">
</div>
</section>
_about.scss:48
&__Slider{
display: flex;
flex-wrap: wrap;
margin-top: 90px;
//.p-aboutSlider__flexItem
&__flexItem{
height: 300px;
border-radius: 15px;
object-fit: cover;
&__imgFirst{
width: 55%;
margin-right: 5%;
}
&__imgSecond{
width: 40%;
}
&__imgThird{
width: 40%;
margin-right: 5%;
margin-top: 40px;
}
&__imgForth{
width: 55%;
margin-top: 40px;
}
}
}
なぜか
l-about__Slider__flexItem
のcssが反映されなくなってしまいます。
なぜかわかりません。
しかし
index.html:44
<div class="l-about__Slider">
<img class="l-about__Slider__flexItem imgFirst" src="images/common/about_01.jpg">
<img class="l-about__Slider__flexItem imgSecond" src="images/common/about_02.jpg">
<img class="l-about__Slider__flexItem imgThird" src="images/common/about_03.jpg">
<img class="l-about__Slider__flexItem imgForth" src="images/common/about_04.jpg">
</div>
</section>
_about.scss
//.p-about
.l-about{
@include mq(pc) {
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 100px;
//.p-aboutMainTitle
&__MainTitle{
font-size: 3vw;
text-align: center;
color: #595959;
}
//.p-aboutConcept
&__Concept{
text-align: center;
margin: 30px 0;
position: relative;
display: inline-block;
color: grey;
font-size: 2vw;
}
//.p-aboutConceptWrap
&__ConceptWrap{
text-align: center;
}
//.p-aboutConceptWrap .p-aboutConcept::before
&__ConceptWrap &__Concept::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -50px; /*修正前-40px */
border-bottom: 3px solid #ffd743;
width: 15%;
margin: 0 auto;
}
//.p-aboutTitle
&__Title{
font-size: 2vw;
margin: 35px 0;
text-align: center;
color: #595959;
font-weight: normal;
}
//.p-aboutSlider
&__Slider{
display: flex;
flex-wrap: wrap;
margin-top: 90px;
//.p-aboutSlider__flexItem
&__flexItem{
height: 300px;
border-radius: 15px;
object-fit: cover;
}
.imgFirst{
width: 55%;
margin-right: 5%;
}
.imgSecond{
width: 40%;
}
.imgThird{
width: 40%;
margin-right: 5%;
margin-top: 40px;
}
.imgForth{
width: 55%;
margin-top: 40px;
}
}
}
・
・
・
と直したところ
https://gyazo.com/f3a8b494ba33d94a79d7d1971c64a62f
いい感じになったが、Sassの書き方として何か違う気がする
scssで
&__imgFirst
&__imgSecond
・
・
のように書きたいのですが、何が問題で反映されないかわかりません。
おそらくscssからcssに変換される時に意図しない何かが起こっている気がしています。
調べてみたこと
”＆__ scss not wariking"
”＆__ scss not wariking"と検索していくつか記事を読んだのですが解決しませんでした。
github
https://github.com/Taku-Omino/Sass_practice
ご教示いただけますと幸いです。
<img class="l-about__Slider__flexItem__imgFirst" src="images/common/about_01.jpg">
には
.l-about__Slider__flexItem__imgFirst
のスタイルしか適用されませんので
<img class="l-about__Slider__flexItem l-about__Slider__flexItem__imgFirst" src="images/common/about_01.jpg">
と書いてみましょう
これにより
.l-about__Slider__flexItem
と
.l-about__Slider__flexItem__imgFirst
の両スタイルが適用されるようになります
ありがとうございます！解決しました！