我们如何在项目中使用sass

[zhouwenbin]

sass极大的改变了我们的开发方式，使我们的项目更加好管理。项目经历了拆拆合合，版本的更替，需求的变更，多人协作。想聊聊sass如何解决这些问题。

项目结构

utils
    _function.scss             函数
    _mixin.scss                混合
    _placeholders.scss         占位符
    _variables.scss            变量
base
    _reset.scss                样式表重置
    _base.scss                 基础样式
    _help.scss                 辅助样式
components
modules
layout
    _footer.scss               尾部
    _header.scss               头部
    _layout.scss               布局
    _nav.scss                  导航
vendors
pages

• components目录用来放所有模块级公用的组件
• modules目录用来放页面级公用的模块
• vendors目录用来放外部的库
• pages目录用来放所有的页面

命名空间

components和modules的文件名用来管理命名空间，文件名和class名字一致。每个模块或组件都在一个class下扩展。这样新建文件的时候就知道有没有命名冲突，多人合作的时候也可以避免代码冲突。

有用的变量

• 背景图片的地址用变量代替，方便发布到线上修改版本号。
• z-index统一在一个地方管理，然后用map-get引入，不然页面多了z-index容易乱。能不用z-index就不用，有时只要调整html的顺序。

css3前缀

添加css3前缀我们用aotoprefixer，只要写标准语法就行了。移动端可以大胆的用flexbox布局，工具会帮忙实现兼容。display:flex下的子元素最好是block，有些安卓浏览器不支持。

精灵图

精灵图按模块来拼，避免版本更替有的图片没用了。有条件的话图标改成iconfont，移动端用inline SVG。设计师给的sketch文件能导出svg，要适当的处理下。举个例子

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" display="none">
    <symbol id="icon-star" viewBox="0 0 13 13">
            <g transform="translate(-285.000000, -95.000000)">
                <g transform="translate(15.000000, 84.000000)">
                    <polygon transform="translate(276.500000, 17.500000) rotate(-45.000000) translate(-276.500000, -17.500000) " points="276.5 19.3117776 271.903806 22.0961941 274.688222 17.5 271.903806 12.9038059 276.5 15.6882224 281.096194 12.9038059 278.311778 17.5 281.096194 22.0961941 "></polygon>
                </g>
            </g>
    </symbol>
    <symbol id="icon-addtocart" viewBox="0 0 30 30">
        <path d="M18.9302816,-7.99360578e-15 L16.9156597,-7.99360578e-15 C16.8387766,-7.99360578e-15 13.8243898,2.84475111 13.8243898,2.84475111 C13.78965,2.88038292 13.7631681,2.92093946 13.7412422,2.96323413 L8.26631156,2.96323413 L6.90405702,2.96323413 L0.831431545,2.96323413 C0.217790548,2.96323413 -0.134163175,3.45107128 0.0480782351,4.04667294 L2.0470387,10.566715 C2.23013437,11.1626064 2.88136265,11.6501538 3.4947189,11.6501538 L6.90405702,11.6501538 L8.26631156,11.6501538 L11.6750802,11.6501538 C12.2887212,11.6501538 12.9402342,11.1623167 13.1224756,10.566715 L15.1029272,4.10924588 L17.2972277,1.87631904 L18.9302816,1.87631904 C19.1976639,1.87631904 19.4169231,1.65383749 19.4169231,1.38152933 L19.4169231,0.494210326 C19.4169231,0.222481553 19.1976639,-7.99360578e-15 18.9302816,-7.99360578e-15 Z M3.23615385,15.5335385 C3.95106521,15.5335385 4.53061538,14.9539883 4.53061538,14.2390769 C4.53061538,13.5241656 3.95106521,12.9446154 3.23615385,12.9446154 C2.52124248,12.9446154 1.94169231,13.5241656 1.94169231,14.2390769 C1.94169231,14.9539883 2.52124248,15.5335385 3.23615385,15.5335385 Z M11.0029231,15.5335385 C11.7178344,15.5335385 12.2973846,14.9539883 12.2973846,14.2390769 C12.2973846,13.5241656 11.7178344,12.9446154 11.0029231,12.9446154 C10.2880117,12.9446154 9.70846154,13.5241656 9.70846154,14.2390769 C9.70846154,14.9539883 10.2880117,15.5335385 11.0029231,15.5335385 Z" transform="translate(14.000000, 15.083333) scale(-1, 1) translate(-14.000000, -15.083333) translate(4.000000, 7.083333)"></path>
    </symbol>
</svg>

每个图标用symbol包裹，使用的时候用use引入

<svg class="icon-star"><use xlink:href="#icon-star"></use></svg>
<svg class="icon-addtocart-normal"><use xlink:href="#icon-addtocart"></use></svg>
<svg class="icon-addtocart-disabled"><use xlink:href="#icon-addtocart"></use></svg>

嵌套不要太深

一是性能问题，还有就是不好通过浏览器定位到对应的sass。虽然可以用SourceMaps，但是这个有时候不太准。