Help,somebody translate this into common code

Help,somebody translate this into common code
0.0 0

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

#2
<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>
</button>
<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.

#3

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


#4

Could you tell me what the use of this code in CSS is?
$fargglad:#722872;
$morkfarg:#592059;
$morkgra:#888;


#5

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);
}

#6

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.


#7

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