Libsass: ํ™•์žฅ ๋œ ์ถœ๋ ฅ์—์„œ โ€‹โ€‹์ƒˆ ์ค„ ๋ˆ„๋ฝ

์— ๋งŒ๋“  2016๋…„ 09์›” 13์ผ  ยท  6์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: sass/libsass

ํ™•์žฅ ๋œ ์ถœ๋ ฅ์— ์ƒˆ ์ค„์ด ์—†์Šต๋‹ˆ๋‹ค.

 <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;
}
Bug - Whitespace Dev - Test Written

๋ชจ๋“  6 ๋Œ“๊ธ€

@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; }
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰