CORE CONCEPTS

CSS Preprocessors

Rasengan.js supports popular CSS preprocessors like Sass, Less, and Stylus. These tools make writing CSS easier by adding features like variables, nested rules, and functions.

Using a Preprocessor

To use a preprocessor, install the required package and create a stylesheet with the correct file extension. Then, import the file into your components.

Sass (.scss / .sass)

Sass adds features like variables and nesting to CSS. Rasengan.js supports it once you install the sass package.

1. Install Sass

Terminal

bashnpm install --save-dev sass

2. Create a Sass File

MyComponent.scss

scss$primary-color: #333;
 
.my-component {
  color: $primary-color;
}

3. Import It in a Component

MyComponent.jsx

jsximport "./MyComponent.scss";
 
export default function MyComponent() {
  return <div className="my-component">Hello, world!</div>;
}

Using Sass with CSS Modules

CSS Modules prevent class name conflicts by scoping styles locally. Use the .module.scss extension:

MyComponent.module.scss

scss$primary-color: #333;
 
.component {
  color: $primary-color;
}

MyComponent.jsx

jsximport styles from "./MyComponent.module.scss";
 
export default function MyComponent() {
  return <div className={styles.component}>Hello, world!</div>;
}

Less (.less)

Less is another CSS preprocessor similar to Sass but uses @ for variables.

1. Install Less

Terminal

bashnpm install --save-dev less

2. Create a Less File

MyComponent.less

less@primary-color: #333;
 
.my-component {
  color: @primary-color;
}

3. Import It in a Component

MyComponent.jsx

jsximport "./MyComponent.less";
 
export default function MyComponent() {
  return <div className="my-component">Hello, world!</div>;
}

Stylus (.styl / .stylus)

Stylus is a flexible preprocessor that allows cleaner, indentation-based syntax.

1. Install Stylus

Terminal

bashnpm install --save-dev stylus

2. Create a Stylus File

MyComponent.styl

stylprimary-color = #333
 
.my-component
  color primary-color

3. Import It in a Component

MyComponent.jsx

jsximport "./MyComponent.styl";
 
export default function MyComponent() {
  return <div className="my-component">Hello, world!</div>;
}

Tailwind CSS

Optimizing Images