SASS
2019.08.16 13:21

SASS 샘플

조회 수 2629 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
/* 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}

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 SASS Sass @while 2019.09.20 3037
40 SASS Sass @for 2019.09.20 2590
39 SASS Sass @each 2019.09.20 2285
38 SASS Sass @if and @else 2019.09.20 2630
37 SASS Sass Operators 2019.09.20 2402
36 SASS Sass Introspection Functions 2019.09.19 2268
35 SASS Sass Color Functions 2019.09.19 2446
34 SASS Sass Selector Functions 2019.09.19 2075
33 SASS Sass Map Functions 2019.09.19 2254
32 SASS Sass List Functions 2019.09.19 2436
31 SASS Sass Numeric Functions 2019.09.19 2200
30 SASS Sass String Functions 2019.09.19 3521
29 SASS Sass @extend 2019.09.19 2156
28 SASS Sass @mixin과 @include 2019.09.19 2741
27 SASS Sass @import 2019.09.19 2197
26 SASS Sass 중첩 규칙과 속성 2019.09.19 2224
25 SASS Sass 변수 2019.09.19 2012
24 SASS Sass 소개 2019.09.19 9643
» SASS SASS 샘플 2019.08.16 2629
22 HTML ::after ::before 토글 사용 예제 2019.06.28 2971
Board Pagination Prev 1 2 3 Next
/ 3