标签：
看慕课网materliu前辈的sass教程，http://www.imooc.com/learn/364。顺便把刚做完的项目重构一下，然后把一些笔记和心得都写在这里~
首先安装sass，这里直接参考 大漠前辈的安装教程 http://www.w3cplus.com/sassguide/install.html。
然后安装compass， 在ruby command 里面打命令，gem install compass 就好了；就现阶段来说，对compass理解的不是很多，看完sass那个视频之后就觉得暂时只是用来编译scss文件和压缩css（雾）。
compass指令：
compass create compass；
compass watch;
sass语法：
当文件不用编译的时候，可以用_前缀下划线来标记然后命名，通常函数或者变量都放在一个文件夹里面。
文件引进来可以用import ，文件名后缀可以不用写， 然而这个不是css原生的import。
css原生的import两大弊端：1、一定要放在代码最前面。2、对性能不利。如果真的要使用原生的import，那么就要：1、以css结尾的时候。2、http：//开头。3、URL（）函数。4、带有media queries。
sass变量：好东西，譬如每次找颜色的时候，颜色代码都记不住，如果用变量的话就不用这么慢慢找颜色代码了，直接看一下变量文件，一目了然咯。
特殊变量，在特定情况下使用的变量；
eg：
//普通变量及其使用 $common-ff :"微软雅黑"; //字体设置 body{ font-family: $common-ff; } //css输出---- body{ font-family: "微软雅黑"; } //特殊变量 $direction: top; //应用于class和属性 .border-#{$direction}{ border-#{$direction}:1px solid #ccc; } //应用于特殊属性同理
多值变量：顾名思义就是多个值咯。譬如 0 1px 2px 3px之类的。里面的函数有很多，暂时只用过append($list,$value,[$separator])，这个函数。
mixin：通过@mixin声明，@include 调用；
以前在做项目的时候用手淘的flexible写了很多这样的样式
button,input,textarea{ font-size: 12px; } [data-dpr="2"] button, [data-dpr="2"] input, [data-dpr="2"] textarea{ font-size: 24px; } [data-dpr="3"] button, [data-dpr="3"] input, [data-dpr="3"] textarea{ font-size: 36px; }
这样写太麻烦了，然后学了sass之后就参考手淘他们写的混合宏自己写了一个
@mixin property-dpr($property,$px-values){ //判断参数是不是单个数字，若是 @if type-of($px-values) == "number"{ #{$property}: $px-values; [data-dpr="2"] & { #{$property}: $px-values * 2; } [data-dpr="3"] & { #{$property}: $px-values * 3; } } //若为数组则 @else { //新建两个空数组 $twodpr-values:(); $threedpr-values:(); //遍历多值变量 @each $value in $px-values{ $twodpr-values:append($twodpr-values,$value*2); $threedpr-values:append($threedpr-values,$value*3) } // 返回处理后的多值变量 #{$property}: $px-values; [data-dpr="2"] & { #{$property}: $twodpr-values; } [data-dpr="3"] & { #{$property}: $threedpr-values; } } }
css、sass生成代码：
//调用mixin div{ @include property-dpr(font-size,12px); } //css style div { font-size: 12px; } /* line 7, ../../sass/common/_mixin.scss */ [data-dpr="2"] div { font-size: 24px; } /* line 10, ../../sass/common/_mixin.scss */ [data-dpr="3"] div { font-size: 36px; }
今天就先到这里咯。
标签：
原文地址：http://www.cnblogs.com/gjqiang/p/5802272.html
