Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS divider using :after and :before pseudo elements.
%divider {
&:after, &:before {
display: block;
position: absolute;
}
&:after {
text-transform: none;
text-shadow: none;
@include rem(font-size, 12px);
text-align: center;
color: #EBF7FF;
left: 46%;
bottom: -43px;
height: 16px;
width: 16px;
background: #062F4C;
margin: 0 auto;
padding: 6px;
border-radius: 100%;
}
&:before {
width: 100%;
content: '';
border-bottom: 2px solid #062F4C;
bottom: -30px;
}
}
@mixin divider($text: "or") {
@extend %divider;
&:after { content: $text; }
}
// @include the divider mixin on the element before the division should take place
div {
@include divider("or");
}
@ben-shepherd

This comment has been minimized.

Copy link

commented Jun 19, 2018

I get the following error (sass newbie here)

/*
Error: Undefined mixin 'rem'.
        on line 9 of sass/modules/_divider.scss, in `rem'
        from line 9 of sass/modules/_divider.scss
        from line 3 of sass/partials/base.scss
        from line 1 of sass/main.scss

Backtrace:
sass/modules/_divider.scss:9:in `rem'
sass/modules/_divider.scss:9
sass/partials/base.scss:3
sass/main.scss:1
@pepeloper

This comment has been minimized.

Copy link

commented Jun 28, 2018

@ben-shepherd The following code on line 9 references a mixin called rem.

@include rem(font-size, 12px);

You can just delete that line and/or replace with any font-size you want.
If you want to learn more about mixins you can give a shot to the sass docs at Mixins guide

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.