你的位置:首页 > 网页设计

[网页设计]编写SASS的一些技巧

  • 更好的为变量命名

变量是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 ============================================= [email protected] 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);}