Help,somebody translate this into common code

 button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false') Toggle navigation
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
<nav id="navbar" class="collapse navbar-collapse" role="navigation"></nav>

This is Pug or Slim or similar?

NOTE the indentation is important - you’ve just copy pasted as text here, so I’ve guessed. Indentation denotes nesting.

  • The first item is the element nav becomes <nav></nav>.
  • # is id: nav#navbar becomes <nav id="navbar"></nav>.
  • . is class: nav.collapse becomes <nav class="collapse"></nav>.
  • The other attributes go in brackets, key=value seperated by commas (role, data-attribute etc - `(name1=‘value1’, name2=‘value2)’).
  • Then a space and the text to go inside the element, or a new, indented line for something to be nested inside.
  • Things on the same level of indentation are siblings.
1 Like

thank you!ありがとう!谢谢!you help me a lot!

Could you tell me what the use of this code in CSS is?

They’re Sass variables, you assign values to variables and you can reuse them throughout your code. Like

h1 {
  color: $fargglad;

Equiv in pure CSS is

:root {
  --fargglad: #722872;

h1 {
  color: var(--fargglad);

I’ve edited your original post so that it shows the indentations for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


OK, I got it,I’m new here,there are a lot of things I need to learn,thanks for your guidance.