# html2scss

> Parse HTML to Sass SCSS structure format.

Latest version **0.8.7** (published 2012-09-21) · 0 weekly downloads

## Install

```sh
npm install html2scss
pnpm add html2scss
yarn add html2scss
bun add html2scss
```

Provides the command `html2scss`.

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.7 |
| Published | 2012-09-21 |
| First published | 2012-09-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ~0.8.8 |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Danny Garcia |
| Maintainers | dannygarcia |
| Keywords | parse, html, scss, sass, dom, jsdom |

## Links

- npm: https://www.npmjs.com/package/html2scss
- Repository: https://github.com/dannygarcia/html-to-scss
- Issues: https://github.com/dannygarcia/html-to-scss/issues
- npm.io page: https://npm.io/package/html2scss

## Dependencies (3)

- [jsdom](https://npm.io/package/jsdom.md) latest
- [colors](https://npm.io/package/colors.md) latest
- [optimist](https://npm.io/package/optimist.md) latest

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.8.7 (latest) — 2012-09-21
- 0.8.5 — 2012-09-10
- 0.8.4 — 2012-09-10
- 0.8.3 — 2012-09-10
- 0.8.2 — 2012-09-10
- 0.8.1 — 2012-09-09
- 0.8.0 — 2012-09-09
- 0.7.8 — 2012-09-09
- 0.7.7 — 2012-09-08
- 0.7.6 — 2012-09-08
- 0.7.5 — 2012-09-07
- 0.7.0 — 2012-09-06
- 0.6.2 — 2012-09-05
- 0.6.1 — 2012-09-05

## README

# HTML to SCSS

[Node.js](nodejs.org) module that parses HTML to Sass SCSS structure format.

An online implementation is on the <a href="http://dannygarcia.github.com/html-to-scss/">GitHub Page</a>.

## Things to Note

The primary purpose of this project is proof-of-concept. Regardless, take the following into consideration if you decide to use this for serious internet business work:

 - The parser is a work in progress.
 - Output accurately represents the DOM.
 - You should follow [SMACCS](http://smacss.com/) for scalability.

## Getting Started

	npm install -g html2scss
	html2scss -i http://news.ycombinator.com

## Options

	-h, --help		this help message
	-i, --input		input file or URL
	-o, --output		[optional] output file
	-C, --Classes		[optional] parse element class names
	-I, --IDs			[optional] parse element IDs

## Example

### Command

	$ html2scss -i 'input.html' -o output.scss -C -I

### input.html

````html
<!doctype html>
<html lang="en">
	<head>
		<title>Example</title>
	</head>
	<body class="home">

		<section class="nav">
			<nav>
				<ul>
					<li><a href="#">Menu</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</section>

		<section class="main content">
			<article id="first">
				<header>
					<h1>Article Title</h1>
				</header>
				<div class="content"></div>
				<footer>
					Publish Date
				</footer>
			</article>
			<article id="second">
				<header>
					<h1>Article Title</h1>
				</header>
				<div class="content"></div>
				<article></article>
				<footer>
					Publish Date
				</footer>
			</article>
		</section>

	</body>
</html>
````

### output.scss

````scss
html {

	head {

		title {

		}

	}

	body {

		&.home {

		}

		section {

			&.nav {

			}

			&.main {

			}

			&.content {

			}

			nav {

				ul {

					li {

						a {

						}

					}

				}

			}

			article {

				&#first {

				}

				&#second {

				}

				header {

					h1 {

					}

				}

				div {

					&.content {

					}

				}

				footer {

				}

				article {

				}

			}

		}

	}

}
````

## MIT License

HTML to SCSS is freely distributable under the terms of the MIT license.

Copyright (c) 2012, Danny Garcia. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---
_Source: https://npm.io/package/html2scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
