doc: Add Sass language documentation, new compression.#953
doc: Add Sass language documentation, new compression.#953MohamedAbdElwahabOka wants to merge 1 commit intolive-codes:developfrom
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
WalkthroughThis change adds comprehensive documentation for the Sass language by replacing a placeholder with a full LiveCodes-based interactive demonstration. The documentation includes language metadata, compiler details, configuration examples, code formatting guidance, a starter template, and relevant links. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/docs/languages/sass.mdx (1)
35-37: Mixin nameflex-centerdoesn't center anything.The mixin only sets
display: flexandgap: 1em. Naming itflex-centerimplies horizontal/vertical centering (align-items/justify-content). Either rename it (e.g.,flex-row) or add the centering properties to match the intent.♻️ Proposed fix
-=flex-center - display: flex - gap: 1em +=flex-row + display: flex + gap: 1emAnd update the include:
-.features - +flex-center +.features + +flex-rowOr keep the name and add actual centering:
=flex-center display: flex + align-items: center + justify-content: center gap: 1em🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/docs/languages/sass.mdx` around lines 35 - 37, The mixin named `flex-center` only sets `display: flex` and `gap: 1em` so it doesn't actually center content; either rename the mixin to something like `flex-row` to reflect its behavior, or modify the `=flex-center` mixin to add centering properties (e.g., `align-items: center` and `justify-content: center`) and update any places that include `flex-center` accordingly so the name and behavior match.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/docs/languages/sass.mdx`:
- Around line 113-115: The "## Code Formatting" section incorrectly states
Prettier supports .sass; update that section (the "## Code Formatting" heading
in the SASS doc) to state that Prettier does not support the indented .sass
syntax (cite that PostCSS doesn't parse Sass and reference the long‑standing
issue), and either remove the Prettier mention or replace it with a short note
saying "No official formatter available for .sass; consider converting to .scss
or using editor linting tools" following the pattern used in other language docs
that lack formatters.
---
Nitpick comments:
In `@docs/docs/languages/sass.mdx`:
- Around line 35-37: The mixin named `flex-center` only sets `display: flex` and
`gap: 1em` so it doesn't actually center content; either rename the mixin to
something like `flex-row` to reflect its behavior, or modify the `=flex-center`
mixin to add centering properties (e.g., `align-items: center` and
`justify-content: center`) and update any places that include `flex-center`
accordingly so the name and behavior match.
| ## Code Formatting | ||
|
|
||
| Using [Prettier](https://prettier.io/). |
There was a problem hiding this comment.
Prettier does not support .sass (indented syntax) — this claim is incorrect.
Prettier's CSS support is powered by PostCSS, which handles CSS, Less, and SCSS — but as noted in Prettier's own release notes, "postcss right now doesn't parse Sass nor Stylus." This has remained true through subsequent versions. A long-standing open issue (#4948) titled "Understands .scss but not .sass files" confirms that Prettier cannot format the indented .sass syntax.
The "Code Formatting" section should either be removed or corrected to reflect that Prettier is unavailable for this language. Check how other language docs in the project handle the absence of a formatter.
🛠️ Suggested correction
## Code Formatting
-Using [Prettier](https://prettier.io/).
+Code formatting is not supported for the Sass indented syntax. [Prettier](https://prettier.io/) supports SCSS (`.scss`) but not the indented `.sass` syntax.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/docs/languages/sass.mdx` around lines 113 - 115, The "## Code
Formatting" section incorrectly states Prettier supports .sass; update that
section (the "## Code Formatting" heading in the SASS doc) to state that
Prettier does not support the indented .sass syntax (cite that PostCSS doesn't
parse Sass and reference the long‑standing issue), and either remove the
Prettier mention or replace it with a short note saying "No official formatter
available for .sass; consider converting to .scss or using editor linting tools"
following the pattern used in other language docs that lack formatters.
1 participant
What type of PR is this? (check all applicable)
Description
This PR adds the documentation for the Sass (indented syntax) language page, which was previously a placeholder (
TODO...).The new documentation includes:
Related Tickets & Documents
#769
Desktop Recordings
Timeline.1.mp4
Added tests?
Added to documentations?
Summary by CodeRabbit