This is the Sass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.

  • By John Albin Wilkins
  • Last update: Dec 21, 2022
  • Comments: 16

normalize-scss

Latest versions

For use with… normalize-scss version
Sass 3.4 or libSass 8.0.0
combining normalize.css v7.0.0 with v1.1.3
Compass or Bower 7.0.0
combining normalize.css v7.0.0 with v1.1.3 (last version with Compass and Bower support)
Ruby Sass 3.3 3.0.3
combining normalize.css v3.0.3 with v1.1.3
Ruby Sass 3.2 2.2.0+normalize.2.1.3
combining normalize.css v2.1.3 with v1.1.3

The Sass port of normalize.css

This project is the Sass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers. This port aims to use a light dusting of Sass to make Normalize even easier to integrate with your website. To learn about why Normalize.css is so amazing, skip to the "normalize.css" section below.

This Sass port currently adds:

  • Vertical rhythm mixins: Allowing you to alter the font-size, line-height and margins in Normalize’s output without hacking the library.
  • Optional Eyeglass support.
  • Several ready-to-fork versions that integrate typography Sass modules like Typey, or style guides built with KSS.

normalize.css v5

A modern alternative to CSS resets

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.

The project relies on researching the differences between default browser styles in order to precisely target only the styles that need or benefit from normalizing.

View the test file

What does it do?

  • Preserves useful defaults, unlike many CSS resets.
  • Normalizes styles for a wide range of elements.
  • Corrects bugs and common browser inconsistencies.
  • Improves usability with subtle modifications.
  • Explains what code does using detailed comments.

Install

Install using one of the following methods:

  • Download directly from the project page.
  • Install with npm: npm install --save normalize-scss
  • Install with Ruby Gem: gem install normalize-scss
    and, optionally, add require "normalize-scss" to your config.rb file. Note: if you want to alter the _normalize.scss file after installation (see "how to use it" below), you can use the gem list --details normalize-scss command to show you where the normalize-scss files were installed.

How to use it

There is a fantastic introduction to the project and brief instructions how to use it in the About normalize.css article.

You can use the Sass port of Normalize in one of several methods, following the "About normalize.css" article's suggestions:

Approach 1: Download and use normalize-scss as a starting point for your own project's base Sass, customising the values to match the design's requirements. (The best approach, IMO.)

  1. Copy the normalize-scss files to your sass directory so that you can alter it as you include it in your project. To aid with this method, normalize-scss includes several ready-made "fork" versions: * fork-versions/default - Fork for libSass or Ruby Sass * fork-versions/typey - Fork with Typey * fork-versions/typey-chroma-kss - Fork with Typey, Chroma and KSS

Approach 2: Install and include normalize-scss untouched and then build upon it, overriding the defaults later in your Sass when necessary. Just import normalize-scss like any normal Sass module by:

  1. Set variables to override the default normalize-scss variables.
  2. (Optionally) add an additional [path to]/normalize-scss/sass import path for your Sass compiler, e.g. node-sass' includePaths option or Ruby Sass' --load-path option.
  3. Import with @import "normalize"; or with @import "[path to]/normalize-scss/sass/normalize"; (if you skipped step 2.)
  4. Output the CSS rules with @include normalize();

Alternatively, you can import normalize-scss immediately into your main Sass file without needing to use the normalize() mixin by:

  1. (Optionally) set variables to override the default normalize-scss variables.
  2. (Optionally) add an additional [path to]/normalize-scss/sass import path for your Sass compiler, e.g. node-sass' includePaths option or Ruby Sass' --load-path option.
  3. Import with @import "normalize/import-now"; or with @import "[path to]/normalize-scss/sass/normalize/import-now"; (if you skipped step 2.)

Note: if you use wiredep, normalize-scss's bower.json points at the normalize/import-now Sass partial. If you don't wish to immediately output the CSS, you will need to override the Sass partial that wiredep grabs from normalize-scss.

Browser support

  • Chrome (last four)
  • Edge (version 25 and later)
  • Firefox (last four)
  • Firefox ESR
  • Internet Explorer 9+
  • Opera (last four)
  • Safari (last four)

Extended details and known issues

Additional detail and explanation of the esoteric parts of normalize.css.

pre, code, kbd, samp

The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source.

sub, sup

Normally, using sub or sup affects the line-box height of text in all browsers. Source.

svg:not(:root)

Adding overflow: hidden fixes IE9's SVG rendering. Earlier versions of IE don't support SVG, so we can safely use the :not() and :root selectors that modern browsers use in the default UA stylesheets to apply this style. Source.

select

By default, Chrome on OS X and Safari on OS X allow very limited styling of select, unless a border property is set. The default font weight on optgroup elements cannot safely be changed in Chrome on OSX and Safari on OS X.

[type="checkbox"]

It is recommended that you do not style checkbox and radio inputs as Firefox's implementation does not respect box-sizing, padding, or width.

[type="number"]

Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default to text.

[type="search"]

The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can't control font, padding, border, or background. In Chrome and Safari on Windows you can't control border properly. It will apply border-width but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying -webkit-appearance: textfield addresses these issues without removing the benefits of search inputs (e.g. showing past searches). Safari (but not Chrome) will clip the cancel button on when it has padding (and textfield appearance).

Contributing

Please read Normalize.css' contributing guidelines.

Updates to most CSS rules should be reported to the upstream Normalize.css project. Updates to the Sass should be reported in the Normalize-scss project.

Acknowledgements

Normalize.css is a project by Nicolas Gallagher, co-created with Jonathan Neal.

This Sass port is a project by John Albin Wilkins.

Other ports of Normalize.css

For the record, there are several other Sass ports as well. Including:

Build Status

Github

https://github.com/JohnAlbin/normalize-scss

Comments(16)

  • 1

    Importing file (support-for) does not exist

    The first import that normalize does is for a file that does not exist. Any ideas?

    It seems that in this commit f32a7fdae314297ee053d6588d7ea913aeb7fb4b , it was removed from the normalized folder.

  • 2

    Make compass an optional dependency

    Since the people cry for a world without dependencies, we should drop compass. Or, at least, we should stick together a version without compass.

    For sure, there are a lot of great forks out there, but you are the leader at NPM, RubyGem etc.

    After a bit of research I found this gist, which could help us: https://gist.github.com/ry5n/2026666

  • 3

    Update eslint to the latest version 🚀

    Version 4.1.0 of eslint just got published.

    Dependency eslint
    Current Version 3.19.0
    Type devDependency

    The version 4.1.0 is not covered by your current version range.

    Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

    I recommend you look into these changes and try to get onto the latest version of eslint. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.


    Release Notes v4.1.0
    • e8f1362 Docs: Remove wrong descriptions in padded-block rule (#8783) (Plusb Preco)
    • 291a783 Update: enforceForArrowConditionals to no-extra-parens (fixes #6196) (#8439) (Evilebot Tnawi)
    • a21dd32 New: Add overrides/files options for glob-based config (fixes #3611) (#8081) (Sylvan Mably)
    • 879688c Update: Add ignoreComments option to no-trailing-spaces (#8061) (Jake Roussel)
    • b58ae2e Chore: Only instantiate fileEntryCache when cache flage set (perf) (#8763) (Gyandeep Singh)
    • 9851288 Update: fix indent errors on multiline destructure (fixes #8729) (#8756) (Victor Hom)
    • 3608f06 Docs: Increase visibility of code of conduct (fixes #8758) (#8764) (Kai Cataldo)
    • 673a58b Update: support multiple fixes in a report (fixes #7348) (#8101) (Toru Nagashima)
    • 7a1bc38 Fix: don't pass default parserOptions to custom parsers (fixes #8744) (#8745) (Teddy Katz)
    • c5b4052 Chore: enable computed-property-spacing on ESLint codebase (#8760) (Teddy Katz)
    • 3419f64 Docs: describe how to use formatters on the formatter demo page (#8754) (Teddy Katz)
    • a3ff8f2 Chore: combine tests in tests/lib/eslint.js and tests/lib/linter.js (#8746) (Teddy Katz)
    • b7cc1e6 Fix: Space-infix-ops should ignore type annotations in TypeScript (#8341) (Reyad Attiyat)
    • 46e73ee Fix: eslint --init installs wrong dependencies of popular styles (fixes #7338) (#8713) (Toru Nagashima)
    • a82361b Chore: Prevent package-lock.json files from being created (fixes #8742) (#8747) (Teddy Katz)
    • 5f81a68 New: Add eslintIgnore support to package.json (fixes #8458) (#8690) (Victor Hom)
    • b5a70b4 Update: fix multiline binary operator/parentheses indentation (#8719) (Teddy Katz)
    • ab8b016 Update: fix MemberExpression indentation with "off" option (fixes #8721) (#8724) (Teddy Katz)
    • eb5d12c Update: Add Fixer method to Linter API (#8631) (Gyandeep Singh)
    • 26a2daa Chore: Cache fs reads in ignored-paths (fixes #8363) (#8706) (Victor Hom)
    Commits

    The new version differs by 141 commits.

    • 7d9e3be 4.1.0
    • e727b7b Build: changelog update for 4.1.0
    • e8f1362 Docs: Remove wrong descriptions in padded-block rule (#8783)
    • 291a783 Update: enforceForArrowConditionals to no-extra-parens (fixes #6196) (#8439)
    • a21dd32 New: Add overrides/files options for glob-based config (fixes #3611) (#8081)
    • 879688c Update: Add ignoreComments option to no-trailing-spaces (#8061)
    • b58ae2e Chore: Only instantiate fileEntryCache when cache flage set (perf) (#8763)
    • 9851288 Update: fix indent errors on multiline destructure (fixes #8729) (#8756)
    • 3608f06 Docs: Increase visibility of code of conduct (fixes #8758) (#8764)
    • 673a58b Update: support multiple fixes in a report (fixes #7348) (#8101)
    • 7a1bc38 Fix: don't pass default parserOptions to custom parsers (fixes #8744) (#8745)
    • c5b4052 Chore: enable computed-property-spacing on ESLint codebase (#8760)
    • 3419f64 Docs: describe how to use formatters on the formatter demo page (#8754)
    • a3ff8f2 Chore: combine tests in tests/lib/eslint.js and tests/lib/linter.js (#8746)
    • b7cc1e6 Fix: Space-infix-ops should ignore type annotations in TypeScript (#8341)

    There are 141 commits in total.

    See the full diff

    Not sure how things should work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Your Greenkeeper Bot :palm_tree:

  • 4

    Undefined variable: "$px-fallback".

    From a fresh Bower install, and import of the normalize.scss files the following error is returned

    Error: Undefined variable: "$px-fallback".
        on line 42 of bower_components/normalize-scss/fork-versions/default/_vertical-rhythm.scss, in `normalize-rhythm'
        from line 58 of bower_components/normalize-scss/fork-versions/default/_vertical-rhythm.scss, in `normalize-margin'
        from line 185 of bower_components/normalize-scss/fork-versions/default/_normalize.scss
        from line 2 of sass/style.scss
    
  • 5

    Moved but not re-published to bower?

    I was hoping to use this version of normalize as my default install for a static site generator I am working on, but then today as I was about to publish the first stable version and I could no longer compile the sass.

    I was wondering if there was a new name in the bower registry? I guess I can specify the repo directly, but my yeoman generator will look pretty silly when the prompt stretches off the screen saying:

    [?] Bower packages to install, comma separated: angular,[email protected]:JohnAlbin/normalize-scss.git
    

    Any suggestions? Or can you re-publish on bower?

  • 6

    Error during compilation from _normalize.scss (rhythm mixin problem)

    Hi,

    I have installed the partial _normalize.scss but the compilation failed :

    error sass/styles.sass (Line 192 of sass/vendors/_normalize.scss: 0.15em/px isn't a valid CSS value.)
    

    It's looking like a problem with the rhythm mixin but I don't understand why...

    Any idea ?

  • 7

    Upgrade to Compass 1.0.0's support and vertical-rhythm modules

    At least it looks that way: http://beta.compass-style.org/CHANGELOG/

    When running alpha versions of Compass 1.0.0 a warning will be issued due to the fact that _normalize.scss sets $legacy-support-for-ie6 and $legacy-support-for-ie7. I solved this problem by simply moving the variables below the compass imports around line 42 since they are still expected later on in _normalize.scss. Of course, for people wanting legacy IE support this probably isn't the best solution as Compass itself isn't being configured.

    The warning issued when compiling:

    WARNING: Compass has changed how browser support is configured. See the CHANGELOG for more details. The following configuration variables are no longer supported: $legacy-support-for-ie6, $legacy-support-for-ie7.

  • 8

    Removed margins from ul ul

    Much like with my other pull request, I could be barking up the wrong tree here, but I figured, for code such as the example below, this would prevent huge, unneeded, margins on each of the inner lists:

    <ul>
        <li>TV Series
            <ul>
                <li>TV Series DVD</li>
                <li>TV Series Bluray</li>
            </ul>
        </li>
        <li>Movies
            <ul>
                <li>DVD Movies</li>
                <li>Bluray Movies</li>
            </ul>
        </li>
        <li>Games
            <ul>
                <li>PC
                    <ul>
                        <li>Download from Steam</li>
                        <li>Physical Media</li>
                    </ul>
                </li>
                <li>Xbox 360</li>
                <li>Playstation 3</li>
            </ul>
        </li>
    </ul>
    

    (Or maybe this should be submitted to the original normalize.css project, I don't know)

  • 9

    Error: 'The normalize vertical-rhythm module only supports px inputs. The typey library is better.'

    ERROR in ./src/sass/mvxtheme.scss
    Module build failed: ModuleBuildError: Module build failed:
        @error "The normalize vertical-rhythm module only supports px inputs. The typey library is better.";
       ^
          The normalize vertical-rhythm module only supports px inputs. The typey library is better.
          in /mnt/c/Users/garfi/Documents/GitHub/.../node_modules/normalize-scss/sass/normalize/_vertical-rhythm.scss (line 10, column 5)
        at runLoaders (/mnt/c/Users/garfi/Documents/GitHub/.../node_modules/webpack/lib/NormalModule.js:194:19)
        at /mnt/c/Users/garfi/Documents/GitHub/.../node_modules/loader-runner/lib/LoaderRunner.js:364:11
        at /mnt/c/Users/garfi/Documents/GitHub/.../node_modules/loader-runner/lib/LoaderRunner.js:230:18
        at context.callback (/mnt/c/Users/garfi/Documents/GitHub/.../node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at Object.asyncSassJobQueue.push [as callback] (/mnt/c/Users/garfi/Documents/GitHub/.../node_modules/sass-loader/lib/loader.js:55:13)
        at Object.<anonymous> (/mnt/c/Users/garfi/Documents/GitHub/.../node_modules/async/dist/async.js:2244:31)
        at Object.callback (/mnt/c/Users/garfi/Documents/GitHub/.../node_modules/async/dist/async.js:906:16)
        at options.error (/mnt/c/Users/garfi/Documents/GitHub/.../node_modules/node-sass/lib/index.js:294:32)
     @ ./src/index.js 3:0-26
    

    mvxtheme.scss

    @import '~normalize-scss/sass/_normalize.scss';
    @include normalize();
    
  • 10

    broken bower.json

    Hi,

    maybe I'm completely lost, but when I look at your bower.json the normalize/_import-now.scss file is marked as main file.

    There are some instructions on how to use your lib, but there is no real scenario on how to use it with bower, except of the note that you have to override some things to use it with wiredep.

    We want to use css libs from our project by just running bower install and adding an @import line in our main css.

    In your case, the main file is in the ./normalize Folder. Normally other css libraries use the main file in the root namespace but you don't, so we can't use your Project in the same generic way with Sass include paths.

    If there is nothing against from your side using the normalize-scss/sass/_normalize.scss instead of normalize-scss/sass/normalize/_import-now.scss you'd help us and properly all wiredeps user as well.

    If you agree to that, I can open a PR.

    Greets `Alwin Mark

  • 11

    Unable to install 3.0.0-alpha.2+normalize.3.0.0 via Bower

    When following the instructions to install/use the latest branch with support for normalize.css v3, Sass 3.3 and Compass 1.0 via bower there is an error resolving the target version. Presumably because the tag is missing?

    $ bower install --save normalize.scss#3.0.0-alpha.2+normalize.3.0.0
    bower normalize.scss#3.0.0-alpha.1+normalize.2.1.3       not-cached git://github.com/JohnAlbin/normalize-scss.git#3.0.0-alpha.1+normalize.2.1.3
    bower normalize.scss#3.0.0-alpha.1+normalize.2.1.3          resolve git://github.com/JohnAlbin/normalize-scss.git#3.0.0-alpha.1+normalize.2.1.3
    bower normalize.scss#3.0.0-alpha.2+normalize.3.0.0       not-cached git://github.com/JohnAlbin/normalize-scss.git#3.0.0-alpha.2+normalize.3.0.0
    bower normalize.scss#3.0.0-alpha.2+normalize.3.0.0          resolve git://github.com/JohnAlbin/normalize-scss.git#3.0.0-alpha.2+normalize.3.0.0
    bower normalize.scss#3.0.0-alpha.1+normalize.2.1.3         download https://github.com/JohnAlbin/normalize-scss/archive/3.0.0-alpha.1+normalize.2.1.3.tar.gz
    bower normalize.scss#3.0.0-alpha.1+normalize.2.1.3          extract archive.tar.gz
    bower normalize.scss#3.0.0-alpha.1+normalize.2.1.3         resolved git://github.com/JohnAlbin/normalize-scss.git#3.0.0-alpha.1+normalize.2.1.3
    bower normalize.scss#3.0.0-alpha.2+normalize.3.0.0     ENORESTARGET No tag found that was able to satisfy 3.0.0-alpha.2+normalize.3.0.0
    
    Additional error details:
    Available versions: 3.0.0-alpha.1+normalize.2.1.3, 2.2.0+normalize.2.1.3, 2.1.3, 2.1.2, 2.1.0, 2.0.1, 2.0.1+build.2
    

    I was able to get the version I wanted using the following command:

    $ bower install --save git://github.com/JohnAlbin/normalize-scss#master
    

    in case it helps:

    $ npm -v && bower -v && uname -v
    1.3.24
    1.2.8
    Darwin Kernel Version 13.0.0: Thu Sep 19 22:22:27 PDT 2013; root:xnu-2422.1.72~6/RELEASE_X86_64
    
  • 12

    Replace deprecated slash division by math.div() to prepare for Dart Sass 2.0.0

    Since Dart Sass 1.33.0 deprecation warnings regarding using slash for divisions are printed to the console when using normalize-scss in the same project. In order to prepare for the Dart Sass 2.0.0 release and to make sure that normalize-scss can be used in the future, the affected code parts have to be updated.

    A blog post on the topic can be found here: https://sass-lang.com/documentation/breaking-changes/slash-div.

    The issue has already been reported in the main repository here: https://github.com/JohnAlbin/normalize-scss/issues/148.

    This PR now aims to resolve that issue.

  • 13

    dart-sass: deprecation warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

    Expected behavior

    No deprecation warnings in the console.

    Actual behavior

    dart-sass (v 1.34.0) is reporting deprecation warnings.

    DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

    Recommendation: math.div($value, $relative-to)

    More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷ 16 │ @return ($value / $relative-to) * 1em; │ ^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/normalize-scss/sass/normalize/_vertical-rhythm.scss 16:14 normalize-rhythm() node_modules/normalize-scss/sass/normalize/_vertical-rhythm.scss 27:14 normalize-font-size() node_modules/normalize-scss/sass/normalize/_normalize-mixin.scss 108:7 normalize()

  • 14

    Change variables without forcing vertical-rhythm

    If $normalize-vertical-rhythm is set to false manually we should be able to change the value of variable without the $normalize-vertical-rhythm being overridden here:

      // If we've customized any font variables, we'll need extra properties.
      @if $base-line-height != 24px
        or $base-unit != 'em'
        or $h2-font-size != 1.5  * $base-font-size
        or $h3-font-size != 1.17 * $base-font-size
        or $h4-font-size != 1    * $base-font-size
        or $h5-font-size != 0.83 * $base-font-size
        or $h6-font-size != 0.67 * $base-font-size {
        $normalize-vertical-rhythm: true !global;
      }
    

    The logic should first detect if $normalize-vertical-rhythm was set by the user and only overwrite it if not. A better default value, therefore, would be null. You could then check against null in the above and only force to true if so. If false, then honour the users choice and don't output.

    The checks for @if $normalize-vertical-rhythm { would all still work as intended.

  • 15

    Update auto-changelog to the latest version 🚀


    ☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io


    The devDependency auto-changelog was updated from 1.16.4 to 2.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: cookpete License: MIT

    Find out more about this release.


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

  • 16

    dart-sass: deprecation warning: !global assignments won't be able to declare new variables

    Expected behavior

    No deprecation warnings in the console.

    Actual behavior

    dart-sass (v 1.17.2) is reporting deprecation warnings.

    DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
    declare new variables. Consider adding `$_normalize-exclude: null` at the top level.
    

    Steps to reproduce the behaviour

    Use the official sass module instead of an unofficial node-sass module to compile the code.