Π½Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠ°ΠΊ Π³ΠΎΠ²ΠΎΡΡΡ,
Π― Π·Π°ΠΌΠ΅ΡΠΈΠ», ΡΡΠΎ Π² Codekit Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² CSS grid-layout (Π½Π° Π²ΡΡΠΊΠΈΠΉ ΡΠ»ΡΡΠ°ΠΉ Ρ ΠΏΠΎΠΏΡΠΎΡΠΈΠ» ΠΡΠ°ΠΉΠ°Π½Π° ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ Π΅Π³ΠΎ Π΄ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠΈ), Π½ΠΎ Ρ Ρ ΠΎΡΠ΅Π» ΡΠΏΡΠΎΡΠΈΡΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π»ΠΈ ΠΎΠ½ΠΈ Π² sass, Π° Π½Π΅ scss? ΠΈΠ»ΠΈ Ρ ΠΌΠ΅Π½Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ?
body
padding: 10px
display: grid
grid-template-columns: repeat(3 1fr)
grid-template-rows: repeat(3 1fr)
grid-template-areas:
header header header
section section section
footer footer footer
ΠΠ²ΡΡΠΈΡ ΠΊΠ°ΠΊ Π²ΠΎΠΏΡΠΎΡ ΠΊ @ nex3. ΠΡΠΎΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΡΡ ΠΎΡΠΈΠ±ΠΊΡ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΠ±ΠΎΡΠΊΠ΅ Ruby Sass 3.5.0. Π’Π°ΠΊ ΡΡΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ, Π½ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ
body
padding: 10px
display: grid
grid-template-columns: repeat(3 1fr)
grid-template-rows: repeat(3 1fr)
grid-template-areas: header header header section section section footer footer footer
ΠΡΠΎ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ, Π½ΠΎ ΡΡΠΎ Π»ΡΡΡΠ΅Π΅, ΡΡΠΎ Ρ ΠΌΠΎΠ³Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΡ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ.
ΠΠ°ΠΊΡΡΡΠΈΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ libsass Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ.