ํ์ฅ ๋ ์ถ๋ ฅ์ ์ ์ค์ด ์์ต๋๋ค.
<strong i="6">@mixin</strong> sprite-arrow() {
<strong i="7">@extend</strong> %hidden-text;
}
%hidden-text {
text-indent: -999em;
}
// button.scss
.button-left,
.button-right,
.button-plus,
.button-min {
&:after {
<strong i="8">@include</strong> sprite-arrow();
}
}
.banner {
&:after {
<strong i="9">@include</strong> sprite-arrow();
}
}
.calculator {
.btn-down,
.btn-up {
&:after {
<strong i="10">@include</strong> sprite-arrow();
}
}
}
LibSass 3.3.7
.button-left:after,
.button-min:after,
.button-plus:after,
.button-right:after, .banner:after, .calculator .btn-down:after,
.calculator .btn-up:after {
text-indent: -999em;
}
Ruby Sass
.button-left:after,
.button-min:after,
.button-plus:after,
.button-right:after,
.banner:after,
.calculator .btn-down:after,
.calculator .btn-up:after {
text-indent: -999em;
}
@bertusgroenewegen ๋ณด๊ณ ์์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ์์ ์์ ์ ์ ํํ ์ ๋ชฉ์ผ๋ก ๋ฌธ์ ๋ฅผ ์ ๋ฐ์ดํธํ์ต๋๋ค.
@xzyfer ์ด ์ฌ์ํ ๋ฒ๊ทธ๋ฅผ ๊ณ ์น ์ ์๋ค๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค :) ๊ฝค ์ ๋ฐ
@bertusgroenewegen ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ฆ๊ฐ์ ์ธ ๊ณํ์ ์์ต๋๋ค. ์ถ๋ ฅ ์คํ์ผ ๋ฒ๊ทธ๋ ์ถ๋ ฅ ๋์์ ๋ณ๊ฒฝํ์ง ์๊ธฐ ๋๋ฌธ์ ๊ฐ์ฅ ๋ฎ์ ์ฐ์ ์์์ ๋๋ค.
๊ทธ๋ฌ๋ ๊ทธ๋ค์ Sonarqube์์ CSS ์ ์๋ฅผ ๋์ ๋๋ค. :) ๋๋ ๊ทธ๊ฒ์ ๋ง์ด๋ ๋ง์ด๋๋ฅผ ์๊ณ ์์ผ๋ฉฐ ๋น์ ์ ์ด๋ฏธ ๋ง์ ์๊ฐ์ ํฌ์ํ๊ณ ์์ต๋๋ค. ๋๊ฐ๋ก ํฐ ์ปคํผ ๊ธฐ๋ถ๊ธ 10 ์ ๋ก๋ฅผ ์ด ์ ์์ต๋๋ค :)
์ด ๋ฌธ์ ์ +1! ์ด ์์ ์ฌํญ์ด ๋ฐ์ํ๋ฉด ๋๋ก๋ถํฐ ํฐ ์ปคํผ๋ฅผ ์ป์ ์ ์์ต๋๋ค. :) ์ง๊ธ์ Node๋ก ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋ง๋ค๋ ค๊ณ ๋ ธ๋ ฅํ๊ณ ์์ต๋๋ค. ์ฑ๊ณตํ๋ฉด ์ฌ๊ธฐ์์๋ ์ฐ๊ฒฐํ๋ ค๊ณ ํฉ๋๋ค.
Ruby sass 3.5.6 ์ถ๋ ฅ์ด ๋์ผํ๋ฏ๋ก ์ข ๋ฃ :
.button-left:after,
.button-right:after,
.button-plus:after,
.button-min:after, .banner:after, .calculator .btn-down:after,
.calculator .btn-up:after {
text-indent: -999em; }