๋ง์คํฐ @imports A & B,
B @์์
A
๋ง์คํฐ ํ์ผ์์ A์ ๋ฏน์ค์ธ์ ์ฌ์ฉํ ๋ ์์ฑ์ด ์ค๋ณต๋ฉ๋๋ค.
์์ธํ ๋ด์ฉ์ ๋จ์ ํ ์คํธ๋ฅผ ์ฐธ์กฐํ์ธ์.
๊ตฌ์ฑ: ์ฐ๋ถํฌ 10.04์ lessc cli ๋ฒ์ 1.0.21
๋ฌธ์ ๋ ํ์ผ์ ๋ ๋ฒ ๊ฐ์ ธ์ค๋ ๊ฒ์ธ๋ฐ, ์ด๊ฒ์ด ๋ฏน์ค์ธ์ ์ฌ๋ฐ๋ฅธ ๋์์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
ํ์ผ์ ๋ ๋ฒ ๊ฐ์ ธ์์ผ ํ๋ค๊ณ ์๊ฐํ์ญ๋๊น? ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ ์๋ URL๋ ๊ณ ๋ คํด์ผ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด
// in main.less
<strong i="6">@import</strong>: imports/import1.less;
<strong i="7">@import</strong>: imports/import2.less;
// in imports/import1.less
<strong i="8">@import</strong>: import2.less; // don't import this
<strong i="9">@import</strong>: imports/import2.less; // do import this
ํ , ํ์ผ์ด ๋ค๋ฅธ ํ์ผ๊ณผ ๊ฐ์์ง ํ์ธํ๋ ๋ ์ฌ์ด ๋ฐฉ๋ฒ์ด ์๋์ง ๊ถ๊ธํฉ๋๋ค. ํค๋์ ๋ฌด์ธ๊ฐ๊ฐ ์์ ์ ์์ต๋๋ค.
ํ์ผ ํฌ๊ธฐ๋ ๊ฐ์ผ ์งํ์ด๋ฉฐ ์ฃผ์ด์ง ์์ค ํ์ผ ์ธํธ์์ ๊ณ ์ ํ ๊ฐ๋ฅ์ฑ์ด ํฝ๋๋ค. ๊ทธ๋ฌ๋ ๋์ผํ ํฌ๊ธฐ์ ํ์ผ์ด 2๊ฐ ์๋ ๊ฒ์ _๊ฐ๋ฅ_ํฉ๋๋ค.
๋ง์ฐฌ๊ฐ์ง๋ก ๋ ์ง๊ฐ ์์ ๋์์ต๋๋ค.
์๋ฒ๊ฐ ETag ํค๋๋ฅผ ์ค์ ํ๋ฉด ๊ทธ๊ฒ์ ์ฌ์ฉํ ์ ์์ต๋๋ค/์ฌ์ฉํด์ผ ํฉ๋๋ค.
์บ์ฑํ ๋ ํ์ผ ๋ด์ฉ์ MD5 ํด์๋ฅผ ํค๋ก ์ฌ์ฉํ์ง๋ง ๊ฐ์ธ์ ์ผ๋ก ๊ทธ๊ฑด ๋ฌด๋ฆฌ๋ผ๊ณ ์๊ฐํฉ๋๋ค.
ํ , ๋ค ๋ฌธ์ ๋ ์๋ฐ ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ณธ MD5๊ฐ ์๋ค๋ ๊ฒ์
๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ๊ทธ๊ฒ์ ์ฌ์ฉํ ๊ฒ์
๋๋ค.
ETag๊ฐ ์ด์์ ์ด์ง๋ง ์ผ๋ถ ์๋ฒ๋ ์ค์ ํ์ง ์์ต๋๋ค. ๋๋ ์ด๊ฒ์ ๋ํด ์๊ฐํด์ผํฉ๋๋ค.
ํ์ผ์ ๋ ๋ฒ ๊ฐ์ ธ์ค๋ฉด ์ ๋๋ค๋ ๋ฐ ๋์ํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ๊ทธ๋ฌ๋ ํญ์ ์ฌ์ค์ ๋๊น? (์ฆ, ๋ฒ์์ ๋์์ผ๋ก mixim์ผ๋ก ๊ฐ์ ธ์ค๊ธฐ๊ฐ ๊ด์ฐฎ์ ์ ์์ต๋๋ค. ํด๋ผ์ฐ๋ ํค๋๋ ์ด๊ฒ์ ๋ํด ๋๋ณด๋ค ๋ ์ ๋๋ตํ ์ ์์ต๋๋ค).
๋ง์ ์ธ์ด์์ ์ด๋ฏธ ์ด ๋ฌธ์ ๋ฅผ ๋ค์ํ ๋ฐฉ์์ผ๋ก ํด๊ฒฐํ์ต๋๋ค.
#ifndef
/ #define
/ #endif
include_once()
"C ๋ฐฉ์"์ ๊ตฌํํ๊ธฐ๊ฐ ์กฐ๊ธ ๋ ์ด๋ ค์ธ ์ ์์ง๋ง ์กฐ๊ฑด๋ฌธ์ ๋ค๋ฅธ ํ๋ฅญํ ๊ฐ๋ฅ์ฑ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
"PHP ๋ฐฉ์"์ด ์ ํ๋๋ฉด ํ์ผ์ ๊ตฌ๋ณํ๋ ๋ฐฉ์์ ์ ํํด์ผ ํฉ๋๋ค. ์ ๋ URL์ ์ข์ ์ ํ์ธ ๊ฒ ๊ฐ์ต๋๋ค(์ง์ ๋๋ document.location + ์๋ URL์ ํตํด ์ ํ) - HTTP ์์ฒญ์ ์ฌ์ฉํ์ง ์๊ธฐ ๋๋ฌธ์ ํฌ๊ธฐ / ๊ธธ์ด / MD5๋ณด๋ค ๋ซ๋ค๊ณ ์๊ฐํฉ๋๋ค.
๊ทธ๋ฌ๋ ์ถฉ๋ถํ์ง ์์ ์ ์์ต๋๋ค. ๊ฐ URL์ ๋จ์ผ ํ์ผ์ ๋งคํ๋์ง๋ง ๊ฐ ํ์ผ์ ์ฌ๋ฌ URL์ ๋งคํ๋ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ฒฝ์ฐ ์ ํค์๋ @<strong i="16">@name</strong>: <unique name>
๋์
ํ๋ฉด ๋์์ด ๋ ์ ์์ต๋๋ค.
@import_once ์๊ณ ๋ฆฌ์ฆ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. ์ ๋ URL์ ์์ง ๊ฐ์ ธ์ค์ง ์์ ๊ฒฝ์ฐ ํ์ผ์ ๊ฐ์ ธ์ค๊ณ @ @name ์ด ์ด๋ฏธ ๊ฐ์ ธ์จ ์ํ์ธ์ง ํ์ธํ๊ณ ํ์ผ์ ๊ฐ์ ธ์ค์ง ์์ ๊ฒฝ์ฐ ํ์ธํฉ๋๋ค.
๋๋ ๋์ํ๋ค. ๋จ์ผ ์์ฒญ์ ์ปจํ ์คํธ ๋ด์์ ๋ฆฌ์์ค๊ฐ ๋ณ๊ฒฝ๋์ง ์๋๋ค๊ณ ๊ฐ์ ํ ์ ์์ด์ผ ํฉ๋๋ค. ๋ฐ๋ผ์ ์ ๋ URL์ ์ถฉ๋ถํด์ผ ํฉ๋๋ค.
ํ์ผ ๋ณ๊ฒฝ ์ฌํญ์ ํ์ธํ๋ ๊ฒ์ ๋ ๋ค๋ฅธ ๋ฌธ์ ์ ๋๋ค.
์ด๊ฒ์ด ์๋ @import๊ฐ ์๋ํ๋ ๋ฐฉ์์ด๊ธฐ ๋๋ฌธ์ @import import๋ฅผ ์ฌ๋ฌ ๋ฒ ์ ์งํด์ผ ํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋๋ @vicb ์ PHP์ ๊ฐ์ ์๋ฃจ์ ์ ์ข์ํ์ง๋ง @import_once ๋์ 'comment'์์ ๋ ๋์ ๊ฒ์ ์ข์ํ๋ฏ๋ก ์ฌ์ ํ ์๋ CSS ๊ตฌ๋ฌธ๊ณผ ํธํ๋ฉ๋๋ค.
.less ํ์ผ ์๋จ์ ๋ค์๊ณผ ๊ฐ์ด ์ถ๊ฐํ ์ ์์ต๋๊น?
/_! ํ์:url (./abc.less)_/
์ ๋ ์ด ๋ฌธ์ ๋ฅผ ๊ฒช๊ณ ์์ต๋๋ค. ๋ด ํ๋ก์ ํธ์๋ ๋จ์ผ .css ํ์ผ๋ก ์ปดํ์ผ๋๋ LESS ํ์ผ ๊ณ์ธต์ด ์์ต๋๋ค. ์ฌ๋ฌ ํ์ผ์ ํฌํจ๋ ํ๋์ ์ ํธ๋ฆฌํฐ LESS ํ์ผ์ด ์์ผ๋ฉฐ, ๊ฒฐ๊ณผ์ ์ผ๋ก ๋ชจ๋ ๋ฏน์ค์ธ์ ํด๋น ์ ํธ๋ฆฌํฐ ํ์ผ์ ๊ฐ์ ธ์จ ํ์๋งํผ ๋ณต์ ๋ฉ๋๋ค.
@import_once ๋๋ ์๋ง๋ @import : Once url('url'); ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๊ฒ์ ๋๋ค.
์ฐ๋ฆฌ๋ ํ๋ก์ ํธ์์ @NielsJanssen ๊ณผ ๊ฐ์ ๋ฌธ์ ์ ์ง๋ฉดํด ์์ต๋๋ค. ์ด ๋ฌธ์ ๊ฐ ์ธ์ ์์ ๋ ์ง ์ ์
๋ํ์ด ๋ฌธ์ ๊ฐ ๋ฐ์ํฉ๋๋ค. ๋๊ตฌ๋ ์ง ํด๊ฒฐ์ฑ ์ ์์๋ด์ จ์ต๋๊น?
์ฌ๊ธฐ์ ๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ๊ฐ๋จํ ์๋ฃจ์ ์ ์ฐพ์ ์ ์์๊ณ ๋ ๋ฒ ๊ฐ์ ธ์ค์ง ์๋๋ก ๊ฐ์ ธ์ค๊ธฐ๋ฅผ ๋ค์ ์ ๋ ฌํ์ต๋๋ค.
node.js๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ Stylus๋ฅผ ํ์ธํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ๋๋ ์ ์ ๋์ LESS๋ฅผ ์ฌ์ฉํ๋ค๊ฐ ์์ ํ ๊ฐ๋ฐ๋์ง ์์ ๊ฒ์ ์ข์ ํ๊ณ SASS ๋ก ์ ํํ ๋ค์ ๋ง์นจ๋ด Stylus๋ก ์ ํํ์ต๋๋ค. ๊ธฐ๋ฅ์ ์ ๋๋ก ๊ตฌํํ๊ณ ๊ตฌ๋ฌธ์ ์ ํ ์ฌํญ์ด๋ฉฐ(์ ๋ ์ค๊ฐ ๋ฐฉ์์ ์ฌ์ฉํฉ๋๋ค) ๋งค์ฐ ๊ฐ๋ ฅํ๋ฉฐ TJ๋ ์ ๋ง ๋ฐ์์ด ๋น ๋ฅธ ๊ฐ๋ฐ์์ ๋๋ค.
node.js๋ฅผ ์ฌ์ฉํ์ง ์๋ ๊ฒฝ์ฐ์๋ ์คํ์ผ๋ฌ์ค๋ฅผ ๋ฃจ๋น์ ํจ๊ป ์ฌ์ฉํ๊ณ ์ปดํจํฐ์์ ์ปดํ์ผํ ์ ์์ต๋๋ค. ์ด๋ค ์ด์ ๋ก๋ Stylus๊ฐ ๋ง์์ ๋ค์ง ์๋๋ค๋ฉด SASS/SCSS๋ ์ข์ ๋์์ด๋ฉฐ ๋์ผํ ๋ฐฉ์์ผ๋ก ์ํํ ์ ์์ต๋๋ค.
๊ธด ์ด์ผ๊ธฐ ์์ฝ: LESS๋ ์ฅ๊ธฐ์ ์ผ๋ก ์ข์ง ์์ต๋๋ค.
์์ฃผ ๋์ ํ๋ ๋จ์.
์ฌ๊ธฐ์ ํด๋น bs๋ฅผ ๊ฒ์ํ ํ์๋ ์์ต๋๋ค. ์ฐํธ์ด๋ ์ด์ ์ ์ฌํ ๋ฐฉ๋ฒ์ผ๋ก ๋ณด๋ผ ์ ์์ต๋๋ค. ๋ฌด๋ฃ๋ก ์ฌ์ฉํ ์ ์๋ ๊ฒ์ ๋ํด "์ ๋ง ๋ฐ์์ด ๋น ๋ฅธ ๊ฐ๋ฐ์"๋ฅผ ์ํ๋ ๊ฒ๊ณผ ๊ฐ์ ๋์ ๊ธฐ์ค์ ๊ฐ์ง ์ ์์ต๋๋ค.
์ ๋์ ์ผ๋กํ์ง.
๋๋ LESS๋ฅผ ์ฒ์ ์ฐพ์์ ๋ ๊ทธ ์กฐ์ธ์ ์ข์ํ์ ๊ฒ์ด๋ฏ๋ก ์ต์ํด์ง๊ณ ๊ฒฐ๊ตญ ๋ ๋ ๋ ๊ทธ๊ฒ์ผ๋ก ์ ํํ๋ ๋ฐ ๋ช ์ฃผ๋ฅผ ๋ญ๋นํ์ง ์์์ต๋๋ค. ๋ซํ ๋ฌธ์ ๋ณด๋ค ๋ฏธํด๊ฒฐ ๋ฌธ์ ๊ฐ ๋ ๋ง๊ณ ๋๋ถ๋ถ์ด ์๋ต๋์ง ์์๊ธฐ ๋๋ฌธ์ ๋ด๊ฐ ๋จผ์ ๊ทธ๊ฒ์ ์์์ฐจ๋ ธ์ด์ผ ํ์์ ์ธ์ ํฉ๋๋ค.
๋ด๊ฐ ๊ฐ์ง ์ ์๊ณ ๊ฐ์ง ์ ์๋ ๊ธฐ์ค์ด ์๋๋๋ค. ๋ ๋์ ๋์์ด ์์ ๋ ์ฌ๋๋ค์๊ฒ ๊ฒฝ๊ณ ๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ๋๋ค.
๊ทธ๋์ ๋๋ ๋ด "BS"๋ฅผ ์งํค๊ณ ์ฌ๋๋ค์ด ๊ฒฝ๊ณ ๊ฐ ๋์์ด๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
@ianstormtailor : ํ๋ก์ ํธ๊ฐ "์ฅ๊ธฐ์ ์ผ๋ก๋ ์ข์ง ์๋ค"๊ณ ๋งํ๋ ๊ฒ์ ์ฝ๊ฐ ํ์คํ ๋ฆฌ์ ์ ๋๋ค.
์ด๊ฒ๋ ๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
ํธ.๋ฆฌ์ค
<strong i="7">@import</strong> "bar.less";
<strong i="8">@import</strong> "baz.less";
๋ฐ.๋ฆฌ์ค
<strong i="12">@import</strong> "mixins.less";
.bar {
.mixer
}
๋ฐ์ฆ.๋ฆฌ์ค
<strong i="16">@import</strong> "mixins.less";
.baz {
.mixer
}
mixins.less
.mixer {
color: 000;
border: 2px solid #fff;
}
$ lessc foo.less
.mixer {
color: 000;
border: 2px solid #fff;
}
.bar {
color: 000;
border: 2px solid #fff;
color: 000;
border: 2px solid #fff;
}
.mixer {
color: 000;
border: 2px solid #fff;
}
.baz {
color: 000;
border: 2px solid #fff;
color: 000;
border: 2px solid #fff;
}
๋๋ ์ด์ ์ ์ด ํ ๋ก ์ ์ฐธ์ฌํ์ง ์์์ง๋ง ์ง๊ธ์ ๋์ผํ ๋ฌธ์ ์ ์ง๋ฉดํด ์์ต๋๋ค ... @ianstormtaylor ๊ฐ ์ ํ ํ์คํ ๋ฆฌ
@cloudhead ๋ ๋ด๊ฐ ํ๋ ๋ชจ๋ ์๊ฒฌ์ ๋๋ถ๋ถ ๋ฌด์ํ๋ค๋ ์ธ์์
๋ชจ๋ ๊ฐ์ ธ์ค๊ธฐ๊ฐ ํฌํจ๋ main.less
ํ์ผ์ด _๊ฐ๋ฅ_ํฉ๋๋ค. ์์ ๋ ํธ์ํฐ ๋ถํธ์คํธ๋ฉ ์ ์ฐธ์กฐํ์ญ์์ค(๋ฉ์ธ ํ์ผ์ bootstrap.less
).
๋ด๊ฐ (์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์) ๊ฐ์ ธ์ค๋ ์ ์ ํ์ผ ์ค ์ผ๋ถ๋ ๋
๋ฆฝ ์คํํ์ผ๋ก ์ปดํ์ผํ ์ ์๋๋ก ์์ฑ๋์ด ๊ฐ๊ฐ์ ๊ณตํต variables.less
๋์ด ์๊ณ ๋ด๊ฐ ๋ณด๊ณ ์๋ ๋ฌธ์ ๋ ๊ฐ ํ์ผ์ ๊ฐ์ ธ์ค๊ธฐ ๋๋ฌธ์ ๋ฐ์ํฉ๋๋ค. ์ ์ ์์ ํ์ผ์ ํ๋์ ๋ฉ์ธ ํ์ผ๋ก ๋ง๋ ๋ค์ ํด๋น ํ์ผ์ ์ปดํ์ผํ๋ฉด ๋ฏน์ค์ธ์ด ํฌํจ๋๋ ํ์๋งํผ ๊ฐ ๋ฏน์ค์ธ์ด ์ ์ฉ๋ฉ๋๋ค(์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ํฌํจํ๋ ๋ชจ๋ ํ์ผ์ ๋ํด ํ ๋ฒ).
๋น์ ์ด ๋ง์์ - ๋น์ ์ด ์ ์ํ๊ณ ๋ ๋ด๊ฐ ์๋ฒฝํ๊ฒ ์ ์ด ํ ์ ์์ง๋ง ๊ทธ ์ฝ๋์์ ๊ฐ์ ์ผ์ํ๊ณ _am_์ฒ๋ผ ๋ด๊ฐ ๋ญ๊ฐ๋ฅผ ํ _could_ ํ์ง ์์ต๋๋ค ํ๊ท ๋ชจ๋๊ฐ ๊ทธ๋ฐ ์์ผ๋ก ์์ ์ ์ํํฉ๋๋ค.
๋ํ ํด๊ฒฐ ๋ฐฉ๋ฒ(ํ์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์๋ ๊ฒฝ์ฐ _only_)์ ์ด๊ฒ์ด ๋ฒ๊ทธ๋ผ๋ ๊ฒ์ ๋ณ๊ฒฝํ์ง ์์ต๋๋ค. ๋ ์ฌ์ฉํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ์๋นํ ์ต์ํด์ก์ง๋ง ์ด์ ๊ฐ์ ๋ฒ๊ทธ๊ฐ ๊ฑฐ์ 18๊ฐ์ ๋์ ์ด๋ ค ์๋ค๋ ์ฌ์ค์ด ๋ต๋ตํฉ๋๋ค. ( @wlangstroth ๋๋ ๊ทธ๊ฒ์ด _๋น์ ์_ ์๋ชป์ด ์๋๋ผ๋ ๊ฒ์ ๊นจ๋ฌ์์ต๋๋ค)
๊ด์ฌ ์๋ ์ฌ๋์ ์ํด #431์ ๋ํ ๋๊ธ์ ๋ถ์ฌ๋ฃ์ ๋ฌด์ฐจ๋ณ ๋์ ์์ ( @vicb ์ ํ ์คํธ์ ๋ํด ํ ์คํธ๋์ง ์์์ง๋ง ์๋ํด์ผ ํจ)์ด ์์ต๋๋ค. ์๊ฐ์ด ์ข ๋ ์์ผ๋ฉด ๋ ๋์ ์๋ฃจ์ ์ ์ฐพ์ผ๋ ค๊ณ ๋ ธ๋ ฅํ๊ฒ ์ต๋๋ค.
๊ฐ์ ๋ฌธ์ ๊ฐ
๋ํ ์ด ๋ฌธ์ ๊ฐ ์์์ง๋ง ๋ด ๋ฏน์ค์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ bootstrap.less๋ก ๊ฐ์ ธ์์ ์์ ํ์ต๋๋ค. ํ์ ๊ฐ์ ธ์ค๊ธฐ์์ ์ก์ธ์คํ ์ ์๋ค๋ ๊ฒ์ ๋ชฐ๋์ง๋ง ์ดํด๊ฐ ๋ฉ๋๋ค.
fyi #431์ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ํ ๋ฆฌํ์คํธ์ ๋๋ค.
@cloudhead ์ด์ ๋ํ ์์ ์ฌํญ์ ์ ์ฉํ ์
๊ฐ์ ๋ฌธ์ :-(
์ด ๋ฌธ์ ๋ก ์ด๋ ค์์ ๊ฒช๊ณ ์๋ ์ฌ๋์๊ฒ ์ ์ํ๊ธฐ ์ํด Alexis๊ฐ Twitter์ ๋ฉ์์ง๋ฅผ ๊ฒ์ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. Alexis๋ ์ด์ ์ ์ฌ๋ฌ ํฐ์ผ์์ ๋ชจ๋ ๋ฌธ์ ๋ฅผ ๋ชจ๋ํฐ๋งํ ์ ์์ผ๋ฉฐ ์ฌ๊ฐ์ฑ์ ์๊ฒ ๋ ๊ฒฝ์ฐ์๋ง ์์ ํ๋ค๊ณ ๋งํ์ต๋๋ค. ๋๋ ์ด๊ฒ์ด ์ฌ๊ฐํ ๋ฌธ์ ๋ผ๊ณ ์๊ฐํ์ง๋ง Twitter์์ Alexis์ ๊ด์ฌ์ ๋ ์๋ ์์์ต๋๋ค.
์ด์ฉ๋ฉด ๋ค๋ฅธ ๋๊ตฐ๊ฐ๊ฐ ๋ ์ด์ด ์ข์ ์๋ ์์ต๋๋ค.
ํธ์ํฐ: https://twitter.com/#!/cloudhead
๊ทธ๋ฆฌ๊ณ ์ด ๋ฌธ์ ์ ๋ํ ๋งํฌ๋ฅผ ๋๋กญ ํ์ธ์ :
@cloudhead ์ ์ ๋ชจ๋๊ฐ ๊ทธ๊ฒ์ ์ฌ์ฉํ์ง ์๋๋ก ํ ๋ ๋ง์ ์ด์ ๋ ๊ทธ ๋ค์์ด ํ๋ก์ ํธ์ ๋ฌธ์ ๋ฅผ ๋ชจ๋ํฐ๋ง ํ ์์๋ ๊ฒฝ์ฐ @Kalyse. ์ฌ๋๋ค์ ๊ทธ๊ฐ ๋ฌธ์ ์ ๋ฐฑ๋ก๊ทธ๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐ ๋์์ ์ค ๋ค๋ฅธ ์ฌ๋์ ์ง๋ช ํด์ผ ํ๋ค๊ณ ์ ์ํ์ง๋ง ๋ค์ ์๋ต์ด ์์์ต๋๋ค.
๋ด๊ฐ ์ด์์์ ์ธ๊ธํ์ ๋ ์ด๋ฏธ ์๋ฆผ์ ๋ฐ์ ์ ์๋ ์ฌ๋์ ๊ด์ฌ์ ๋๊ธฐ ์ํด ํธ์ํฐ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ์ด์ ๋ ๋ฌด์์ ๋๊น? @cloudhead ๊ฐ 2๋ ๋์ ๊ณต๊ฐ๋ ๋ฌธ์ ์ ์๋ตํ ์ ์๋ค๋ ๊ฒ์ ๋ถ๋๋ฌ์ด ์ผ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋ ์ต์ํ ์์ ์ด ์ ๋ขฐํ๋ ๋ ์ฌ๋์ ์ฐพ์ ๋ฏธํด๊ฒฐ ๋ฌธ์ ์ ๋ฐฑ๋ก๊ทธ๋ฅผ ํตํด ์์ ์ ์์ํ๋๋ก ํ ์ ์์ต๋๋ค. ๊ทธ๋ค์ ์ ์ด๋ ์ค๋ณต์ ๋ซ๊ณ ๊ทธ๋ฅผ ์ํด ๋ฏธํด๊ฒฐ ๋ฌธ์ ์ ์๋ฅผ ์ค์ด๋ ๋ฐ ๋์์ ์ค ์ ์์ต๋๋ค.
github ์๋ฆผ ์์คํ ์ ์์ ํ ์ธ๋ชจ๊ฐ ์์ต๋๋ค. ํ๋ฃจ์ ์ฝ 70-100๊ฐ์ ์๋ฆผ์ ๋ฐ๊ธฐ ๋๋ฌธ์ ๊ทธ๋ฅ ๋ฌด์ํ๋ ๊ฒ์ ์ ํธํฉ๋๋ค.
์ด๊ฑฐ ์กฐ์ฌํด๋ณผ๊ฒ..
์, @import-once
์ง์๋ฌธ์ ์ถ๊ฐํ์ต๋๋ค. ๊ฒฝ๋ก๊ฐ ์ผ์นํ๋์ง ํ์ธํ๊ธฐ๋ง ํ๋ฏ๋ก ๋งค์ฐ ๊ธฐ์ด์ ์ด์ง๋ง ๋๋ถ๋ถ์ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ๋ค๋ฃจ์ด์ผ ํฉ๋๋ค.
@cloudhead ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด
์ ๋ ๊ฐ์ธ์ ์ผ๋ก pull ์์ฒญ์ด ๊ณ ๋ ค๋์ง ์์ ๊ฒฝ์ฐ์๋ ์ด ํ๋ก์ ํธ๊ฐ Github์ ์๋ ์ด์ ๋๋ ๋ฌธ์ ๊ฐ ๋ฌด์๋๋ ๊ฒฝ์ฐ์๋ ์ด์ ํธ๋์ปค๊ฐ ์คํ๋๋ ์ด์ ๋ฅผ ๊ฐ์ธ์ ์ผ๋ก ์ดํดํ์ง ๋ชปํฉ๋๋ค.
์ฌ์ด ์ฌ๋๋ค! ํ ์ฌ๋์ด ์ด๋ ๊ฒ ์ธ๊ธฐ ์๋ ํ๋ก์ ํธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค๋ฉด ๊ทธ๋ค์ ๊ฐ์ ๋ฐฐ๋ฅผ ํ๊ณ ์์ ๊ฒ์ ๋๋ค. @cloudhead ๋ ํ๋ฅญํ ์ผ์
์ฌ๋๋ค์ ๋๋๋ก ๋ช ๋ ์ ์ ๋ง์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค. ์๋ต์ด ์๋ 74๊ฐ์ ๋ฏธํด๊ฒฐ pull ์์ฒญ ์ค ํ๋๋ฅผ ํ์ธํ์ญ์์ค. ์๋ฅผ ๋ค์ด ์ด ๋ฌธ์ ์๋ 2๋ ์ ์ผ๋ก ๊ฑฐ์ฌ๋ฌ ์ฌ๋ผ๊ฐ๋ ๋ง์ ์์์๊ฐ ์์ต๋๋ค(์: #324 #71). ๋ค์์ ์ด ๋ฌธ์ ๋ฅผ ์์ฃผ ๊ฐ๋จํ๊ฒ ํด๊ฒฐํ ์ ์๋ ํ ๋ฆฌํ์คํธ์ ๋๋ค. https://github.com/cloudhead/less.js/pull/431 ์ปค๋ฏธํฐ๊ฐ ํผ๋๋ฐฑ์ ์์ฒญํ์ง๋ง ๋ฌต๋ฌต๋ถ๋ต์ด์์ง๋ง ๊ฒฐ๊ตญ ํฌ๊ธฐํ์ต๋๋ค.
@cloudhead - Alexis, ์ด๊ฒ์ ํ์์ ๋น ์ง๊ธฐ์๋ ๋๋ฌด ํ๋ฅญํ ํ๋ก์ ํธ์ ๋๋ค. ์ฌ๋๋ค์ด ์์์ ์ธ๊ธํ ์ข ๋ฅ๋ฅผ ๋ณผ ๋ ํ๋ก์ ํธ๊ฐ ์ ๋ขฐํ ์ ์๊ฑฐ๋ ์ ๋ขฐํ ์ ์๋ค๋ ์ธ์์ ์ค๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฒ์ ๋ถํ์ํฉ๋๋ค! github์ ๋ง๋ฒ์ ํ๋ฅญํ ์ฝ๋๋ฅผ ์์ฑํ๊ณ ํ๋ก์ ํธ์ ์ฐธ์ฌํ๋ ๋ฐ ๊ด์ฌ์ด ์๋ ์ฌ๋๋ค์ ์ฝ๊ฒ ์ฐพ์ ์ ์๋ค๋ ๊ฒ์ ๋๋ค. ๋ฌธ์ ๋ฅผ ์กฐ์ ํ๊ณ ์์ฒญ์ ๋์ด์ค๋ ๋ฐ ๋์์ด ๋๋์ง ์ข์ ์ฌ๋๋ค์๊ฒ ๋ฌผ์ด๋ณด์ธ์.
์ฐ๋ฆฌ ๋ชจ๋๋ ๋น์ ์ ์ผ์ ์ฌ๋ํฉ๋๋ค. ์ปค๋ฎค๋ํฐ๋ ๋์์ ์ํฉ๋๋ค. ๋์๋๋ฆฌ๊ฒ ์ต๋๋ค!
@jeremyricketts ์ข์ ์ง์ ์ ๋๋ค.
@jeremyricketts์ ๋์ํฉ๋๋ค. ์ ๊ฐ ์ผํ๋ ํ์ฌ์์ ์ด
@cloudhead @import-once
์ง์๋ฌธ์ด ์๋ํ์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ์ด๊ฒ์ด ์ ํ
์คํธ ์ฌ๋ก์
๋๋ค.
// a.less
.gain-bfc() {
overflow: hidden;
*zoom: 1;
}
// b.less
@import-once "a.less";
// c.less
@import-once "a.less";
@import-once "b.less";
div {
.gain-bfc();
}
c.less
์ปดํ์ผ ํ ์์ ๊ฒฐ๊ณผ๋ ๋ค์๊ณผ ๊ฐ์์ผ ํฉ๋๋ค.
div {
overflow: hidden;
*zoom: 1;
}
ํ์ง๋ง ๋๋ ์ค๋ณต๋ ์์ฑ์ ์ป์๋ค
div {
overflow: hidden;
*zoom: 1;
overflow: hidden;
*zoom: 1;
}
+1 ์ ๋ ๋ฏธ๋ฆฌ์ผ์ธ
๋๊ตฌ๋ ํ ๋จ๊ณ ์ฌ๋ผ๊ฐ๊ณ ์ถ์ด - https://twitter.com/#!/neonstalwart/status/183247994072735744
์ค์ ํ๋ก๊ทธ๋๋ฐ์ ์ํ๋ ์ฌ๋์ด ํ์ํฉ๋๋ค. ๋ด ์ธ์์ PSD, ์ฐํ๊ณผ ์ข ์ด, html CSS์ ๊ฐ๋ฒผ์ด jQuery ์์ ์ ๋๋ค.
๋ฌธ์ ๋ฅผ ๋ถ๋ฅํ๊ณ pull ์์ฒญ์ ํ๋ ๋ฐ๋ง ๋ช ์ฌ๋์ด ํ์ํฉ๋๋ค.
์ค๋ณต์ ์ ๊ฑฐํ๊ณ ๋ฒ๊ทธ์ ๋ํ ํ
์คํธ ์ฌ๋ก๊ฐ ์๋์ง ํ์ธํ์ญ์์ค.
์ต์ํ ๊ทธ ์ผ์ ๋๊ธฐ ์ํด ์์ํ์ฌ
์์ ๋ฒ๊ทธ๋ ๋ซ์ต๋๋ค.
2012๋
3์ 23์ผ ์คํ 1์ 28๋ถ, "Jeremy Ricketts" <
๋ต์ฅ@reply.github.com>
์ผ๋ค:
์ค์ ํ๋ก๊ทธ๋๋ฐ์ ์ํ๋ ์ฌ๋์ด ํ์ํฉ๋๋ค. ๋ด ์ธ์์ PSD,
์ฐํ๊ณผ ์ข ์ด, html CSS์ ๊ฐ๋ฒผ์ด jQuery๊ฐ ์๋ํฉ๋๋ค.์ด ์ด๋ฉ์ผ์ ์ง์ ๋ต์ฅํ๊ฑฐ๋ GitHub์์ ํ์ธํ์ธ์.
https://github.com/cloudhead/less.js/issues/49#issuecomment -4667283
@cloudhead ์ด๊ฒ ์ ๋ํ ์ข์ ํด๊ฒฐ์ฑ ์ด ์๊ฐ ์ผ๋ง์ ์
๊ธฐ๋ณธ์ ์ผ๋ก ํ์ฌ ์์ฑ๊ณผ ๋์ผํ ๊ฐ์ ๊ฐ์ง ๊ธฐ์กด ๊ท์น์ด ์๋ ๊ฒฝ์ฐ ๊ท์น์ ์ ํ๊ธฐ์ ์ถ๊ฐํด์๋ ์ ๋ฉ๋๋ค. ๋ฐฐ๊ฒฝ์ ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ๋ง๋ค ๋ค๋ฅด๊ฒ ์ฒ๋ฆฌ๋๋ฏ๋ก ์ฌ๋ฌ ๊ฐ์ง ๋ค๋ฅธ ๋ฐฐ๊ฒฝ์ ์ถ๊ฐํ ์ ์์ผ๋ฏ๋ก ์์ฑ ๊ฐ๋ ํ์ธํด์ผ ํฉ๋๋ค.
์ด ์๋ฃจ์
@cloudhead์ ๋ํด ์ด๋ป๊ฒ ์๊ฐํ์ธ์?
์์ผ๋ก ๋์๊ฐ ๊ฒ ๊ฐ์ต๋๊น?
์ด๊ฒ์ ์์ ํ์ง ์๋๋ค๋ ๊ฒ์ ๋ค์์ ์๋ฏธํฉ๋๋ค.
1) ํ์ผ์ด ํ์ํ ๊ฒ๋ณด๋ค ํฝ๋๋ค.
2) ๋ฏน์ค์ธ๋ ํฌํจํ๋ ์ถ๊ฐ ํ์ผ์ ํฌํจํ ๋๋ง๋ค ํด๋น ๋ฏน์ค์ธ์ ๊ฐ์ ๋ค์ ์ถ๊ฐํ๊ธฐ ๋๋ฌธ์ CSS๋ฅผ ์ฌ๋ฌ ํ์ผ์ ํผ๋จ๋ฆฌ๊ณ ๋กํธ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ์ ๋ฐ๋์งํ์ง ์์ต๋๋ค. ๋๋ ์๋ง๋ 80๊ฐ์ lessCSS ์คํ์ผ์ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ, ์ด๊ฒ์ ๋ด๊ฐ .background() ๊ทธ๋ผ๋์ธํธ ๋ฏน์ฑ์ ํ ๋ ๊ฐ ์ ํ๊ธฐ์ ๋ํด 80 * 6๊ฐ์ ์ถ๊ฐ ์คํ์ผ์ ์์ฑํ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. (6์ ๋ชจ๋ ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํฉ๋๋ค).
3) ๋ํ ํ์ด์ง ๋ ๋๋ง ์๋๊ฐ ๋๋ ค์ง๋๋ค. ์ถ๊ฐ ์คํ์ผ๋ก ์ธํด ์ด๋น ๊ทธ๋ฆฌ๊ธฐ/์๋ก ๊ณ ์นจ์ด ๊ทน์ ์ผ๋ก ๋จ์ด์ง๋๋ค.
์๊ฐ @cloudhead ?
๊ฑด๋ฐฐ.
@cloudhead ์ต์ ์ปค๋ฐ์์ ์ด ๋ฌธ์ ์ ๋ํ pull ์์ฒญ์ ํ๋ฉด ๋ณํฉ์ ๋ณผ ๊ฑด๊ฐ์?
์์ ์ฌํญ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. https://github.com/cloudhead/less.js/commit/cb789334233e377bd91a17d3118a0424ad167929
@Kalyse ์ ์๊ฒ ์ด๋ฉ์ผ์ ๋ณด๋ด์ฃผ์๊ฒ ์ต๋๊น? [email protected]
๊ฑด๋ฐฐ
pull ์์ฒญ์ ์น์ธํ ์ ์๋ ์ ๋ขฐํ ์ ์๋ ์ถ๊ฐ ๊ฐ๋ฐ์๊ฐ ํ์ํ ๊น์?
@cloudhead ์ ๋ WinLess๋ฅผ ์ฌ์ฉํ์ฌ LESS ์ฝ๋๋ฅผ ์ปดํ์ผํฉ๋๋ค... WinLess๋ less.js์ ์ต์ ๋ฐฐํฌํ๊ณผ ํจ๊ป ์ ๊ณต๋ฉ๋๋ค(https://github.com/marklagendijk/WinLess/issues/14 ์ฐธ์กฐ). ) ์ต์ ๋ฆด๋ฆฌ์ค์ ์ถ๊ฐ๋ฉ๋๊น?
๊ฐ์ฌํฉ๋๋ค(ํ๋ฅญํ ์ ํ).
๊ทธ๋์, ์ด... ์ฐ๋ฆฌ๋ ์ด๋ป๊ฒ ํ๊ณ ์๋์?
@jreading ์ปค๋ฐ cb7893 ์ผ๋ก git์์ ์์ ๋์๋ค๊ณ ์๊ฐํฉ๋๋ค.
์์ ๋ ๊ฒ์ผ๋ก ๋ณด์ด๋ฉฐ(๋๋ ์ต์ํ ์๋ ๋ฌธ์ ๋ ์์) ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ ๋ค๋ฅธ ๋ฒ๊ทธ๊ฐ ์์ ๊ฒ์ ๋๋ค.