SJSS Styling Shortcuts

Super JavaScript Stylesheets (SJSS) simplifies styling in Angular applications with a range of shorthand properties, covering everything from padding and margin to flexbox layouts.

Table of Contents

1. Example Usage in a Component
2. Shorthand Properties
3. Padding and Margin
4. Sizes
5. Borders
6. Colors
7. Flexbox
8. Interactive Examples

Example Usage in a Component

Consider styling a div within an Angular component using SJSS shorthand properties:

  import { Component } from "@angular/core";
  import { SjDirective } from "super-jss";

  @Component({
    standalone: true,
    selector: 'app-demo',
    template: `
        <div [sj]="{
          py: '10px',
          px: '20px',
          m: '20px',
          b: '1px solid black',
          d: 'flex',
          fxJustify: 'center',
          fxAItems: 'center',
          bg: '#aa5645'
        }">
          Welcome to Super JSS!
        </div>
      `
})
export class DemoComponent {}

For interactive examples and more detailed usage, visit SJSS on StackBlitz.

Now, let's delve into the details of these shorthand properties.

• note: they are just shorthands, you can use the full css property in camelCase if you prefer.

Padding and Margin

Sizes

Borders

Colors

Flexbox

⬅️ Previous: Basic Usage | Next: Responsive Styling ➡️