sass基础

# CSS 拓展

sass拓展了css的选择器功能

# 属性嵌套

.funky {
  font: 20px/24px { // font 本身也可以带属性
    family: fantasy; // 将会编译 font-family
    weight: bold;
  }
}

1
2
3
4
5
6

编译为 -> css

.funky {
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold;
}

1
2
3
4
5

# 占位符选择器

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}

1
2
3
4
5
6
7
8
9

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

1
2
3
4

# 注释

段注释不会被编译删除，行注释会被编译删除
段注释的第一个字符加入 ! 表示在压缩情况下保留这个注释，通常用于保留版权信息
插值语句在段注释中也可以输出变量值

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

1
2

# 混合指令

@import 用于导入样式
@media 的 queries 允许互相嵌套使用，在编译时，sass将会自动添加 and
@extend 可以实现样式的继承，在占位符选择器中有体现
@at-root 可以实现将选择器向外部提取

# 控制指令

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

1
2
3
4
5
6
7
8
9
10
11
12

使用 @if @else if @else可以实现控制流，在不同逻辑下输出不同的值
@for 实现 for 循环
@each 实现 each 循环
each循环支持多个变量的同时循环

@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;
  }
}

1
2
3
4
5
6
7
8
9

while 实现 do-while循环
@mixin 结合 @include 可以实现类的混入，同时 @mixin 可以传入参数

# sass 函数

在 sass 中可以定义函数，在封装大型库的过程中经常会用到

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

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

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

1
2
3
4
5
6
7
8

最近更新～: 2024/08/19, 01:05:55

← 写在前面深度指南摘录→