sass 的使用让你变得骚起来
废人多忘事，记录一下，防止自己总是忘
想看实战的，请划到最下边
有什么问题，也可以留言，我会尽快帮你解答
变量
$color: red;
.box {
color: $color;
}
集合
@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");
}
插值
@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;
}
}
}
自带函数
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);
}
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
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
/* 改变 */
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
/* 原有基础改变 */
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)
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) // 将颜色变得更透明
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);
}
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) // 返回所有值
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 之间的随机整数
/* 除法使用 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);
}
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));
}
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,
)
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
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"
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) - 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) - scale-color
在原始值调整百分比，所以他的值只能传递百分比，比如
$color: red; // rgb(255,0,0) scale-color($color, $red: -40%); // rgb(153,0,0) - 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%);
@forward 和 @use 的区别
@forword 代表将文件变量，变成当前文件变量
@use 表示将文件变量只当做当前临时使用变量
实战应用
-
实战1：类名里嵌套标签的写法
.box { @at-root #{ selector-unify(&, div)} { color: red; } } // 可以编译成 div.box { color: red; } -
实战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'); } -
实战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; } } } -
实战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; } } -
实战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); }