Help,somebody translate this into common code

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.
1 Like
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);
}
7

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