diff --git a/docs/_sass/demo.scss b/docs/_sass/demo.scss
index 3172128..dc1e5a9 100644
--- a/docs/_sass/demo.scss
+++ b/docs/_sass/demo.scss
@@ -1,6 +1,6 @@
 @use "bulma/sass/utilities/extends";
 
-.my-control {
+.sass-demo-bulma-content {
   @extend %control;
   background-color: purple;
   color: white;
diff --git a/docs/conf.py b/docs/conf.py
index b9f5297..f5b1561 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -38,6 +38,7 @@
     "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/fontawesome.min.css",
     "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/solid.min.css",
     "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/brands.min.css",
+    "css/demo.css",
 ]
 html_theme_options = {
     "footer_icons": [
diff --git a/docs/extensions/sass/index.rst b/docs/extensions/sass/index.rst
index f2facec..b416551 100644
--- a/docs/extensions/sass/index.rst
+++ b/docs/extensions/sass/index.rst
@@ -33,7 +33,22 @@ There are not configuration options.
 Demo
 ====
 
-.. todo:: Add example.
+This content is used generated CSS from SASS.
+
+.. code:: rst
+
+   .. container:: sass-demo-bulma-content
+
+      This paragraph is colored by "purplel".
+
+.. literalinclude:: ../../_sass/demo.scss
+   :caption: docs/_sass/demo.scss
+
+Result:
+
+.. container:: sass-demo-bulma-content
+
+   This paragraph is colored by "purplel".
 
 Refs
 ====