1 2 3 4 | #some { border:1px solid red; .some { background: white; } } |
1 2 | #some { border:1px solid red; } #some .some { background: white; } |
1 2 3 4 5 6 7 8 9 | $color: black; .link { @if $color == black { color: white; } @else { color: black; } } |
1 2 | .link { color: white; } |
1 2 3 | @for $i from 1 through 5 { .button-#{$i} { width:1px * $i; } } |
1 2 3 4 5 6 7 8 9 10 | .button-1 { width:1px; } .button-2 { width:2px; } .button-3 { width:3px; } .button-4 { width:4px; } .button-5 { width:5px; } |
1 2 3 4 5 | @each $company in IBM, Motorola, Google { .#{$company}-icon { background-image: url('/images/#{$company}.jpg'); } } |
1 2 3 4 5 6 | .IBM-icon { background-image: url("/images/IBM.jpg"); } .Motorola-icon { background-image: url("/images/Motorola.jpg"); } .Google-icon { background-image: url("/images/Google.jpg"); } |
1 2 3 4 5 6 | #someElement { color: rgb(150, 50, 100); } #someDarkYellowElement { color: darken(yellow, 33%); } |
1 2 3 4 | #someElement { color:#963264; } #someDarkYellowElement { color:#575700; } |
1 2 3 4 5 6 7 8 9 10 11 12 | @mixin rounded-corners($radius:5px) { border-radius ![]() -webkit-border-radius ![]() -moz-border-radius ![]() } #header { @include rounded-corners; } #footer { @include rounded-corners(10px); } |
1 2 3 4 5 6 7 8 9 | #header { border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } #footer { border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |