SASS组件开发
lo0853
7年前
<h2>SASS组件开发</h2> <p>SASS预处理器，增加了css所没有的编程能力，带来了前端开发的效率提高，以及扩展了css的编写技巧。</p> <h3>组件开发</h3> <p>设计一个表单提示层（包括成功success，警告warning，错误等状态error）组件，css需要定义基本样式字体（font-）、外内边距（padding，margin）、显示方式（display）、边框（border）以及其他相关的内容，再为单独的状态定义需要的样式。</p> <h3>css组件开发</h3> <p>先定义基本样式，再对每一个状态定义一套样式</p> <pre> <code class="language-css">.tips { /* 基本颜色设置 */ padding: 15px; margin-bottom: 20px; border-radius: 4px; } //成功状态 .tips-success{ background-color: #47a447; color: #fff; } //警告状态 .tips-warning{ background-color: #ed9c28; color: #fff; } //错误状态 .tips-error{ background-color: #ed9c28; color: #fff; } </code></pre> <p>每一种状态文字和边框颜色需要单独设置，稍显繁琐。后期扩展其它状态，如信息info、危险dange等，就是工作成本的提高。幸好SASS提供了编程能力，为我们解决这种担忧，提高了工作效率。</p> <h3>sass组件开发</h3> <p>组件是对数据和方法的简单封装。</p> <p>变量默认值!default</p> <p>先来看一段js的变量声明代码</p> <pre> <code class="language-css">var a = 1; console.log(a);//1 </code></pre> <p>再看一段sass代码，是不是很简单。</p> <pre> <code class="language-css">$color:blue; $color:red; !default;//变量申明带有!default，表示当前值为缺省值 p{ color:$color;//输出blue } </code></pre> <p>声明 !default ，在这里输出blue，很有趣吧。简单说下它的作用：假设变量申明带有!default，表示此变量为默认值，可被全局的普通声明覆盖。这点还不能体现它的伟大作用。</p> <p>@mixin应用</p> <ul> <li>先声明@mixin</li> <li>在需要的地方使用@include来声明调用mixins。 <pre> <code class="language-css">/* mixin */ @mixintips($background,$text-color,$tipsStylePadding) { background-color: $background; color: $text-color; padding: $tipsStylePadding; margin-bottom: 20px; border-radius: 4px; } </code></pre> </li> </ul> <p>调用功能模块，当前的组件可扩展出多个组件样式。</p> <pre> <code class="language-css">//成功状态 .tips-success { @includetips($background,$text-color,$tipsStylePadding); } //警告状态 .tips-warning { @includetips($background,$text-color,$tipsStylePadding); } //错误状态 .tips-error { @includetips($background,$text-color,$tipsStylePadding); } //信息状态（再扩展一个） .tips-info { @includetips($background,$text-color);,$tipsStylePadding } </code></pre> <p>@include在需要的地方随意调用，不够规范，后期难以维护。</p> <p>组件实例</p> <ul> <li> <p>现在我们新建个scss文件，这里暂且叫做_tips.scss。</p> <pre> <code class="language-css">/* 变量 ---------------------------------*/ $background: #47a447 !default; $text-color: #fff !default; $tipsStylePadding: 15px !default; /* mixin ---------------------------------*/ @mixintips($background,$text-color,$tipsStylePadding) { background-color: $background; color: $text-color; padding: $tipsStylePadding; margin-bottom: 20px; border-radius: 4px; } /*样式 ---------------------------------*/ //成功状态 .tips-success { @includetips($background,$text-color,$tipsStylePadding); } //警告状态 .tips-warning { @includetips($background,$text-color,$tipsStylePadding); } //错误状态 .tips-error { @includetips($background,$text-color,$tipsStylePadding); } //信息状态（再扩展一个） .tips-info { @includetips($background,$text-color,$tipsStylePadding); } </code></pre> </li> </ul> <p>接下来我们要在所需要的文件，调用这个文件，这个组件就开发完了</p> <pre> <code class="language-css">//导入_tpis.scss @import '_tips'; </code></pre> <p>问题？</p> <ul> <li>组件是重复可调用的，也是对数据和方法的简单封装</li> <li>如果我们对默认的padding为15px不满意，要改为5px，怎么弄</li> </ul> <p>重新覆写</p> <p>重新覆写，会产生相同的代码，这不是我们想要的组件</p> <pre> <code class="language-css">//导入_tips.scss @import '_tips'; .tips-success{ padding:5px; } /*编译后样式 ---------------------------------*/ .tips-success{ background-color: #47a447; color: #fff; padding: 15px; margin-bottom: 20px; border-radius: 4px; } .tips-success{ padding: 5px; } </code></pre> <p>修改参数</p> <p>改变@include的参数，同样会产生相同的代码，也不是我们想要的组件</p> <pre> <code class="language-css">//导入_tips.scss @import '_tips'; .tips-success{ @includetips($tipsStyleBorder,5px); } /*编译后样式 ---------------------------------*/ .tips-success{ background-color: #47a447; color: #fff; padding: 15px; margin-bottom: 20px; border-radius: 4px; } .tips-success{ background-color: #47a447; color: #fff; padding: 5px; margin-bottom: 20px; border-radius: 4px; } </code></pre> <p>正确解决方法</p> <p>这里就需要使用 !default;特性</p> <pre> <code class="language-css">//申明$tpisStylePadding为5px $tpisStylePadding: 5px; //导入_tips.scss @import '_tips'; /*编译后样式 ---------------------------------*/ .tips-success { background-color: #47a447; color: #fff; padding: 5px; margin-bottom: 20px; border-radius: 4px; } </code></pre> <p>变量设计原则</p> <ul> <li>所有变量为默认值，后面加有!default，以方便覆盖；</li> <li>有些变量为开关变量，值只能是true或false，可以用来表示是否输出样式，应用于兼容及控制代码；</li> <li>有些变量为复合变量，一个变量会有几个值，以减少变量个数。</li> </ul> <h3>参考文档</h3> <ul> <li>sassCore <a href="/misc/goto?guid=4959733312549091041" rel="nofollow,noindex">http://www.w3cplus.com/sasscore/index.html</a></li> <li>sass揭秘之变量 <a href="/misc/goto?guid=4959733312642055982" rel="nofollow,noindex">http://www.w3cplus.com/preprocessor/sass-basic-variable.html</a></li> </ul> <p> </p> <p>来自：http://web.jobbole.com/89742/</p> <p> </p>