Sass的基本使用

1.基本的嵌套写法

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

其编译结果就是

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

2.特殊符号 &

常用于如hover这类伪类伪元素等的使用

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

其编译结果就是

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

注意，如果有很多个父选择器，它是会从最外层的父选择器一层层传递的

例如

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

其编译结果为

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

 它还可以作为变量明去使用，例如定义一个main-sidebar的类名

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

3.属性嵌套（比较少用）

可用于定义重复的font-family，font-size，font-weight等

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

4.变量

这个用法很像less，所以大家应该很容易理解

// XXX 样式头
$deep: '400px';

.main{
  width:$deep;
}

5.运算

sass允许你使用加减乘除运算去计算结果值

p {
  font: 10px/8px;        
  $width: 1000px;
  width: $width/2;       
  width: round(1.5)/2;       
  height: (500px/2);         
  margin-left: 5px + 8px/2px; 
}

当然也可以使用字符串拼接

p {
  cursor: e + -resize;
}

6.函数

sass定义了多种函数，也可以自定义函数

内置函数

p {
  color: hsl(0, 100%, 50%);
}
// 编译为
p {
  color: #ff0000; }

自定义函数

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

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

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

//编译为
#sidebar {
  width: 240px; }

7.#{}插值语句

有点类似上文的$父选择器跟变量的使用，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
//编译为
p.foo {
  border-color: blue; }

8.!default

用于判断变量是否为空，为空才会赋值

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}
//编译为
#main {
  content: "First content";
  new-content: "First time reference"; }

9. @家族

1.@import

就是简单地引入其他文件，熟悉vue的大家都见过这个东西

@import "foo.scss";

也可以同时导入多个

@import "rounded-corners", "text-shadow";

2.@media

这个大家都见过，就是自适应的时候使用的

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

3. @extend 继承

这个有点意思，它会继承父亲的全部属性，如果父亲还有父亲，也会一并继承

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

 4.@for 没错就是循环，这里就需要结合我们上面的变量使用了，可以避免重复代码

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//编译为
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

5.each 没错，也是循环，不过是循环一个集合

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//编译为
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

6.@while 没错，有循环的全家桶

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
//编译为
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

 7.@if @else @else if  有循环当然也有判断语句啊

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

 8.@mixin 混合样式 跟 @include 引入混合样式

// 定义一个复用的混合样式
@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

// 引入混合样式
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

当然也可以创建一个方法类型的混合样式

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

//编译为
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

但是因为我喜欢用深度修改器，sass不支持我那么写，所以我还是比较喜欢使用less