Outsmarting the Smart - The Text indent and Word-Wrap Mixin #51

Closed
grayghostvisuals opened this Issue Feb 27, 2013 · 3 comments

Projects

None yet

2 participants

@grayghostvisuals
Contributor

We got a comment in from twitter that asked if it was a little silly to use text-indent in a @mixin like we are doing. A very valid point for sure.

@typeplate Looks great. I do wonder why you’d use such a roundabout way to declare word-wrap and text-indent, though.

— Eevert Saukkokoski (@Ezku) February 26, 2013
Contributor

This is the code in question

word-wrap

@mixin word-wrap($wrap-value) {
    // normal: Indicates that lines may only break at normal word break points.
    // break-word : Indicates that normally unbreakable words may be broken at ...
    // arbitrary points if there are no otherwise acceptable break points in the line.
    word-wrap: $wrap-value;
}

body {
    // normal: Indicates that lines may only break at normal word break points.
    // break-word : Indicates that normally unbreakable words may be broken at ...
    // arbitrary points if there are no otherwise acceptable break points in the line.
    @include word-wrap(break-word);
}

text-indent

$indent-val: 1.5em;
@mixin txt-indent($indent) {
    text-indent: $indent;
}

p {
    & + p {
        @include txt-indent($indent-val);
    }
}
Contributor

Fixed with a Sass placeholder and just using the actual text-indent property instead of some fancy ass mixin.

Ezku commented Feb 27, 2013

Really cool of you to be so responsive. I was actually expecting there to be some very non-obvious reason! :) Cheers for making it simpler.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment