SASS组件开发

lo0853 8年前
   <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>