jiangfulai 2020-04-11
......
// scss $width: 50px; .wt { width: $width; }
// scss #id { width: (1 + 2) *3px; width: $width/2; margin-left: 5px + 8px/2px; } p { color: #001100 + #040506; /* #041606 */ }
// scss $name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } /* 插值内的计算,null为空字符串 */ $val: null; p:before { content: ‘sting #{$val} str‘; /*sting str*/ }
// scss @import ‘style.scss‘; // scss .warp { @import ‘style.scss‘; }
// scss .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; /* 只能继承选择器 */ border-width: 3px; } // scss .error { border: 1px #f00; background-color: #fdd; } .attention { font-size: 3em; background-color: #ff0; } .seriousError { @extend .error; @extend .attention; border-width: 3px; }
/* 函数设置*/ @mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; } } /* 使用 */ p { @include sexy-border(blue, 1in); font-size: 14px; } /* 相当于 */ p { border-color: blue; border-width: 1in; border-style: dashed; }
mixin 混合未知格式和数量的变量, 使用...
@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }
if else 判断
// scss $type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } }
for循环
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } /* 相当于 */ .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
each循环
@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url(‘/images/#{$animal}.png‘); } } /* 相当于 */ .puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .egret-icon { background-image: url("/images/egret.png"); } .salamander-icon { background-image: url("/images/salamander.png"); }
while 循环
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } /* 相当于 */ .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }
$screen:750; @function px2rem($px) { @return #{$px/($screen/10)}rem }