CSS 预处理器,Sass 3.2.0 发布,

openkk 12年前
   <p><a href="/misc/goto?guid=4958184196366000958" target="_blank">Sass </a>3.2.0 发布了,Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。</p>    <p><img alt="CSS 预处理器,Sass 3.2.0 发布," src="https://simg.open-open.com/show/45241b981b8cc956c136b2d6b36424e5.png" width="460" height="274" /></p>    <p>Sass 3.2.0 版本主要改进记录:</p>    <p>1. mixin支持内容块嵌入(<a title="Reference Documentation" href="/misc/goto?guid=4958522073356021541">Reference Documentation</a>):</p>    <pre class="code">@mixin iphone {    @media only screen and (max-width: 480px) {      @content;    }  }    @include iphone {    body { color: red }  }</pre>    <p>2. 占位符选择器 %foo</p>    <pre class="code">// This ruleset won't be rendered on its own.  #context a%extreme {    color: blue;    font-weight: bold;    font-size: 2em;  }  .notice { @extend %extreme; }  //将编译生成  #context a.notice {    color: blue;    font-weight: bold;    font-size: 2em;  }</pre>    <p>3. 变量参数</p>    <pre class="code">@mixin box-shadow($shadows...) {    // $shadows is a list of all arguments passed to box-shadow    -moz-box-shadow: $shadows;    -webkit-box-shadow: $shadows;    box-shadow: $shadows;        }    // This is the same as "@include spacing(1, 2, 3);"  $values: 1, 2, 3;  @include spacing($values...);</pre>    <p>4. 指令插值</p>    <pre class="code">$media: screen;  $feature: -webkit-min-device-pixel-ratio;  $value: 1.5;    @media #{$media} and ($feature: $value) {    ...  }</pre>    <p>该版本还包含其他的一些小改进,详情请看 <a href="/misc/goto?guid=4958522073453058071" target="_blank">CHANGES</a></p>