Sass Memorandum

sass_memorandum.scss

@charset "UTF-8";

// 数组的两种定义 有逗号/无逗号
$font_family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$margin: 10px 5px 10px 5px;

body {
  font-family: $font_family;
  margin: $margin;
}

// 字符串有两种形式 有引号/无引号

$white: #ffffff;
$content: 'Yancey';

body {
  color: $white;
  content: $content;
}

// #{} 类似于模版字面量 用于包裹变量 不至于变量被编译成字符串

@mixin tooltip($selector) {
  #{$selector}::before {
    position: absolute;
    content: $content;
    width: 100px;
    height: 40px;
    top: 0;
    left: 0;
  }
}

@include tooltip('.copyright');

// Maps

$group: (display: flex, justify-content: center, align-items: center);

// 变量的默认值

$name: 'Yancey' !default;
$name: 'Sayaka';

// 将文件命名为形如 _color.scss的形式，在@import时不会被编译 一般被用做全局变量

// @import可以引入多个文件 用逗号隔开
@import "_color.css", "_mixin.css";

// @media 可以嵌套，编译时自动添加 and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

// @extend 继承(可以多重继承 / 继承具有延续性)

.btn {
  width: 100px;
  height: 30px;
  border-radius: 4px;
  background: #ccc;
  &:hover {
    text-decoration: underline;
  }
}

.danger-btn {
  @extend .btn;
  background: #f00;
}

// %extreme

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

.sel {
  @extend %extreme;
}

// @at-root 手动避免潜逃太深

// 虽然.container在.wrapper内部 但编译出来的css两者是分离了

.wrapper {
  position: relative;
  @at-root .container {
    position: absolute;
    top: 0;
    left: 0;
    .txt {
      color: $white;
    }
  }
}

// 控制指令

// @if

$color: #fff;

p {
  @if $color == #ffffff {
    color: $white;
  } @else if ($color == #f00) {
    color: #f00;
  } @else {
    color: #ccc;
  }
}

// @for

// 一种是 @for $var from <start> through <end> 此时 $var ∈ [start, end]
// 另一种是 @for $var from <start> to <end> 此时 $var ∈ [start, end)

@for $i from 0 through 3 {
  .font_size_#{12 + $i * 2} {
    width: 12px + $i * 2;
  }
}

// @each 用于遍历（多维）数组/对象

$icons: twitter, facebook, whatsApp, telegram, instaagram;

.icon {
  width: 32px;
  height: 32px;
}

@each $icon in $icons {
  .icon_#{$icon} {
    background: url("../../assets/images/icons/#{$icon}.svg");
  }
}

// 嵌套数组

$new_icons: (puma, black, default),
        (sea-slug, blue, pointer),
        (egret, white, move);

@each $animal, $color, $cursor in $new_icons {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

// 遍历对象
// 形式为 (key, val) in obj
// key 可以用在 className，很骚
$headers: (h1: 32px, h2:28px, h3: 24px, h4: 20px, h5: 16px, h6: 12px);

@each $header_name, $font_size in $headers {
  #{$header_name} {
    font-size: $font_size;
  }
}

// @while少用吧... 无语了

// @mixinだ ！！！

// 支持默认参数、不定参数
@mixin text($font_size, $font_weight: 500, $color...) {
  font-size: $font_size;
  font-weight: $font_weight;
  color: $color;
  background: $color;
  text-decoration: $color;
}

.container {
  @include text(20px, 500, #fff, #ccc, #000, #666);
  text-align: center;
}

// @mixin嵌套
@mixin highlighted-background {
  background-color: #fc0;
}

@mixin header-text {
  font-size: 20px;
}

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

.wrapper {
  @include compound;
}

// 向混合样式中导入内容 搞不太懂
@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}

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

// @functionだ ！！！
$grid-width: 40px;
$gutter-width: 10px;

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

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

// 私以为@mixin是使用既定的代码，@function就是用来计算了

// 缩进层级
// :nested | :expanded | :compact | :compressed