Lists need not be dull, vertical things with a single bullet point per item. You can manipulate them no end! Maybe it annoys you that you can’t get rid of those bullet points that come with every unordered list. No worries: Compass has a great mixin called no-bullets, which removes all the bullet points from a list you’re making. Neat, eh? If you want to remove only one bullet point, just @includeno-bullet in the class.

I know some of you might be shouting, “But that’s so easy!” Well, it can be. It’s so much easier using Compass because of its cross-browser capabilities. No longer do you have to download every browser imaginable to test your code.

We can also use our own custom bullet point designs. Once we’ve imported the correct Compass file, it’s merely a case of using the pretty-bullets mixin, followed by the reference to the image you want to use for the bullet.

If you need to define the size of the bullet, you can add the pixel dimensions of the image after the image name. You can also define the line height and the padding you want, too.^[10]

In the HTML, make sure to apply the class to the <ul> tag so all the items in the list have the special bullets applied to them.

• Make a list.

  compass/project/sass/lists.scss
  ​	​@import​ ​"compass/typography/lists/bullets"​;
  ​
  ​	.flowerbullet {
  ​	​@include​ pretty-bullets(​"star.png"​); }

  This compiles to:

  ​	.flowerbullet {
  ​	margin-left: 0; }
  ​	.flowerbullet ​li​ {
  ​	padding-left: 14px;
  ​	background: ​url('../../../../images/compass/​
  ​	star.png?1320353498​') no-repeat -5.5px -2.5px;​
  ​	list-style-type: none; }

  (The no-repeat …; should be on the same line as the background property, but the line was too wide for the book.)

• See how the list looks in your browser.
  

Related Tasks

• Task 28, ​Making Lists Horizontal​