编写SASS的一些技巧
摘要：更好的为变量命名变量是Sass中最简单的特性之一，但有时候也会使用不当。创建站点范围内有语义化的变量，是不可或缺的工作。如果命名不好，他会变得难以理解和重复使用。这里有一些命名变量的小技巧，提供参考：命名变量时不要含糊不清坚持一种命名规则（Modular, BEM等等）确定变量的使用是有道理的这有一...
-
更好的为变量命名
变量是Sass中最简单的特性之一，但有时候也会使用不当。创建站点范围内有语义化的变量，是不可或缺的工作。如果命名不好，他会变得难以理解和重复使用。
这里有一些命名变量的小技巧，提供参考：
- 命名变量时不要含糊不清
- 坚持一种命名规则（Modular, BEM等等）
- 确定变量的使用是有道理的
这有一个好的示例：
$orange: #ffa600; $grey: #f3f3f3; $blue: #82d2e5; $link-primary: $orange; $link-secondary: $blue; $link-tertiary: $grey; $radius-button: 5px; $radius-tab: 5px;
这个是不好的示例：
$link: #ffa600; $listStyle: none; $radius: 5px;
-
减少Mixins的使用
Mixins是实现代码块的一种伟大方式，可以在一个站点内多次使用。然而，@include定义好的Mixins和在CSS代码中复制、粘贴没什么不一样。它将会让你的CSS代码生成很多重复的代码，让你的文件变得越来越臃肿。
到目前为止，Mixins只适合那种需要通过传递参数来快速创建样式的情形。
例如:
@mixin rounded-corner($arc) {
-moz-border-radius: $arc;
-webkit-border-radius: $arc;
border-radius: $arc;
}
rounded-corner这个Mixins可以在任何情况下使用，仅仅通过改变其参数$arc的值，将得到不同的代码：
.tab-button {
@include rounded-corner(5px);
}
.cta-button {
@include rounded-corner(8px);
}
像这样使用Mixins是不明智的：
@mixin cta-button {
padding: 10px;
color: #fff;
background-color: red;
font-size: 14px;
width: 150px;
margin: 5px 0;
text-align: center;
display: block;
}
这个Mixins没有传递任何参数，更建议使用%placeholder来创建，这也是接下来要说的下一点。
-
拥抱Placeholder
与Mixins不同，%placeholder也可以多次使用，而且不会生成重复的代码。这使得输入的CSS更友好，更干净。
%bg-image {
width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.image-one {
@extend %bg-image;
background-image:url(/img/image-one.jpg");
}
.image-two {
@extend %bg-image;
background-image:url(/img/image-two.jpg");
}
编译出来的CSS：
.image-one, .image-two {
width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.image-one {
background-image:url(/img/image-one.jpg") ;
}
.image-two {
background-image:url(/img/image-two.jpg") ;
}
多个选择器运用了相同的%placeholder也只会输出一次代码。没有引用的%placeholder是不会输出任何CSS代码。
和之前的Mixins配合在一起使用，既可保持Mixins灵活性，而且还可以保持代码的简洁与干净。
/* PLACEHOLDER
============================================= */
%btn {
padding: 10px;
color:#fff;
curser: pointer;
border: none;
shadow: none;
font-size: 14px;
width: 150px;
margin: 5px 0;
text-align: center;
display: block;
}
/* BUTTON MIXIN
============================================= */
@mixin btn-background($btn-background) {
@extend %btn;
background-color: $btn-background;
&:hover {
background-color: lighten($btn-background,10%);
}
}
/* BUTTONS
============================================= */
.cta-btn {
@include btn-background(green);
}
.main-btn {
@include btn-background(orange);
}
.info-btn {
@include btn-background(blue);
}
相关文章
最新发布
阅读排行
热门文章
猜你喜欢