• sass 骚用笔记

    sass 的使用让你变得骚起来

    废人多忘事，记录一下，防止自己总是忘
    想看实战的，请划到最下边
    有什么问题，也可以留言，我会尽快帮你解答

    变量

    $color: red;
.box {
	color: $color;
}

    • 1
    • 2
    • 3
    • 4

    集合

    @use "sass:map";
$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);
/* 外部合并集合 */
$theme-colors: map.merge(
  $theme-colors,
  (
    success: red,
  )
);
/* 内部合并集合 需要加 !global */
@mixin xx() {
  $theme-colors: map.merge(
    $theme-colors,
    (
      success: yellow,
    )
  ) !global;
}
@include xx();
.box {
  color: map.get($theme-colors, "success");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    插值

    @mixin generateAnimate($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }
  animation-duration: $duration;
  animation-name: $name;
  animation-iteration-count: infinite;
}

.box {
  @include generateAnimate(2s) {
    from {
      width: 0px;
    }
    to {
      width: 100px;
    }
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    自带函数

    if：类似三元表达式

    @debug if(true, 1, 2); // 1
@mixin app-background($color) {
  #{if(&, '&.app-background', '.app-background')} {
    background-color: $color;
    color: rgba(#fff, 0.75);
  }
}

@include app-background(#036);

.sidebar {
  @include app-background(#c6538c);
}

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

    rgb

    rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)
rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha: 1)
rgba($color, $alpha) //=> color 

@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366

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

    sass:color

    /* 调整 */
color.adjust($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)
  
@debug adjust-color(green, $alpha: -0.1); // rgba(0, 128, 0, 0.9)
@debug adjust-color(green, $green: -28, $alpha: -0.1); // rgba(0, 100, 0, 0.9)
@debug adjust-color(green, $green: 155); // lime
@debug color.alpha(adjust-color(green)); // 1
@debug color.alpha(adjust-color(green, $alpha: -0.1)); // 0.9

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    /* 改变 */
color.change($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)
 
@debug change-color(green, $red: 100, $alpha: 0.1); // rgba(100, 128, 0, 0.1)
@debug change-color(green, $green: 255); // lime
@debug color.green(change-color(green)); // 128
@debug color.alpha(change-color(green, $red: 200, $alpha: 0.1)); // 0.1

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    /* 原有基础改变 */
color.scale($color,
  $red: null, $green: null, $blue: null,
  $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)
scale-color(...) //=> color 

@debug color.scale(#6b717f, $red: 15%); // #81717f
@debug color.scale(#d2e1dd, $lightness: -10%, $saturation: 10%); // #b3d4cb
@debug color.scale(#998099, $alpha: -40%); // rgba(153, 128, 153, 0.6)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    red($color) // 用于获取颜色的红色通道。
green($color) // 用于获得颜色的绿色通道。
hue($color) // 用于获得颜色的色调。
saturation($color) // 用于获得颜色的饱和度。
lightness($color) // 以获得颜色的亮度。
whiteness($color) // 用于获得颜色的白度。
blackness($color) // 用于获得颜色的黑度。
alpha($color) // 用于获取颜色的 Alpha 通道。
darken($color, $amount) // 使颜色更深。
lighten($color, $amount) // 使颜色更淡。
invert($color, $weight: 100%) // 返回相反的颜色
mix($color1, $color2, $weight: 50%) // 按比例混合两种颜色
opacify($color, $amount) // 将颜色更加不透明
transparentize($color, $amount) // 将颜色变得更透明

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

    sass:list

    append($list, $val, $separator: auto) // 添加到末尾
index($list, $value) // 查看某个值的下标
join($list1, $list2, $separator: auto, $bracketed: auto) // 合并
length($list) // 返回 list 长度
nth($list, $n) // 返回第n个值
set-nth($list, $n, $value) // 设置第n个值
list-separator($list) // 返回分隔符

/* 使用 */
$list: 1px 2px 3px;
$list2: 1px, 2px, 3px;
.box {
  font-size: nth($list, 1);
  line-height: nth($list2, 1);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    sass:map

    map-get($map, $key, $keys...) // 获取
map-has-key($map, $key, $keys...) // 查看是否有某个值
map-keys($map) // 返回所有key
map-merge($map1, $map2) // 合并
map-merge($map1, $keys..., $map2) // 合并
map-remove($map, $keys...) // 删除某个key
map-set($map, $keys..., $key, $value) // 设置某个key的值
map-values($map) // 返回所有值

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    sass:math

    ceil($number) // 向上取整
floor($number) // 向下取整
max($number...) // 取最大数
min($number...) // 取最小数
round($number) // 四舍五入
abs($number) // 绝对值
comparable($number1, $number2) // 两个数字单位是否兼容
unitless($number) // 是否没有单位
unit($number) // 返回单位（字符串形式）
percentage($number) // 将没有单位的数变成百分比
random($limit: null) // 随机数，如果$limit是大于或等于 1 的数字，则返回 1 和 $limit 之间的随机整数

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    /* 除法使用 math.div() */
@use 'sass:math';
$transition-speed: math.div(1s, 50px);
@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}
.slider {
  @include move(10px, 120px);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    sass:meta

    /* dark-theme/_code.scss */
$border-contrast: false !default;

code {
  background-color: #6b717f;
  color: #d2e1dd;
  @if $border-contrast {
    border-color: #dadbdf;
  }
}

/* style.scss */
@use "sass:meta";

body.dark {
  @include meta.load-css("dark-theme/code",
      $with: ("border-contrast": true));
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    call($function, $args...) // 调用$function返回结果
function-exists($name) // 查看是否存在该方法
get-function($name, $css: false, $module: null) // 返回函数
global-variable-exists($name, $module: null) // 查看全部变量是否存在
inspect($value) // 返回字符串形式
keywords($args) // 将函数参数变成 map 形式
mixin-exists($name, $module: null) // 查看是否存在该 mixin
meta.module-functions($module) // 返回模块中定义的所有函数的集合
meta.module-variables($module) // 返回模块中定义的所有变量的集合
type-of($value) // 返回值的类型


/* call, get-function使用 */
@function remove-where($list, $condition) {
  $new-list: ();
  $separator: list-separator($list);
  @each $element in $list {
    @if not call($condition, $element) {
      $new-list: append($new-list, $element, $separator: $separator);
    }
  }
  @return $new-list;
}

$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

content {
  @function contains-helvetica($string) {
    @return str-index($string, "Helvetica");
  }
  font-family: remove-where($fonts, get-function("contains-helvetica"));
}

/* keywords 使用 */
@mixin syntax-colors($args...) {
  @debug keywords($args); // (string: #080, comment: #800, variable: #60b)
  @each $name, $color in keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    sass:selector

    is-superselector($super, $sub) // $super 是否包含 $sub 选择的元素
selector-append($selectors...) // 组合选择器
selector-nest($selectors...)  // 嵌套
selector-unify($selector1, $selector2) // 返回一个选择器，它只匹配与 $selector1 和 $selector2 匹配的元素

/* 使用 */
@debug selector.is-superselector("a", "a.disabled"); // true
@debug selector.is-superselector("a.disabled", "a"); // false
@debug selector.is-superselector("a", "sidebar a"); // true
@debug selector.is-superselector("sidebar a", "a"); // false
@debug selector.is-superselector("a", "a"); // true
@debug selector.append("a", ".disabled"); // a.disabled
@debug selector.append(".accordion", "__copy"); // .accordion__copy
@debug selector.append(".accordion", "__copy, __image"); // .accordion__copy, .accordion__image
@debug selector.nest("ul", "li"); // ul li
@debug selector.nest(".alert, .warning", "p"); // .alert p, .warning p
@debug selector.nest(".alert", "&:hover"); // .alert:hover
@debug selector.nest(".accordion", "&__copy"); // .accordion__copy
@debug selector.unify("a", ".disabled"); // a.disabled
@debug selector.unify("a.disabled", "a.outgoing"); // a.disabled.outgoing
@debug selector.unify("a", "h1"); // null
@debug selector.unify(".warning a", "main a"); // .warning main a, main .warning a

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    sass:string

    unquote($value) // 返回不带引号的结果
quote($value) // 返回带引号的结果
str-index($string, $substring) // 返回下标
str-insert($string, $insert, $index) // 插入
str-length($string) // 返回长度
str-slice($string, $start-at, $end-at: -1) // 分割
unique-id() // 随机且唯一的 id

/* 使用 */
@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
@debug string.insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"
@debug string.slice("Helvetica Neue", 11); // "Neue"
@debug string.slice("Helvetica Neue", 1, 3); // "Hel"
@debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    lighten/darken, adjust-color, change-color, scale-color 的不同之处

    • adjust-color

      在原有基础上固定调整，比如

      $color: red; // rgb(255,0,0);
adjust-color($color, $red: -155); // rgb(200,0,0)
adjust-color($color, $red: 155); // rgb(255,0,0)
adjust-color($color, $green: 155); // rgb(255,155,0)

      • 1
      • 2
      • 3
      • 4
    • change-color

      直接修改值，也就是说他的参数必须是正数，比如

      $color: red; // rgb(255,0,0)
change-color($color, $red: 155); // rgb(155,0,0)
change-color($color, $green: 155); // rgb(255,155,0)

      • 1
      • 2
      • 3
    • scale-color

      在原始值调整百分比，所以他的值只能传递百分比，比如

      $color: red; // rgb(255,0,0)
scale-color($color, $red: -40%); // rgb(153,0,0)

      • 1
      • 2
    • darken/lighten

      在原有基础上固定调整，和 adjust-color 调整 $lightness 参数 一个意思

      $color: red; // rgb(255,0,0)
darken($color, 10%);
adjust-color($color, $lightness: -10%); 
lighten($color, 10%); 
adjust-color($color, $lightness: 10%); 

      • 1
      • 2
      • 3
      • 4
      • 5

    @forward 和 @use 的区别
    @forword 代表将文件变量，变成当前文件变量
    @use 表示将文件变量只当做当前临时使用变量

    实战应用

    • 实战1：类名里嵌套标签的写法

      .box {
	@at-root #{selector-unify(&, div)} {
		color: red;
	}
}
// 可以编译成
div.box {
  color: red;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

    • 实战2：想根据设计师的一个颜色，衍生出更多颜色
      颜色根据亮度不同划分成 3 份

      @use "sass:math";

$primary: red;

$colors: (
  base: $primary,
) !default;

@mixin generateColors($type, $num) {
  $colors: map-merge(
    $colors,
    (
      #{$type}-#{$num}:
        scale-color(
          map-get($colors, "base"),
          $lightness:
            if(
              $type == "light",
              percentage(math.div($num, 10)),
              percentage(math.div(-$num, 10))
            )
        )
    )
  ) !global;
}

@for $i from 1 through 3 {
  @include generateColors("light", $i);
  @include generateColors("dark", $i);
}

 // @debug $colors; // (base: red, light-1: #ff1a1a, dark-1: #e60000, light-2: #ff3333, dark-2: #cc0000, light-3: #ff4d4d, dark-3: #b30000)
.box {
	color: map-get($colors, 'base');
	background-color: map-get($colors, 'light-2');
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36

    • 实战3：我们要写很多动画，但是动画名称让人头疼

      @mixin generateAnimate($duration) {
  $name: #{unique-id()};

  @keyframes #{$name} {
    @content;
  }
  animation-duration: $duration;
  animation-name: $name;
  animation-iteration-count: infinite;
}

.box {
  @include generateAnimate(2s) {
    from {
      width: 0px;
    }
    to {
      width: 100px;
    }
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21

    • 实战4：写 @media 很烦（用 elementui 的断点，也可以自定义）

      @use "element-plus/theme-chalk/src/common/var.scss";
@mixin media($breakpoint) {
  $b: map-get(var.$breakpoints, $breakpoint);
  $bs: map-get(var.$breakpoints-spec, $breakpoint);
  @if $b or $bs {
    @if content-exists() {
      @media screen and #{if($b, $b, $bs)} {
        @content;
      }
    }
  }
}

.box {
	display: flex;
	@include media('sm') {
		flex-direction: column;
	}
	@include media('sm-an-down') {
		background-color: red;
	}
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22

    • 实战5：响应不同屏幕下盒子宽度不同

      @use "element-plus/theme-chalk/src/common/var.scss";
@mixin width($min, $sm: null, $md: null, $lg: null, $xl: null) {
  width: $min;

  @if $sm {
    @media screen and (min-width: var.$sm) {
      width: $sm;
    }
  }

  @if $md {
    @media screen and (min-width: var.$md) {
      width: $md;
    }
  }

  @if $lg {
    @media screen and (min-width: var.$lg) {
      width: $lg;
    }
  }

  @if $xl {
    @media screen and (min-width: var.$xl) {
      width: $xl;
    }
  }
}

.box {
  @include width(10px, $sm: 20px, $md: 30px, $lg: 50px, $xl: 80px);
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32

    • 实战6：模仿 tailwind，简简单单 500行代码，就可以模拟一个简易版的 tailwind

    $_styles: (
  "ml": margin-left,
  "mr": margin-right,
  "mt": margin-top,
  "mb": margin-bottom,
  "ma": margin,
  "pl": padding-left,
  "pr": padding-right,
  "pt": padding-top,
  "pb": padding-bottom,
  "pa": padding,
);

@for $i from 0 through 10 {
  @each $name, $expression in $_styles {
    .#{$name}-#{$i} {
      #{$expression}: #{$i * 4}px !important;
    }
    .mx-#{$i} {
      margin: 0 #{$i * 4}px !important;
    }
    .my-#{$i} {
      margin: #{$i * 4}px 0 !important;
    }
    .px-#{$i} {
      padding: 0 #{$i * 4}px !important;
    }
    .py-#{$i} {
      padding: #{$i * 4}px 0 !important;
    }
  }
}

@for $i from 1 through 100 {
  @if $i % 4 == 0 {
    @each $name, $expression in $_styles {
      .#{$name}-#{$i} {
        #{$expression}: #{$i * 4}px !important;
      }
      .mx-#{$i} {
        margin: 0 #{$i * 4}px !important;
      }
      .my-#{$i} {
        margin: #{$i * 4}px 0 !important;
      }
      .px-#{$i} {
        padding: 0 #{$i * 4}px !important;
      }
      .py-#{$i} {
        padding: #{$i * 4}px 0 !important;
      }
    }
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
  • 相关阅读:
    非关系型数据库之Redis【redis安装】
    浅谈One API
    01-Node中的系统模块：fs文件模块、path路径模块、正则、http模块
    PC小程序解密及反编译
    揭开Vue的响应式秘密：深入剖析Vue2与Vue3的差异与革新
    《精通嵌入式Linux编程》——解锁嵌入式Linux开发的无限可能
    14：00面试，14：06就出来了，问的问题有点变态。。。
    【JAVA-Day49】Java LinkedList集合详解
    【SQL server速成之路】触发器
    平均110万个漏洞被积压，企业漏洞管理状况堪忧
  • 原文地址：https://blog.csdn.net/weixin_42335036/article/details/126719365