From 9261ff07388097714c2e10ebacc5df1c2bf15a9f Mon Sep 17 00:00:00 2001
From: Posterfo <i.emrecakmakci@gmail.com>
Date: Tue, 23 Jun 2026 18:36:33 +0300
Subject: [PATCH] docs: add SCSS, Less and Stylus language pages

---
 docs/docs/languages/less.mdx   | 136 +++++++++++++++++++++++++-
 docs/docs/languages/scss.mdx   | 172 ++++++++++++++++++++++++++++++++-
 docs/docs/languages/stylus.mdx | 114 +++++++++++++++++++++-
 3 files changed, 419 insertions(+), 3 deletions(-)

diff --git a/docs/docs/languages/less.mdx b/docs/docs/languages/less.mdx
index a50f83dde0..a5909dc955 100644
--- a/docs/docs/languages/less.mdx
+++ b/docs/docs/languages/less.mdx
@@ -1,3 +1,137 @@
 # Less
 
-TODO...
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+[Less](https://lesscss.org/) (Leaner Style Sheets) is a CSS preprocessor that extends CSS with variables, nesting, mixins, functions and operations. It uses a CSS-like syntax with curly braces and semicolons, so every valid CSS stylesheet is also valid Less.
+
+## Demo
+
+export const lessConfig = {
+  activeEditor: 'style',
+  markup: {
+    language: 'html',
+    content: `<div class="container">
+  <h1>Hello, Less!</h1>
+  <p>This is styled with <strong>Less</strong>.</p>
+  <ul class="features">
+    <li>Variables</li>
+    <li>Nesting</li>
+    <li>Mixins</li>
+  </ul>
+</div>
+`,
+  },
+  style: {
+    language: 'less',
+    content: `@primary: #3182ce;
+@bg: #f0f4f8;
+@radius: 8px;
+
+.flex-center() {
+  display: flex;
+  gap: 1em;
+}
+
+.container {
+  font-family: sans-serif;
+  max-width: 600px;
+  margin: 2em auto;
+  padding: 1.5em;
+  border-radius: @radius;
+  background: @bg;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  h1 {
+    color: #2d3748;
+  }
+
+  p {
+    color: #4a5568;
+    line-height: 1.6;
+  }
+}
+
+.features {
+  .flex-center();
+  list-style: none;
+  padding: 0;
+
+  li {
+    background: @primary;
+    color: white;
+    padding: 0.5em 1em;
+    border-radius: @radius;
+  }
+}
+`,
+  },
+};
+
+<LiveCodes config={lessConfig} />
+
+## Usage
+
+Less code added to the [style editor](../features/projects.mdx#style-editor) is compiled to CSS before being added to the [result page](../features/result.mdx).
+
+Less uses a CSS-like syntax with curly braces and semicolons. Variables are prefixed with `@`, and mixins let you reuse groups of declarations.
+
+For more details about CSS support in LiveCodes, including CSS processors, style imports, CSS modules, and CSS frameworks, see the [CSS feature documentation](../features/css.mdx).
+
+## Loading External Styles
+
+Less supports importing external stylesheets using the `@import` rule. [Bare module](../features/module-resolution.mdx#bare-module-imports) specifiers are resolved to full CDN URLs.
+
+```less
+@import 'bootstrap/less/bootstrap';
+```
+
+:::tip
+
+For more information about loading and importing styles, see the [Style Imports](../features/css.mdx#style-imports) documentation.
+
+:::
+
+## Language Info
+
+### Name
+
+`less`
+
+### Extensions
+
+`.less`
+
+### Editor
+
+`style`
+
+## Compiler
+
+[Less](https://lesscss.org/) is compiled using the official [Less.js](https://lesscss.org/usage/#using-less-in-the-browser) compiler (running in the browser).
+
+### Custom Settings
+
+[Custom settings](../advanced/custom-settings.mdx) added to the property `less` are passed as a JSON object to the Less compiler during compile. Please check the [Less options documentation](https://lesscss.org/usage/#less-options) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "less": {
+    "math": "strict"
+  }
+}
+```
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Links
+
+- [Less Official Website](https://lesscss.org/)
+- [Less Documentation](https://lesscss.org/features/)
+- [Less on GitHub](https://github.com/less/less.js)
+- [CSS feature documentation in LiveCodes](../features/css.mdx)
diff --git a/docs/docs/languages/scss.mdx b/docs/docs/languages/scss.mdx
index 0835c20861..bf4292c404 100644
--- a/docs/docs/languages/scss.mdx
+++ b/docs/docs/languages/scss.mdx
@@ -1,3 +1,173 @@
 # SCSS
 
-TODO...
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+[SCSS](https://sass-lang.com/) (Sassy CSS) is the main syntax of the Sass CSS preprocessor. It uses curly braces and semicolons like CSS, so every valid CSS stylesheet is also valid SCSS. It adds features like variables, nesting, mixins, and functions to CSS.
+
+:::info
+
+Sass has two syntaxes. The **SCSS syntax** (`.scss`), which uses curly braces and semicolons like CSS, is documented here. For the **indented syntax** (`.sass`), see [Sass](./sass.mdx).
+
+:::
+
+## Demo
+
+export const scssConfig = {
+  activeEditor: 'style',
+  markup: {
+    language: 'html',
+    content: `<div class="container">
+  <h1>Hello, SCSS!</h1>
+  <p>This is styled with <strong>SCSS</strong> syntax.</p>
+  <ul class="features">
+    <li>Variables</li>
+    <li>Nesting</li>
+    <li>Mixins</li>
+  </ul>
+</div>
+`,
+  },
+  style: {
+    language: 'scss',
+    content: `$primary: #3182ce;
+$bg: #f0f4f8;
+$radius: 8px;
+
+@mixin flex-center {
+  display: flex;
+  gap: 1em;
+}
+
+.container {
+  font-family: sans-serif;
+  max-width: 600px;
+  margin: 2em auto;
+  padding: 1.5em;
+  border-radius: $radius;
+  background: $bg;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  h1 {
+    color: #2d3748;
+  }
+
+  p {
+    color: #4a5568;
+    line-height: 1.6;
+  }
+}
+
+.features {
+  @include flex-center;
+  list-style: none;
+  padding: 0;
+
+  li {
+    background: $primary;
+    color: white;
+    padding: 0.5em 1em;
+    border-radius: $radius;
+  }
+}
+`,
+  },
+};
+
+<LiveCodes config={scssConfig} />
+
+## Usage
+
+SCSS code added to the [style editor](../features/projects.mdx#style-editor) is compiled to CSS before being added to the [result page](../features/result.mdx).
+
+SCSS uses a CSS-like syntax with curly braces and semicolons. Since it is a superset of CSS, plain CSS works as-is and you can adopt Sass features incrementally.
+
+For more details about CSS support in LiveCodes, including CSS processors, style imports, CSS modules, and CSS frameworks, see the [CSS feature documentation](../features/css.mdx).
+
+## Loading External Styles
+
+SCSS supports loading external stylesheets and modules using `@use`, `@import`, and `meta.load-css()`. [Bare module](../features/module-resolution.mdx#bare-module-imports) specifiers are resolved to full CDN URLs.
+
+### Using `@use`
+
+You can load npm packages with `@use`:
+
+```scss
+@use 'bootstrap/scss/bootstrap' as *;
+```
+
+### Using `@import`
+
+You can import external modules and use their mixins:
+
+```scss
+@import 'sass-utils';
+
+.center {
+  @include block--center;
+  width: fit-content;
+}
+```
+
+### Using `meta.load-css()`
+
+You can dynamically load stylesheets from URLs using the built-in `sass:meta` module:
+
+```scss
+@use 'sass:meta';
+
+@include meta.load-css(
+  'https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/src/livecodes/styles/app.scss'
+);
+```
+
+:::tip
+
+For more information about loading and importing styles, see the [Style Imports](../features/css.mdx#style-imports) documentation.
+
+:::
+
+## Language Info
+
+### Name
+
+`scss`
+
+### Extensions
+
+`.scss`
+
+### Editor
+
+`style`
+
+## Compiler
+
+[SCSS](https://sass-lang.com/) is compiled using the official [Dart Sass](https://sass-lang.com/dart-sass/) compiler (running in the browser).
+
+### Custom Settings
+
+[Custom settings](../advanced/custom-settings.mdx) added to the property `scss` are passed as a JSON object to the Sass compiler during compile. Please check the [Sass JavaScript API documentation](https://sass-lang.com/documentation/js-api/interfaces/stringoptions/) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "scss": {
+    "style": "compressed"
+  }
+}
+```
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Links
+
+- [Sass Official Website](https://sass-lang.com/)
+- [Sass Documentation](https://sass-lang.com/documentation/)
+- [SCSS Syntax](https://sass-lang.com/documentation/syntax/)
+- [Sass (indented syntax) in LiveCodes](./sass.mdx)
+- [CSS feature documentation in LiveCodes](../features/css.mdx)
diff --git a/docs/docs/languages/stylus.mdx b/docs/docs/languages/stylus.mdx
index 7c7f9a7da9..cded409387 100644
--- a/docs/docs/languages/stylus.mdx
+++ b/docs/docs/languages/stylus.mdx
@@ -1,3 +1,115 @@
 # Stylus
 
-TODO...
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+[Stylus](https://stylus-lang.com/) is an expressive, dynamic CSS preprocessor. It supports both an indented, minimal syntax (optional braces, colons and semicolons) and regular CSS-like syntax, and adds variables, nesting, mixins and functions to CSS.
+
+## Demo
+
+export const stylusConfig = {
+  activeEditor: 'style',
+  markup: {
+    language: 'html',
+    content: `<div class="container">
+  <h1>Hello, Stylus!</h1>
+  <p>This is styled with <strong>Stylus</strong>.</p>
+  <ul class="features">
+    <li>Variables</li>
+    <li>Nesting</li>
+    <li>Mixins</li>
+  </ul>
+</div>
+`,
+  },
+  style: {
+    language: 'stylus',
+    content: `primary = #3182ce
+bg = #f0f4f8
+radius = 8px
+
+flex-center()
+  display flex
+  gap 1em
+
+.container
+  font-family sans-serif
+  max-width 600px
+  margin 2em auto
+  padding 1.5em
+  border-radius radius
+  background bg
+  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)
+
+  h1
+    color #2d3748
+
+  p
+    color #4a5568
+    line-height 1.6
+
+.features
+  flex-center()
+  list-style none
+  padding 0
+
+  li
+    background primary
+    color white
+    padding 0.5em 1em
+    border-radius radius
+`,
+  },
+};
+
+<LiveCodes config={stylusConfig} />
+
+## Usage
+
+Stylus code added to the [style editor](../features/projects.mdx#style-editor) is compiled to CSS before being added to the [result page](../features/result.mdx).
+
+Stylus has a very flexible syntax. Braces, colons and semicolons are optional, so you can write terse, indentation-based styles or use a more CSS-like style. Variables are defined by simple assignment (e.g. `primary = #3182ce`).
+
+For more details about CSS support in LiveCodes, including CSS processors, style imports, CSS modules, and CSS frameworks, see the [CSS feature documentation](../features/css.mdx).
+
+## Loading External Styles
+
+Stylus supports importing external stylesheets using the `@import` rule. [Bare module](../features/module-resolution.mdx#bare-module-imports) specifiers are resolved to full CDN URLs.
+
+```stylus
+@import 'normalize.css'
+```
+
+:::tip
+
+For more information about loading and importing styles, see the [Style Imports](../features/css.mdx#style-imports) documentation.
+
+:::
+
+## Language Info
+
+### Name
+
+`stylus`
+
+### Extensions
+
+`.styl`
+
+### Editor
+
+`style`
+
+## Compiler
+
+[Stylus](https://stylus-lang.com/) is compiled using the official [Stylus](https://www.npmjs.com/package/stylus) compiler (running in the browser).
+
+## Code Formatting
+
+Code formatting is not supported for Stylus, as [Prettier](https://prettier.io/) does not support the Stylus syntax.
+
+## Links
+
+- [Stylus Official Website](https://stylus-lang.com/)
+- [Stylus Documentation](https://stylus-lang.com/docs/)
+- [Stylus on GitHub](https://github.com/stylus/stylus)
+- [CSS feature documentation in LiveCodes](../features/css.mdx)