Search code examples
sasscompass-sass

Why is Compass/Scss setting list-style: none by default?


It seems like my scss is turning off ordered list styles by default, which seems a little strange / annoying. Can anyone explain why it would do that?

This is the line that was mysteriously added to my css:

/* line 24, C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

A little splunking showed that was the result of these lines in the _utilities.scss file:

  ol, ul {
    @include reset-list-style; }

// Reset the list style of an element.
@mixin reset-list-style {
  list-style: none; }

I'm fixing this issue by adding:

ol {
  list-style-type: decimal;
}

to my scss file. Would it be better to modify the _utilities.scss file? It sounds like if I did that it might screw up how scss translates into css for ol, ul elements?


Solution

  • If you don't like this behavior, you can take out the reset that's included with Compass. When you start a new compass project, it generates screen.scss with the following:

    /* Welcome to Compass.
     * In this file you should write your main styles. (or centralize your imports)
     * Import this file using the following HTML or equivalent:
     * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
    
    @import "compass/reset";
    

    Just remove or comment out the @import "compass/reset" and use a reset that's to your liking or use something like normalize.css to standardize styles.