Less.js: 'рдмреИрдХрдЧреНрд░рд╛рдЙрдВрдб' рд╢реЙрд░реНрдЯрд╣реИрдВрдб рдкреНрд░реЙрдкрд░реНрдЯреА рдореЗрдВ CSS3 рдмреИрдХрдЧреНрд░рд╛рдЙрдВрдб-рд╕рд╛рдЗрдЬрд╝ рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рдиреЗ рд╕реЗ рд╕рд┐рдВрдЯреИрдХреНрд╕ рдПрд░рд░ рд╣реЛрддрд╛ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 10 рдЬрдире░ 2013  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: less/less.js

CSS3 рдХреА рдирдИ background-size рд╕рдВрдкрддреНрддрд┐ рдХреЛ background рд╢реЙрд░реНрдЯрд╣реИрдВрдб рдШреЛрд╖рдгрд╛ рдореЗрдВ рд╢рд╛рдорд┐рд▓ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ, рдЗрд╕реЗ background-position рд╡рд┐рдирд┐рд░реНрджреЗрд╢ рд╕реЗ рдЖрдЧреЗ рд╕реНрд▓реИрд╢ рдХреЗ рд╕рд╛рде рдЕрд▓рдЧ рдХрд░рдХреЗ, рдЗрд╕ рддрд░рд╣:

div {
    background: url('/path/to/image.png') left center / contain no-repeat;
}

рдкрд░рд┐рдгрд╛рдо рдПрдХ рд╕рд┐рдВрдЯреИрдХреНрд╕ рддреНрд░реБрдЯрд┐ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐, рдкрд╛рд░реНрд╕рд░ рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ / contain рднрд╛рдЧ рдкрд░ рдШреБрдЯ рд░рд╣рд╛ рд╣реИ - рдЗрд╕реЗ рд╣рдЯрд╛рдиреЗ рд╕реЗ рддреНрд░реБрдЯрд┐ рднреА рдЧрд╛рдпрдм рд╣реЛ рдЬрд╛рддреА рд╣реИред

рдмреЗрд╢рдХ background рд╕рдВрдкрддреНрддрд┐ рдХреЗ рдкреВрд░реЗ рдореВрд▓реНрдп рд╕реЗ рдмрдЪрдХрд░ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рд╣рд▓ рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реИ ~"тАж" , рд▓реЗрдХрд┐рди рдкреНрд░рддрд┐рдмрдВрдзреЛрдВ рдХреЗ рдмрд┐рдирд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╕рд┐рдВрдЯреИрдХреНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред

bug medium priority

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

@gpv-рджреЗрд╡

рдпрджрд┐ рдЖрдк w/o --strict-math=on рд╡рд┐рдХрд▓реНрдк рд╕рдВрдХрд▓рд┐рдд рдХрд░рддреЗ рд╣реИрдВ рддреЛ рдЖрдкрдХрд╛ рдкрд░рд┐рдгрд╛рдо рдЕрдкреЗрдХреНрд╖рд┐рдд рд╣реИред рджреНрд╡рд╛рд░рд╛ рдЕрдм рдЗрд╕ рддрд░рд╣ рдХреЗ рдмрдпрд╛рди (рдПрдХ рдпрд╛ рджреЛ рдЕрдкрд╡рд╛рджреЛрдВ рдХреЛ рдЫреЛрдбрд╝рдХрд░, рдЬреИрд╕реЗ рдХреЗ рд╕рд╛рде рдХреЗ рд▓рд┐рдП font рд╕рдВрдкрддреНрддрд┐) рдЖрдк рдпрд╛ рддреЛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП --strict-math=on рдпрд╛ рдХреБрдЫ рдХреЗ рд▓рд┐рдП рднрд╛рдЧрдиреЗ рдбрд╛рд▓ / , рдЬреИрд╕реЗ: ~"0/100%" ред

рд╕рднреА 7 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдкреАрдЖрд░ #915 рдХрд╛ рдПрдХ рдЙрдк-рдорд╛рдорд▓рд╛ рд▓рдЧрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЙрд╕ рдкрд░ рдХреБрдЫ рд╕рдордп рд╕реЗ рдХреЛрдИ рдЦрдмрд░ рдирд╣реАрдВ рдЖрдИ рд╣реИ ...

рд╣рд╛рдБ, рдареАрдХ рдпрд╣реА рдХрд╛рд░рдг рд╣реИ рдХрд┐ рдпрд╣ 1.4.0 рдореЗрдВ рд╣реЛрдЧрд╛ред рдЕрдЧрд░ @dmcass рдиреЗ рдЗрд╕реЗ рд╕рдорд╛рдкреНрдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рддреЛ рдореИрдВ #915 рдкрд░

рдорд╛рд╕реНрдЯрд░ рдкрд░ рдлрд┐рдХреНрд╕реНрдб

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдХрдо 2.1.1 рдореЗрдВ рд╣реЛ рд░рд╣реА рд╣реИред

/* less */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0/100%;
    position: fixed;
}
/* compiled css */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0;
    position: fixed;
}

рд▓реЗрд╕ 2.1.1 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд▓рд┐рдирдХреНрд╕ рдЯрдХрд╕рд╛рд▓ 17 рдХрд┐рдпрд╛рдирд╛ рдкрд░ рдЪрд▓ рд░рд╣рд╛ рд╣реИред

@gpv-рджреЗрд╡

рдпрджрд┐ рдЖрдк w/o --strict-math=on рд╡рд┐рдХрд▓реНрдк рд╕рдВрдХрд▓рд┐рдд рдХрд░рддреЗ рд╣реИрдВ рддреЛ рдЖрдкрдХрд╛ рдкрд░рд┐рдгрд╛рдо рдЕрдкреЗрдХреНрд╖рд┐рдд рд╣реИред рджреНрд╡рд╛рд░рд╛ рдЕрдм рдЗрд╕ рддрд░рд╣ рдХреЗ рдмрдпрд╛рди (рдПрдХ рдпрд╛ рджреЛ рдЕрдкрд╡рд╛рджреЛрдВ рдХреЛ рдЫреЛрдбрд╝рдХрд░, рдЬреИрд╕реЗ рдХреЗ рд╕рд╛рде рдХреЗ рд▓рд┐рдП font рд╕рдВрдкрддреНрддрд┐) рдЖрдк рдпрд╛ рддреЛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП --strict-math=on рдпрд╛ рдХреБрдЫ рдХреЗ рд▓рд┐рдП рднрд╛рдЧрдиреЗ рдбрд╛рд▓ / , рдЬреИрд╕реЗ: ~"0/100%" ред

@ рд╕рд╛рдд-рдЪрд░рдг-рдЕрдзрд┐рдХрддрдо

рд╢реАрдШреНрд░ рдЬрд╡рд╛рдм рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдзреНрдиреНрдпрд╡рд╛рджред рдЖрдкрдХрд╛ рд╕реБрдЭрд╛рд╡ рд╡рд╣реА рдерд╛ рдЬреЛ рдореБрдЭреЗ рдЪрд╛рд╣рд┐рдП рдерд╛ред

рдзрдиреНрдпрд╡рд╛рдж @ рд╕рд╛рдд-рдЪрд░рдг-рдЕрдзрд┐рдХрддрдо, рдпрд╣ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ:
url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat;
url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

papandreou picture papandreou  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

vecerek picture vecerek  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

moshemo picture moshemo  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

heavyk picture heavyk  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

chricken picture chricken  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ