풀스택 개발 공부로그

SCSS(SASS) - variable, nesting

06 Nov 2019 | CSS WEB

SASS(SCSS)

Sass: Syntactically Awesome Style Sheets Ch02-01 Sass (SCSS) - 변수 (Variables) - YouTube

variable

$bg-color: red;


body {
    background-color: blanchedalmond;
}


#box1 {
    color: yellow;
    background-color: $bg-color;
    width: 100px;
}

nested

첫번 째

    <div id="box1">
        box1<br>
        <a href="#">button1</a>
        <div id="box2">
            box2 <br>
            <a href="#">buttton2</a>
        </div>
    </div>

  
  #box1 {
    font-size: 40px;
    background-color: #ffcccc;
    
    border-radius: 20px;
    border: 3px solid #f00;
    box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.75);

    & > a {
        color:blue;
        text-decoration: none;

        &:hover {
            color: #000;
            text-decoration: underline;
          }
      }
    &:hover {
        background-color: #ccc;
      } 

  }
  
  #box1 #box2 {
    font-size: 20px;
    background-color: #e9e9e9;
    
    border-radius: 20px;
    border: 3px solid #f00;
    box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.75);

    & > a {
        color: #ee6633;
        text-decoration: none;
        
        &:hover {
            color: #a22;
            text-decoration: underline;
          }
      }
  }

box2를 box1에 집어넣지 않은 이유는 가독성

두번 째

    <div id="box1">
        <div id="box1-title">box1 title</div>
        <a href="#">button1</a>
        <div id="box2">
            box2 <br>
            <a href="#">buttton2</a>
        </div>
    </div>


  #box1 {

	  &-title {
  	font-style: italic;
	    text-decoration: underline;
}

세번 째(중복되는 코드)

#box1 {
  border-radius: 20px;
  border: 3px solid #f00;

 &-title {
    border-radius: 20px;
    border: 3px solid #f00;
  }
}

#box1 {
  &, &-title {
    border-radius: 20px;
    border: 3px solid #f00;
  }
}

Related Posts