/* 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}
번호 | 분류 | 제목 | 날짜 | 조회 수 |
---|---|---|---|---|
41 | SASS | Sass @while | 2019.09.20 | 3238 |
40 | SASS | Sass @for | 2019.09.20 | 2747 |
39 | SASS | Sass @each | 2019.09.20 | 2444 |
38 | SASS | Sass @if and @else | 2019.09.20 | 3222 |
37 | SASS | Sass Operators | 2019.09.20 | 2607 |
36 | SASS | Sass Introspection Functions | 2019.09.19 | 2421 |
35 | SASS | Sass Color Functions | 2019.09.19 | 3608 |
34 | SASS | Sass Selector Functions | 2019.09.19 | 2241 |
33 | SASS | Sass Map Functions | 2019.09.19 | 2377 |
32 | SASS | Sass List Functions | 2019.09.19 | 2613 |
31 | SASS | Sass Numeric Functions | 2019.09.19 | 2367 |
30 | SASS | Sass String Functions | 2019.09.19 | 3713 |
29 | SASS | Sass @extend | 2019.09.19 | 2290 |
28 | SASS | Sass @mixin과 @include | 2019.09.19 | 2998 |
27 | SASS | Sass @import | 2019.09.19 | 2341 |
26 | SASS | Sass 중첩 규칙과 속성 | 2019.09.19 | 2360 |
25 | SASS | Sass 변수 | 2019.09.19 | 2141 |
24 | SASS | Sass 소개 | 2019.09.19 | 13118 |
» | SASS | SASS 샘플 | 2019.08.16 | 2872 |
22 | HTML | ::after ::before 토글 사용 예제 | 2019.06.28 | 3141 |