SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기

✈SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기

 SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기.

되게 거창한 표현같지만 별거 아니다.

다만 SCSS의 구조에 대해서 설명하기 위한 글이다.

위와 같은 경우 텍스트 영역에 링크는 하나다.

마우스오버가 되었을 때 문단 별로 색이 바뀌면 안되고, 전체가 색이 반전이 되어야 한다.

각각 스타일을 주어도 되지만, SCSS에서는 간단하게 처리가 가능하다.

html

	<ul class="latest">
	  <li>
	    <div class="card">
	      <!-- card innerWrap : hold width -->
	      <div class="cardInnerWrap">
	        <div class="overThumb">
	          <span class="thumb card-img-top">
	            <img src="/assets/images/~mockup/s1.png"></span>
	        </div>
	        <div class="card-body"><a href="/pb_contents/publish/publish_view.php">
	            <p class="contentCate">Contents</p>
	            <p class="CotentTitle">스페인하숙 3화</p>
	            <p class="card-text">미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요</p>
	          </a>
	        </div>
	        <!-- card innerWrap : hold width -->
	      </div>
	    </div>
	  </li>

이런 구조일 때

SCSS

SCSS 는 다음과 같이 구성한다.

  .card {
    border: 0 none;
    border-radius: 0;

    .cardInnerWrap {
      display: inline-flex;

      .thumb {
        width: 133px;
        height: 75px;
      }

      .card-body {
        padding: 0 1.25rem;
        width: calc(100% - 150px);

        a {

          &:hover p,
          &:focus p {
            color: #5e7fdc;
          }

          .contentCate {
            color: #AAAAAA;
          }

          .CotentTitle,
          .card-text {
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            color: #555555;
          }
        }
      }
    }
  }
}

치환자 &을 사용해서 :hover와 :focus를 받으면 아래의 P 스타일을 변경하라로 보면 된다.