nav {
background : #C39BD3;
padding : 10px;
height: 50px;
ul {
display: flex;
list-style : none;
justify-content: flex-end;
li {
color: white;
margin-right: 10px;
}
}
}
//Scss
.add-icon {
background : {
image: url("./assets/arrow-right-solid.svg");
position: center center;
repeat: no-repeat;
size: 14px 14px;
}
}
/*CSS export*/
.add-icon {
background-image: url("./assets/arrow-right-solid.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 14px 14px;
}
&사용하여 부모선택자를 가리킬 수 있다. 2가지 방법에 사용할 수 있다.
//Scss
.box {
&:focus{} // 가상선택자
&:hover{}
&:active{}
&:first-child{}
&:nth-child(2){}
&::after{} // 가상요소
&::before{}
}
/*CSS*/
.box:focus{} /* 가상선택자 */
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{} /* 가상요소 */
.box::before{}
2.공동 클래스명을 가진 선택자 중첩
//Scss
.box {
&-yellow {
background: #ff6347;
}
&-red {
background: #ffd700;
}
&-green {
background: #9acd32;
}
}
/*css*/
.box-yellow {
background: #ff6347;
}
.box-red {
background: #ffd700;
}
.box-green {
background: #9acd32;
}
//Scss
.article {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
.article-content {
font-size: 14px;
opacity: 0.7;
@at-root i {
opacity: 0.5;
}
}
}
/*CSS*/
.article {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.article .article-content {
font-size: 14px;
opacity: 0.7;
}
/*중첩을 빠져나온 것을 확인할 수 있다.*/
i {
opacity: 0.5;
}
$bgColor : #FFF;
div{
background: $bgColor;
}
//sass 공식문서
$font-size : 10px 12px 16px; //폰트사이즈 리스트
$image-file : photo_01, photo_02, photo_03 //이미지 파일명 리스트
//아래와 같은 형태로 사용(순회도 가능) - ruby sass
nth(10px 12px 16px, 2); // 12px
nth([line1, line2, line3], -1); // line3
//sass 공식문서
$font-weights: ("regular": 400, "medium": 500, "bold": 700); //글자 굵기 리스트
//아래와 같은 형태로 사용 - ruby sass
map-get($font-weights, "medium"); // 500
map-get($font-weights, "extra-bold"); // null
append(list,value,[separator])
, index(list,value)
, nth(list, n)
등이 있다.append(list,value,[separator])
: lists의 값을 추가하는 함수index(list,value)
: lists의 값에 대한 인덱스를 리턴하는 함수nth(list, n)
: lists의 인덱스에 해당하는 값을 리턴하는 함수map-get(map,key)
, map-keys(map)
, map-values(map)
등이 있다.map-get(map,key)
: 키에 해당하는 값을 값을 리턴하는 함수map-keys(map)
: map에 들어있는 키(key) 전부를 리턴하는 함수map-values(map)
: map에 들어있는 값(value) 전부를 리턴하는 함수