Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SCSSで使える@eachが結構デキるヤツだった話

Go Noji
December 02, 2016

 SCSSで使える@eachが結構デキるヤツだった話

https://dist.connpass.com/event/44273/
で紹介させていただきました、SCSSの@each解説スライドです。

中で書かれているリンク部分は以下からも
Web や音楽、科学が中心のブログ
http://noji.wpblog.jp/
今回の周期表のコード&Web ページ
https://github.com/Go-Noji/Scss-each_periodicTable
https://go-noji.github.io/Scss-each_periodicTable/
お蔵入りeach デモコード&Web ページ
https://github.com/Go-Noji/Scss-each_aPsedou
https://go-noji.github.io/Scss-each_aPsedou/
https://github.com/Go-Noji/Scss-each_classImg
https://go-noji.github.io/Scss-each_classImg/
https://github.com/Go-Noji/Scss-each_pref
https://go-noji.github.io/Scss-each_pref/

Go Noji

December 02, 2016
Tweet

More Decks by Go Noji

Other Decks in Programming

Transcript

  1. <ul class="box"> <li class="pic1"></li> <li class="pic2 greenBd bigTxt"></li> <li class="pic3

    bigTxt"></li> <li class="pic4"></li> <li class="pic5"></li> <li class="pic6 blueBorder"></li> <li class="pic7 redBorder"></li> </ul> ؅ཧͮ͠Β͍Ͱ͢ΑͶʜʜ
  2. $transparent: transparent; $green: #388E3C; $blue: #1976D2; $red: #d32f2f; $fontSize: 12px;

    $bigFontSize: $fontSize + 2px; $pics: 'pic1', 'pic2', 'pic3', 'pic4'( ུ ); $colors: $transparent, $green( ུ ); $fontSizes: $fontSize, $bigFontSize( ུ );
  3. .box{ li{ @each $pic in $pics{ $index: index($pics, $pic); &:nth-child(#{$index}){

    background-image: url(#{$pic}.jpg); border: nth($colors, $index) solid 1px; font-size: nth($fontSizes, $index); } } } }
  4. .box{ li{ @each $pic in $pics{ $index: index($pics, $pic); &:nth-child(#{$index}){

    background-image: url(#{#pic}.jpg); border: nth($colors, $index) solid 1px; font-size: nth($fontSizes, $index); } } } } QJDT ͷதʹ֨ೲ͞Ε͍ͯΔ਺͚ͩʨʩ಺ͷॲཧΛ ௥ه͢Δɻ O ճ໨ͷϧʔϓதɺQJD ʹ͸ QJDT ͷ O ൪໨ ͕֨ೲ͞ΕΔɻ
  5. .box{ li{ @each $pic in $pics{ $index: index($pics, $pic); &:nth-child(#{$index}){

    background-image: url(#{$pic}.jpg); border: nth($colors, $index) solid 1px; font-size: nth($fontSizes, $index); } } } } JOEFY ཁૉͷؚ·ΕΔ഑ྻ ཁૉͷ஋  ͸ཁૉ͕഑ྻͷԿ൪໨͔Λฦ͢ɻ ͜ΕͰݱࡏԿप໨ͷϧʔϓ͔ࢀরͰ͖Δɻ
  6. .box{ li{ @each $pic in $pics{ $index: index($pics, $pic); &:nth-child(#{$index}){

    background-image: url(#{$pic}.jpg); border: nth($colors, $index) solid 1px; font-size: nth($fontSizes, $index); } } } } ઌ΄ͲಘͨΠϯσοΫεΛ OUIDIJME ʹద༻ɻ ͔ͦ͠͠ͷ··ͷ JOEFY ͸஋ͷ෦෼ʹ͔͠ ࢖͑ͳ͍ͷͰɺΠϯλʔϙϨʔγϣϯʢ\^ʣ Ͱิ׬͢Δɻ
  7. .box{ li{ @each $pic in $pics{ $index: index($pics, $pic); &:nth-child(#{$index}){

    background-image: url(#{$pic}.jpg); border: nth($colors, $index) solid 1px; font-size: nth($fontSizes, $index); } } } } ͜ͷ෦෼΋ී௨ʹॻ͘ͱ VSM QJDKQH  ͷΑ͏ʹʮʯ͕͍ͭͯ͠·͏ͷͰ ΠϯλʔϙϨʔγϣϯɻ
  8. .box{ li{ @each $pic in $pics{ $index: index($pics, $pic); &:nth-child(#{$index}){

    background-image: url(#{$pic}.jpg); border: nth($colors, $index) solid 1px; font-size: nth($fontSizes, $index); } } } } ଞͷ഑ྻΛࢀর͢ΔͨΊ OUI ؔ਺Λ࢖༻ɻ OUI ࢀর͢Δ഑ྻ औಘ͍ͨ͠ΠϯσοΫε  Ͱଞ഑ྻ಺ͷཁૉΛऔಘͰ͖Δɻ
  9.  ίϯύΠϧޙͷ DTT .box li:nth-child(1) { background-image: url(pic1.jpg); border: transparent

    solid 1px; font-size: 12px; } .box li:nth-child(2) { background-image: url(pic2.jpg); border: #388E3C solid 1px; font-size: 14px; } ʢҎԼུʣ
  10. ࣮ࡍʹ͜ΜͳϞϊΛ࡞ͬͯΈͨ PMDMBTTQFSJPEJD MJ ਫૉ MJ MJ ϔϦ΢Ϝ MJ MJ Ϧν΢Ϝ

    MJ ɹɹɹɹ ɹɹ PM ͜ͷΑ͏ʹݩૉ໊͕ฒΜͰ͍Δ )5.-ʹ4DTTͰελΠϧΛ౰ͯɺ पظදΛ࡞ͬͯΈΔɻ
  11. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ࠓճͷपظදͷίʔυˍ8FC ϖʔδ IUUQTHJUIVCDPN(P/PKJ4DTTFBDI@QFSJPEJD5BCMF IUUQTHPOPKJHJUIVCJP4DTTFBDI@QFSJPEJD5BCMF ͓ଂೖΓ FBDI σϞίʔυˍ8FC ϖʔδ IUUQTHJUIVCDPN(P/PKJ4DTTFBDI@B1TFEPV

    IUUQTHPOPKJHJUIVCJP4DTTFBDI@B1TFEPV IUUQTHJUIVCDPN(P/PKJ4DTTFBDI@DMBTT*NH IUUQTHPOPKJHJUIVCJP4DTTFBDI@DMBTT*NH IUUQTHJUIVCDPN(P/PKJ4DTTFBDI@QSFG IUUQTHPOPKJHJUIVCJP4DTTFBDI@QSFG