你的位置:首页 > 网页设计

[网页设计]Sass初使用


  看慕课网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生成代码:

//调用mixindiv{  @include property-dpr(font-size,12px);}//css stylediv { 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;}

  今天就先到这里咯。