Susy: Status V3

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 12 мая 2016  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: oddbird/susy

ΠŸΡ€ΠΈΠ²Π΅Ρ‚
Π±Ρ‹Π»ΠΎ интСрСсно, ΠΊΠ°ΠΊΠΎΠ² статус V3 - какая-Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π³ΠΈΠ±ΠΊΠΈΡ… боксов?

Бпасибо

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

v3 Π½Π΅Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ‚ Π±Π΅Ρ‚Π°-вСрсии, Π½ΠΎ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΡƒΡŽ-Π»ΠΈΠ±ΠΎ Π΄Π°Ρ‚Ρƒ - Ρ‚Π°ΠΊΠΎΠ²Π° ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π° ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ исходного ΠΊΠΎΠ΄Π°.

v2 ΡƒΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с flexbox. НСт ΠΏΡ€ΠΈΡ‡ΠΈΠ½ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π³ΠΎ миксин, ΠΊΠ°ΠΊ ΠΌΡ‹ это Π΄Π΅Π»Π°Π»ΠΈ для ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ². ΠœΡ‹ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ способа ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ синтаксис css, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π³ΠΈΠ±ΠΊΠΈΠ΅ элСмСнты ΠΏΠΎ сСткС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ наши Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ span() ΠΈ gutter() :

.item {
  flex: 1 1 span(2);
  margin-right: gutter();
}

Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ Π² v3.

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

v3 Π½Π΅Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ‚ Π±Π΅Ρ‚Π°-вСрсии, Π½ΠΎ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΡƒΡŽ-Π»ΠΈΠ±ΠΎ Π΄Π°Ρ‚Ρƒ - Ρ‚Π°ΠΊΠΎΠ²Π° ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π° ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ исходного ΠΊΠΎΠ΄Π°.

v2 ΡƒΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с flexbox. НСт ΠΏΡ€ΠΈΡ‡ΠΈΠ½ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π³ΠΎ миксин, ΠΊΠ°ΠΊ ΠΌΡ‹ это Π΄Π΅Π»Π°Π»ΠΈ для ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ². ΠœΡ‹ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ способа ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ синтаксис css, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π³ΠΈΠ±ΠΊΠΈΠ΅ элСмСнты ΠΏΠΎ сСткС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ наши Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ span() ΠΈ gutter() :

.item {
  flex: 1 1 span(2);
  margin-right: gutter();
}

Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ Π² v3.

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π±Ρ‹Π»Π° Π·Π°ΠΊΡ€Ρ‹Ρ‚Π° Π΄Π°Π²Π½ΠΎ, я просто Ρ…ΠΎΡ‚Π΅Π» Π΅Ρ‰Π΅ Ρ€Π°Π· ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ статус V3, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ±Π»Π°Π³ΠΎΠ΄Π°Ρ€ΠΈΡ‚ΡŒ вас Π·Π° ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΠΏΡ€ΠΎΠ΄Π΅Π»Π°Π»ΠΈ с Susy.

@ozke ΠΎΡ‡Π΅Π½ΡŒ Π±Π»ΠΈΠ·ΠΊΠΎ. Π² основном просто отсутствуСт полная докумСнтация.

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ