sass有用的代码段集合(原创)

过年的时候用scss重构过一个项目，还是费了点心思,当时也没有很系统的去学习过scss，只是觉得既然用了就用的彻底点，一些教程里看到的相关的知识点几乎都用上了，自从来实习已经好几个月没写过scss了，刚好看到篇博客写sass的，就把之前的代码总结一下发出来

用map，插值和函数完成背景色的设置

封装如下

$bgC: background-color;

$bgColor: (
    panelDanger: #ededed,
    top: #337ab7,
    navbarDefault: #e7e7e7,
    labelPrimary: #5cb85c,
    panelInfo: #81b1db,
    panelWarning: #efad4d,
    pagination: #ededed,
    procon: #337ab7,
    indexrank: #337ab7,
    bgC: #f2f2f2,
    ccc: #ccc,
    fff: #fff
);

@function bgC($class) {
    @if not map-has-key($bgColor,$class) {
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($bgColor,$class);
}

使用：

#{$bgC}: bgC(panelDanger);

编译结果

background-color: #ededed;

使用循环，条件判断完成12-20px偶数大小字占位符的设置

封装如下：

@for $i from 12 through 20 {
    @if $i % 2 ==0 {
        %fontSize#{$i} {
            font-size: $i * .1rem;
        }   
    }
}

使用：

p {
    @extend %fontSize14;
}

编译如下：

p {
    font-size: 14px;
}

混合宏设置相对/绝对定位及偏移

封装如下

@mixin position($type, $vertical, $v1, $horizon, $v2) {
    position: $type;
    #{$vertical}: $v1;
    #{$horizon}: $v2;
}

使用：

.test {
    @include position(absolute, top, 50%, left, 50%);
}

编译如下：

.test {
    position: absolute;
    top: 50%;
    left: 50%;
}

占位符和继承实现属性继承

%textCenter {
    text-align: center;
}

使用：

p {
    @extend %textCenter;
}

编译如下：

p {
    text-align: center;
}

使用混合宏数组完成盒模型内外边距的设置

封装如下

$direction: top, right, bottom, left; 
@mixin box($property, $side, $value) {
    #{$property}-#{$side}: $value;
}

使用:

.test {
    @include box(margin, nth($direction, 2), 20px);
    @each $i in $direction {
        @include box(padding, #{$i}, 5px);
    }
}

编译如下：

.test {
    margin-right: 20px;
    padding: 0;
}

嵌套和引用父选择器

.navbar-default a {
&:focus{
        #{$bgC}: bgC(navbarDefault);
    }
}

编译如下：

.navbar-default a:focus {
    background-color: #e7e7e7;
}

css3动画加浏览器前缀

封装如下：

$vendors: webkit, moz, ms, o;
@mixin prefix($type, $val) {
  #{$type}: #{$val};
  @each $v in $vendors {
    #{"-" + $v + "-" + $type}: #{$val};
  }
}

使用：

li {
  @include prefix(transform, (translate(-50%, -50%)));
  @include prefix(transition, (all .5s));
}

编译如下:

li {
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
}

资料

原完整scss文件地址