picocss / picocss.com

Pico CSS documentation
https://picocss.com
Other
17 stars 21 forks source link

wrong scss example in "Landmarks & section"? #26

Closed gregsadetsky closed 4 hours ago

gregsadetsky commented 3 weeks ago

the documentation for "Landmarks & section", specifically relating to the Root container, has this scss:

/* Custom Class-less version for React */
@use "pico" with (

  // Define the root element used to target <header>, <main>, <footer>
  // with $enable-semantic-container and $enable-responsive-spacings
  $semantic-root-element: "#root";

  // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
  $enable-semantic-container: true;

  // Enable .classes
  $enable-classes: false;
)

however, as far as I can tell, there are syntax problems with this example. I had to change the ; to commas at the end of the first 2 statements to make this work.

the scss documentation seems to confirm this:

[...] To load a module with configuration, write @use <url> with (<variable>: <value>, <variable>: <value>). [...]

specifically, notice that it is <variable>: <value>, <variable>: <value> i.e. variable+values are separated by commas.

cheers

p.s. github's own syntax highlighting seems to agree -- the semicolons above are shown in red..!

lucaslarroche commented 4 hours ago

@gregsadetsky, thanks a lot!