diff --git a/DESCRIPTION b/DESCRIPTION
index e6b52e1..844830d 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -40,7 +40,7 @@ Imports:
     knitr (>= 1.30),
     servr (>= 0.13),
     xfun (>= 0.18),
-    rmarkdown (>= 2.7)
+    rmarkdown (>= 2.8)
 Suggests: rstudioapi, testit
 License: MIT + file LICENSE
 URL: https://github.com/yihui/xaringan
diff --git a/NEWS.md b/NEWS.md
index 4b20c8f..3b494c7 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -2,6 +2,8 @@
 
 - When an image is empty (e.g., `![]()`), the output format option `self_contained: true` of `xaringan::moon_reader` fails to encode the image (thanks, @Mosk915, #302).
 
+- `css` argument in `moon_reader()` now correctly support `.scss` and `.sass` files following their support in base format `rmarkdown::html_document()` in **rmarkdown** 2.8 (thanks, @abichat, #310).
+
 # CHANGES IN xaringan VERSION 0.20
 
 - Fixed the bug that HTML widgets stopped working with new versions of **htmltools** and **rmarkdown** (thanks, @vcannataro @gadenbuie, #293).
diff --git a/R/render.R b/R/render.R
index db273f6..21cde39 100644
--- a/R/render.R
+++ b/R/render.R
@@ -16,7 +16,10 @@
 #'   \code{.css}, it is supposed to be a built-in CSS file in this package,
 #'   e.g., for \code{css = c('default', 'extra.css')}), it means
 #'   \code{default.css} in this package and a user-provided \code{extra.css}. To
-#'   find out all built-in CSS files, use \code{xaringan:::list_css()}.
+#'   find out all built-in CSS files, use \code{xaringan:::list_css()}. With
+#'   \pkg{rmarkdown} >= 2.8, Sass files (filenames ending with \file{.scss} or
+#'   \file{.sass}) can also be used, and they will be processed by the
+#'   \pkg{sass} package, which needs to be installed.
 #' @param self_contained Whether to produce a self-contained HTML file by
 #'   embedding all external resources into the HTML file. See the \sQuote{Note}
 #'   section below.
@@ -96,7 +99,7 @@ moon_reader = function(
   chakra = 'https://remarkjs.com/downloads/remark-latest.min.js', nature = list(),
   anchor_sections = FALSE, ...
 ) {
-  theme = grep('[.]css$', css, value = TRUE, invert = TRUE)
+  theme = grep('[.](?:sa|sc|c)ss$', css, value = TRUE, invert = TRUE)
   deps = if (length(theme)) {
     css = setdiff(css, theme)
     check_builtin_css(theme)
diff --git a/inst/rmarkdown/templates/xaringan/skeleton/skeleton.Rmd b/inst/rmarkdown/templates/xaringan/skeleton/skeleton.Rmd
index fd72d2c..b47eb19 100644
--- a/inst/rmarkdown/templates/xaringan/skeleton/skeleton.Rmd
+++ b/inst/rmarkdown/templates/xaringan/skeleton/skeleton.Rmd
@@ -521,6 +521,28 @@ See [yihui/xaringan#83](https://github.com/yihui/xaringan/issues/83) for an exam
 
 ---
 
+# CSS (with Sass)
+
+**xaringan** also supports Sass support via **rmarkdown**. Suppose you want to use the same color for different elements, e.g., first heading and bold text. You can create a `.scss` file, say `mytheme.scss`, using the [sass](https://sass-lang.com/) syntax with variables:
+
+```scss
+$mycolor: #ff0000; 
+.remark-slide-content > h1 { color: $mycolor; }
+.remark-slide-content strong { color: $mycolor; }
+```
+
+Then set the `css` option in the YAML metadata using this file placed under the same directory as your Rmd:
+
+```yaml
+output:
+  xaringan::moon_reader:
+    css: ["default", "mytheme.scss"]
+```
+
+This requires **rmarkdown** >= 2.8 and the [**sass**](https://rstudio.github.io/sass/) package. You can learn more about **rmarkdown** and **sass** support in [this blog post](https://blog.rstudio.com/2021/04/15/2021-spring-rmd-news/#sass-and-scss-support-for-html-based-output) and in [**sass** overview vignette](https://rstudio.github.io/sass/articles/sass.html).
+
+---
+
 # Themes
 
 Don't want to learn CSS? Okay, you can use some user-contributed themes. A theme typically consists of two CSS files `foo.css` and `foo-fonts.css`, where `foo` is the theme name. Below are some existing themes:
diff --git a/man/moon_reader.Rd b/man/moon_reader.Rd
index b21160d..83040bb 100644
--- a/man/moon_reader.Rd
+++ b/man/moon_reader.Rd
@@ -26,7 +26,10 @@ character vector \code{css} contains a value that does not end with
 \code{.css}, it is supposed to be a built-in CSS file in this package,
 e.g., for \code{css = c('default', 'extra.css')}), it means
 \code{default.css} in this package and a user-provided \code{extra.css}. To
-find out all built-in CSS files, use \code{xaringan:::list_css()}.}
+find out all built-in CSS files, use \code{xaringan:::list_css()}. With
+\pkg{rmarkdown} >= 2.8, Sass files (filenames ending with \file{.scss} or
+\file{.sass}) can also be used, and they will be processed by the
+\pkg{sass} package, which needs to be installed.}
 
 \item{self_contained}{Whether to produce a self-contained HTML file by
 embedding all external resources into the HTML file. See the \sQuote{Note}