open-index/open-npm huggingface dataset:
npm package: @realgeeks/sass-flatten
Description: Reduce a Sass (scss) file structure to a single file by inlining partial imports.
Author: Jorge Valdez
Latest version: 0.2.9

# sass-flatten

Reduce a Sass (scss) file structure to a single file by inlining partial imports.

## Installing

```
npm install -g sass-flatten
```

## Usage Examples

It can read from a file

```
sass-flatten some/path/input.scss output.scss
```
or from _stdin_
```
cat some/path/input.scss | sass-flatten --include-path some/path/ > output.scss
```

## API

```js
var flatten = require('sass-flatten');
var input = '@import "some/partial";';
var includePath = 'some/path';

var output = flatten(input, includePath);
```
npm package: @realgenoux/layout-debug-tool
Description: A React component for debugging layout, grid, breakpoints, and spacing.
Author: John Barry
Latest version: 1.1.0

# Layout Debug Tool

Visual debugging tool for React layouts with breakpoint indicators, grid overlays, spacing inspector, and element borders.

## Install

```bash
npm install layout-debug-tool
```

## Quick Start

```tsx
import { LayoutDebug } from 'layout-debug-tool';

function App() {
  return (
    <LayoutDebug>
      <YourApp />
    </LayoutDebug>
  );
}
```

## Features

- **Breakpoint Indicator**: Shows current responsive breakpoint
- **Grid Overlay**: Visualizes your layout grid (customizable columns, width, etc.)
- **Spacing Inspector**: Hover elements to see distances to siblings
- **Element Borders**: Outlines all elements for boundary visualization

## Controls

- **Toggle All**: Press `Shift + G` to show/hide debug UI
- **Options Panel**: Right-click toggle button (bottom-right) for feature settings

## Configuration

```tsx
// Example custom configuration
const config = {
  grid: {
    columns: 24,
    contentWidth: 1440,
    margin: 40,
    gutter: 16,
  },
  appearance: {
    columnColor: '#ff00ff',
  }
};

<LayoutDebug config={config}>
  <YourApp />
</LayoutDebug>
```