过年的时候用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文件地址

关键字：重构, scss

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！