The default browser styles for the bulleted lists are a bit boring and not really pretty. Let’s fix that up with a quick Sass mixin by using em dashes before the text.

Let’s set up some basic variables first. The $list-nice-dash is an option between an en-dash and an em-dash respectively. Use $list-nice-generate-html-class variable for HTML class generation for the list (for further reuse).

$list-nice-dash: "em-dash"; // or "en-dash"
$list-nice-generate-html-class: true;

And here goes the mixin. It utilised the CSS ::before pseudo element and a content attribute to add dashes before the text in the list.

@mixin list-nice($dash: $list-nice-dash) {
   list-style: none none;
   position: relative;
   padding: 0; // reset normalize.css padding
   & > * {
      padding-left: 2em;
      margin-bottom: 1em;
      &:before {
         position: absolute;
         left: .3em;
      }
    }
    @if $dash == em-dash {
    & > * {
       &:before {
          content: ‘\2014';
          }
       }
    }
    @if $dash == en-dash {
    & > * {
       &:before {
          content: ‘\2013';
          }
       }
    }
}

I’ve used the * selector to make the mixin reusable on UL’s, OL’s and DL’s, also on other elements that need to look like a nice list.

To output the CSS class in the .css file we use a simple @if and @include the mixin in the class. Really simple stuff.

@if $list-nice-generate-html-class == true {
    .list-nice {
        @include list-nice;
    }
}

That’s about it, as simple as that.