编写SASS的一些技巧_html/css_WEB-ITnose-html教程-PHP中文网

编写SASS的一些技巧_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:40:49

原创

1491人浏览过

更好的为变量命名

变量是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只适合那种需要通过传递参数来快速创建样式的情形。

例如:

易语言学习手册十天学会易语言图解教程 pdf版

十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧！全书分十章，分十天讲完。第一章是介绍易语言的安装，以及运行后的界面。同时介绍一个非常简单的小程序，以帮助用户入门学习。最后介绍编程的输入方法，以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题，如怎样编写一个1+2等于几的程序，并了解变量的概念，变量的有效范围，数据类型等知识。其后，您将跟着本书，编写一个自己的MP3播放器，认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第

查看详情

@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);}

登录后复制

立即学习“前端免费学习笔记（深入）”；