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>