Sass初使用-html教程-PHP中文网

Sass初使用

php中文网

发布： 2016-08-25 10:20:42

原创

1185人浏览过

　　看慕课网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：

<span style="color: #800000;">//普通变量及其使用
$common-ff :"微软雅黑"; //字体设置
body</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> $common-ff</span>;
}<span style="color: #800000;">
//css输出----
body</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;
}<span style="color: #800000;">

//特殊变量
$direction: top;
//应用于class和属性
.border-#</span>{<span style="color: #ff0000;">$direction</span>}{<span style="color: #ff0000;">
  border-#{$direction</span>}<span style="color: #800000;">:1px solid #ccc;
}
//应用于特殊属性同理</span>

登录后复制

　　　　多值变量：顾名思义就是多个值咯。譬如 0 1px 2px 3px之类的。里面的函数有很多，暂时只用过append($list,$value,[$separator])，这个函数。

　　mixin：通过@mixin声明，@include 调用；

　　以前在做项目的时候用手淘的flexible写了很多这样的样式

<span style="color: #800000;">button,input,textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;
}<span style="color: #800000;">
[data-dpr="2"] button,
[data-dpr="2"] input,
[data-dpr="2"] textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;
}<span style="color: #800000;">
[data-dpr="3"] button,
[data-dpr="3"] input,
[data-dpr="3"] textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 36px</span>;
}

登录后复制

　　这样写太麻烦了，然后学了sass之后就参考手淘他们写的混合宏自己写了一个

<span style="color: #800000;">@mixin property-dpr($property,$px-values)</span>{<span style="color: #ff0000;">
        //判断参数是不是单个数字，若是
        @if type-of($px-values) == "number"{
                #{$property</span>}<span style="color: #800000;">: $px-values;
            [data-dpr="2"] &amp; </span>{<span style="color: #ff0000;">
                #{$property</span>}<span style="color: #800000;">: $px-values * 2;
            }
            [data-dpr="3"] &amp; </span>{<span style="color: #ff0000;">
                #{$property</span>}<span style="color: #800000;">: $px-values * 3;
            }
        }
        //若为数组则
        @else </span>{<span style="color: #ff0000;">
            //新建两个空数组
            $twodpr-values</span>:<span style="color: #0000ff;">()</span>;<span style="color: #ff0000;">
            $threedpr-values</span>:<span style="color: #0000ff;">()</span>;<span style="color: #ff0000;">
            //遍历多值变量
            @each $value in $px-values{
                $twodpr-values</span>:<span style="color: #0000ff;">append($twodpr-values,$value*2)</span>;<span style="color: #ff0000;">
                $threedpr-values</span>:<span style="color: #0000ff;">append($threedpr-values,$value*3)
            </span>}<span style="color: #800000;">
            // 返回处理后的多值变量
               #</span>{<span style="color: #ff0000;">$property</span>}<span style="color: #800000;">: $px-values;
                [data-dpr="2"] &amp; </span>{<span style="color: #ff0000;">
                    #{$property</span>}<span style="color: #800000;">: $twodpr-values;
                }
                [data-dpr="3"] &amp; </span>{<span style="color: #ff0000;">
                    #{$property</span>}<span style="color: #800000;">: $threedpr-values;
                }
        }
}</span>

登录后复制

　　css、sass生成代码：

<span style="color: #800000;">//调用mixin
div</span>{<span style="color: #ff0000;">
    @include property-dpr(font-size,12px);
</span>}<span style="color: #800000;">
//css style
div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 12px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> line 7, ../../sass/common/_mixin.scss </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[data-dpr="2"] div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 24px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> line 10, ../../sass/common/_mixin.scss </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[data-dpr="3"] div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 36px</span>;
}

登录后复制

　　今天就先到这里咯。

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

Sass初使用