/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}


nav {
  ul { li {  a {   }  }  }
}

nav ul {  }
nav li {  }
nav a {  }

nva > ul > li > a


nav { width: 200px;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
     display: inline-block;
     a {
      display: block;
      padding: 6px 12px;
       text-decoration: none;
     }
  }
}


div {
font: { ************ }
width: 200px; height: 100px;
}




@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
.danger {
  @include: important-text;
  background-color: green;
}
.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px
    }
  }
}



.section{
    background: white;
    .title{
        color: green;
    }
    .description{
        text-align: center;
    }
    .description_list{
        margin: 20px 0;
        padding: 20px;
        border: 1px solid gray;
        dd{
            font-size: 15px;
            line-height: 20px;
        }
    }
}

.section{background:white}
.section .title{color:green}
.section .description{text-align:center}
.section .description_list{margin:20px 0;padding:20px;border:1px solid gray}
.section .description_list dd{font-size:15px;line-height:20px}


.espresso {
    color: red;
    &:hover {
        color: orange; // 가상 클래스
    }
    &::after {
        color: yellow; // 가상 요소
    }
    &[id="text"] {
        color: green; // 속성 선택자
    }
    &.americano {
        color: blue; // 클래스 선택자
    }
    &#cappuccino {
        color: purple; // 아이디 선택자
    }
}
.espresso{color:red}
.espresso:hover{color:orange}
.espresso::after{color:yellow}
.espresso[id="text"]{color:green}
.espresso.americano{color:blue}
.espresso#cappuccino{color:purple}




.give_me_a {
    &-espresso {
        color: red;
    }
    .please &-americano {
        color: orange;
    }
}



.give_me_a-espresso{color:red}
.please .give_me_a-americano{color:orange}



.espresso {
    color: red;
    .cappuccino {
        color: orange;
        .latte {
            color: green;
            .a_class {
                .b_class {
                    .c_class {
                        .d_class {
                            &.last {
                                color: yellow;
                            }
                        }
                    }
                }
            }
        }
    }
}

.espresso {
    color: red;
}
.espresso .cappuccino {
    color: orange;
}
.espresso .cappuccino .latte {
    color: green;
}
.espresso .cappuccino .latte .a_class .b_class .c_class .d_class.last {
    color: yellow;
}




.latte {
    .cappuccino & {
        font-size: 11px;
    }
}



.cappuccino .latte{font-size:11px}