SCSS 노트 2 - 중첩

중첩 {}
상감은 아래와 같이 자신의 스타일을 먼저 쓰고 하위 요소를 상감한다.
덧붙이는 것은 3층을 초과하지 마라. 그렇지 않으면 이해하기 어려운 코드가 생길 것이다.

#a {
  float: right;

  .nav {
    float: left;
    color: red;

    ul {
      width: 400px;

      li {
        font-size: 30px;

        a {
          color: blue;
        }
        &.active {
          font-weight: bold;
        }
      }
    }
  }
}

주 & 기호, 부모 요소 자리 표시자라고 하는데, 부모 요소 자리 표시자가 없으면 다음과 같습니다.

#a .nav ul li .active {
   font-weight: bold;
}

#a .nav ul li .active는 어떤 원소를 가리키나요?리 아래의 모든 원소 중class는active의 원소를 가리킨다. 이것은 우리의 본의가 아니다. 우리의 본뜻은ul아래의 모든 리 중class는active의 리이다.그래서 이렇게 쓰면 안돼.현재 & 기호를 붙이면 해석이 다음과 같습니다.

#a .nav ul li.active {
   font-weight: bold;
}

이렇게 하면 요구에 부합된다.그래서 & 기호는 부모 요소를 가리킨다.active는 리의 하위 요소가 아니라 리 자체의 css 상태일 때 & 기호를 사용해야 합니다.무릇 두 개의 선택부호를 한데 연결시켜야 하는 장소는ele를 포함한다.class,ele:active 등등 모두 적용 &.
원소의 스타일이 다른 용기에 지정된 스타일이 있을 때, 플러그인 선택기를 사용하여 같은 곳에 유지할 수 있습니다..no-opacity &는 .no-opacity .foo에 해당한다.

.foo {
  // …

  .no-opacity & {
    display: none;
  }
}

진급: 그룹 선택기의 쓰기
만약 부모 원소가.container, 서브 요소는 h1, h2, h3이 있는데 그들의 줄 높이는 모두 1.5em입니다. 어떻게 씁니까?두 가지 쓰기 방법이 있습니다.

.container h1, .container h2, .container h3 {
  line-height: 1.5em;
}

.container {
  h1, h2, h3 {
    line-height: 1.5em;
  }
}

분명히 첫 번째는 N번을 반복했다.container, 일종의 어리석은 문법, 아래의 문법이야말로 과학적이다.
한 마디로 하면 어떤 일급 선택기든지 조합 선택기로 쓸 수 있다.
진급: 하위 조합 선택기와 동층 조합 선택기:>,+와~
하위 조합 선택기의 뜻은 #id>li 목록이 있다는 것이다. 만약 당신이 #id에 어떤 규칙도 설정할 필요가 없고 li에 규칙만 설정할 필요가 없다는 것을 명확히 알고 있다면 아래의 모양으로 쓸 필요가 없다.

#id {
  li {
    ......
  }
}

아래쪽만 이렇게 하면 돼요.말하자면 >은SCSS가 아니라 원생 css의 문법이다.

#id > li {
  ......
}

마찬가지로 이웃 선택기(E+F)와 이웃 선택기(E~F)도 직접 사용할 수 있다.하지만 SASS 는 더 유연한 접근 방식을 가지고 있습니다.
1. F를 괄호 안에 쓰고 +와~도 안에 넣는다.괄호 안의 원소가 틀림없이 하위 원소일 뿐만 아니라, 뒷부분 원소일 수도 있다는 것을 기억하십시오.2、 F를 괄호 안에 쓰지만 +와 ~는 밖에 두세요.다음dl>은 >을 밖으로 내보내면 몇 개 덜 두드릴 수 있습니다>.3. 만약 모두 큰 괄호 밖에 있다면 그것은 일반적인 CSS의 쓰기 방법이다.

article {
    ~ article {
        border-top: 1px dashed #ccc
    }
    > section {
        background: #eee
    }
    dl > {
        dt {
            color: #333
        }
        dd {
            color: #555
        }
    }
    nav + & {
        margin-top: 0
    }
}

진급: 속성명도 뜯을 수 있고, 대괄호로 장착!
이것은 좀 까다롭다. 무릇 중선을 긋는 속성명은 모두 뜯어서 큰 괄호로 끼워 넣으면 너를 게으르게 할 수 있다.
border-style의 앞부분을 블록 밖으로 쓰고 뒤에 사칭을 붙이고 뒷부분을 괄호 안에 쓰면 된다.나중에 해석할 때, 해석기는 자동으로 조립될 것이다.
짝퉁 붙이는 것을 절대 잊어서는 안 된다. 짝퉁 붙이는 것을 잊으면 가장 간단한 끼워넣기가 되고 모두 틀렸다.

nav {
    border: {
        style: solid;
        width: 1px;
        color: #ccc;
    }
}

더 복잡한 것은 다음과 같다. 바깥쪽은 정상적인 간략한 속성과 그 값이고 뒤에는 큰 괄호가 있다. 큰 괄호 안에는 몇 개의 세분화된 속성의 후반 명칭과 값을 설명할 수 있다.

nav {
    border: 1px solid #ccc {
        left: 0px;
        right: 0px;
    }
}

해결 후:

nav {
    border: 1px solid #ccc;
    border-left: 0px;
    border-right: 0px;
}