编写SASS的一些技巧_html/css_WEB-ITnose
程序员文章站
2022-05-03 20:52:00
...
变量是Sass中最简单的特性之一,但有时候也会使用不当。创建站点范围内有语义化的变量,是不可或缺的工作。如果命名不好,他会变得难以理解和重复使用。
这里有一些命名变量的小技巧,提供参考:
这有一个好的示例:
$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是实现代码块的一种伟大方式,可以在一个站点内多次使用。然而,@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来创建,这也是接下来要说的下一点。
与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);}
推荐阅读
-
浅谈Word2003编写报告时常用的一些技巧
-
Xcode中代码注释编写的一些小技巧
-
设计网页页脚的15个超实用技巧_html/css_WEB-ITnose
-
通过yeoman、gulp、angular编写前段时的html模板处理,打包后找不到html的问题解决_html/css_WEB-ITnose
-
看《css知多少》的一些总结_html/css_WEB-ITnose
-
强悍的CSS工具组合:Blueprint, Sass, Compass_html/css_WEB-ITnose
-
css扩展技术:Less和Sass的区别_html/css_WEB-ITnose
-
技巧分享??如何去除多余的CSS代码?_html/css_WEB-ITnose
-
编写的jsp页面,为什么IE网页上不能显示加载的图片?_html/css_WEB-ITnose
-
提高网页性能的九大技巧_html/css_WEB-ITnose