| Warren's

[toc]

sass

gem sources --remove https://rubygems.org/open in new window这里的是双横线或直接 -r
gem sources –a https://ruby.taobao.org/open in new window
当系统不支持https的时候就换成 [http://gems.ruby-china.org/] (http://gems.ruby-china.org/)
gem install sass

语法

用@import 引入其它的scss文件 (可以是用逗号隔开的对各文件连续引用)

除法用 math.div(6,3) 返回 2

css原生中也有@import语法但是不利于性能而且要放在代码最前面，所以一般不用，但在sass中可以用。

使用css原生规则来引入文件（出现以下情况时）：

当@import引入的文件以点.css结尾；
当@import引入的文件是http://开头的时候；
当@import引入的文件后面跟的是url（"地址"）的时候；
当@import引入的文件后带有media queries（@import tv）

数据类型

/* Map */
$mapColor: (
    c1: red,
    c2: yellow,
    c3: pink,
);

@for $i from 1 through 3 {
    .c#{$i} { color: map-get($mapColor, c#{$i}); }
}

/* 数组 */
$listColor: red,yellow,pink;
.name{
    color: nth($listColor, 1)
}

/* 二维数组 */
$list: ((1,2),(3, 4), (5, 6));
@each $n in $list {
  .name {
    width: #{nth($n, 1)}px;
    height: #{nth($n, 2)}px;
  }
}

计算

绝对单位：px, pt, pc, in, mm, cm 等都能可以计算相对单位：ex, em, rem 相对当前字体的都不能计算

.t {
  width: 100px - 20; // 第二个值可不带单位；
  width: 20px * 10;  // 单位要相同 第二个值可不带单位；
  font: 10px/8px;    // 纯 CSS，不是除法运算
  $width: 100px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

变量命名：

$fontSize:12px  
body{ font-size:$fontSize; }

@charset “UTF-8”和css一样可以不写

嵌套

/*选择器嵌套*/
#top_nav{
  line-height: 40px;
  li{
    float:left;
  }
  a{
    display: block;
    &:hover{      //父选择符
      color:#ddd;
    }
  }
}
/*属性嵌套*/
.fakeshadow {
  border: {
    style: solid; 
    left: {
      width: 4px;
    }
    right: {
      width: 2px;
    }
  }
}

函数

一般很少用 @function 来声明

不想输出到css

当只用来继承的样式不想输出到css 可以用 %名称{} 和 @extend %名称 来使用。

%cor{
  color: transparent;
}
#header{
    @extend %cor;
    width:300px;
}

@at-root{
  .cla{}
}

用于将嵌套再某个类下面的类.cla渲染到css的根下而不是跟在某个类之后。

#{} 用于将变量设置为属性名，或包裹变量计算 height:calc(100% - #{$headerH})

混合 mixin

mixin 命名时 a_b 和 a-b 会被认为一样
mixin 可以包含任何在 css 和 sass 中有效的内容
mixin 可以包含在其它 mixin 中
当 mixin 中的内容没有选择器等在最外层引入时是不会被解析的

@mixin px2vw($attr, $px) {
    #{$attr}:$px/1920*100vw  // 注意#{}包含属性名 后面的值，单位统一时只写一个即可，不统一注意报错
}
.a{ @include px2vw(width,10); } // 使用方法

@mixin px2vw($params...) {  // 传递多个属性值 用 ... 接收
    @each $attr, $px in $params {
        #{$attr}:$px/1920*100vw
    }
}
.a { @include px2vw(width 10, margin 30); } // 使用方法

@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    /* border 和 padding 都设置了默认值 */
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding; 
    
    a { color: red }

    &:after { content: "."; }
}

.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}

.imgtext-h--product li{
    /* 可以将参数名和值一同传递 */
    @include horizontal-line($padding:15px);
}

/* 多个属性 */
@mixin each($param) {
    @each $key, $px in $param{
        #{$key}: $px / $baseFontSize * 1rem ;
    }
}

@mixin emCalc($props,$sizes,$base:$base-font-size){
    $values: (); $sublists: false;
    @each $s in $sizes {
        /* 循环列表中多个属性值，例如text-shadow属性 */
         @if type-of($s) == list {
            $sublists: true; $vv: ();
            @each $ss in $s {
                $vv: append($vv,if(type-of($ss) == number, #{$ss / $base}rem, $ss));
            }
            $values: append($values,join((), $vv));
        } @else {
            $values: append($values,if(type-of($s) == number, #{$s / $base}rem, $s));
        }
    }
    /* join 方法的使用 */
    $value: join((), $values, if($sublists,comma,space));
    @each $prop in $props {
        #{$prop}: $value
    }
}

继承

// @extend 不能继承选择器序列   比如@extend .content .inner
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

单行注释会被省略。

块注释会被输出。

config.rb文件

output_style //expanded(为默认)||nested对应嵌套来缩进||compact 等等。

compass

gem install compass

创建一个初始化的文件目录

compass create lean-compass-init(名称)

进入文件，然后就可以用compass watch //监听

compass compile //在项目根目录下运行会将sass文件下的scss文件编译为css文件放到config.rb文件配置的css-dir对应的文件下

核心模块

@import compass/reset

@import compass/layout

@import compass //默认包含五大模块不包含以上两个模块

css3 helpers typography utilities browser

插件引用在config.rb文件中配置。

例：require "compass-normalize"

在要引用的scss文件中用@import "normalize"

reset模块是compass内置的

单独引用某个模块要引用import "normalize-version"

强制引入两次，@import "filename！"

压缩输出注释不被删除

# sass

# 语法

# 数据类型

# 计算

# 变量命名：

# 嵌套

# 函数

# 不想输出到css

# 混合 mixin

# 继承

# compass