Sass 笔记

Sass 笔记

1. 安装，依赖Ruby

　　sass依赖Ruby, 所以Windows要先安装Ruby, Mac自带无需安装

　　

$ gem install sass

　　

2. 两种文件格式 sass scss

　　.sass : 它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性, 容易阅读 书写更快

　　.scss : CSS3 语法写法相同

　　二者可互相转换： 

$ sass-convert style.sass style.scss

　　

3. 缓存

　　提升重新编译的速度

　　在 .sass_cache 文件夹中

　　禁用缓存  :cache 设置为 false

4. 具体语法

　　1. 变量

　　　　 $highlight-color  比如创建一个文件用来存放所有color变量

　　2. 嵌套 

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

　　　　a. & 替换父元素

　　　　b. 群组选择器

.container h1, .container h2, .container h3 { margin-bottom: .8em }

变成
.container {
  h1, h2, h3 {margin-bottom: .8em}
}

　　　　c. ～ 同层全体组合选择器， 

　　　　    + 同层相邻组合选择器, 选取元素后紧跟的其他元素

　　　　d. 嵌套属性

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

　　3. 导入SASS文件

　　　　a. @import "themes/night-sky";　　会导入 themes/_night-sky.scss文件
　　　　b. !default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

　　　　c. 导入css文件， 把原始的css文件改名为.scss后缀，即可直接导入了

　　　　d. 如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

　　4. 注释　　

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中， 静默注释
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

　　

　　5. 混合器

　　　　通过sass的 @mixin 实现大段样式的重用。@include 引用。允许传参数。 判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。

　　

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}



@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

　　

　　

　　

　　6. 继承 

　　　　@extend 告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。实现样式的组合。明确各个样式之间的关系。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

编译成

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

　　7.Debug

@debug 10em + 12em;

@warn "Assuming #{$x} to be in pixels";

@error "$x may not be unitless, was #{$x}.";

　　

　　8.控制指令

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}


@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}


@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

　　

　　

　　9.函数 

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }