Scss - 小知识与进阶功能 ( 上 )

之前介绍过 SCSS 的基础功能了，没看过可以看这里唷，这次来介绍一些小知识与进阶的功能吧!

SCSS 小知识

注解

SCSS 的注解有分为两种，一种会被输出一种不会

编译前

// 我不会被编译/* 我会被编译 */

编译后

/* 我会被编译 */

连结符号

在 SCSS 中宣告变数或函式名称时，- 与 _ 代表的是相同的东西，也就是说 list-size 与 list_size 皆为相同的变数

编译前

$list-size: 16px;$list_size: 20px;// 相同变数则后面覆盖前面.list-item {  font-size: $list-size;}

编译后

.list-item {  font-size: 20px;}

单位运算

SCSS 中有分为无单位、正常单位、複杂单位三种，其中複杂单位无法被编译，其余两者皆可编译，如果以正确的单位编译就不会出错

.list {  // 複杂单位 - 无法编译  font-size: 10px * 10px; // 100px*px  // 正常单位 - 可编译  font-size: 10px * 10px / 10px; // 100px  // 无单位 - 可编译  font-size: 10 * 10; // 100}

也就是说只要单位能正确抵销便能正确编译

编译前

$transition-speed: 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, 110px);}

编译后

.slider {  position: absolute;  left: 10px;  -webkit-transition: left 2s;  transition: left 2s;}.slider:hover {  left: 110px;}

@media 与 @supports

当需要写到 @media 或 @supports 时，可以将其写在样式内侧，编译时会自动移至外层

编译前

$layout-breakpoint-small: 960px;@media (min-width: $layout-breakpoint-small) {  .banner {    position: fixed;    @supports (position: sticky) {      position: sticky;    }  }}

编译后

@media (min-width: 960px) {  .banner {    position: fixed;  }  @supports ((position: -webkit-sticky) or (position: sticky)) {    .banner {      position: -webkit-sticky;      position: sticky;    }  }}

阵列

scss 中的阵列有多种写法与特性

nth(10px 12px 16px, 3); // 16pxnth((10px, 12px, 16px), 3); // 16pxnth([10px, 12px, 16px], 3); // 16px

true 与 false

scss 中认定的 false 只有 false 与 null 两个，其余的皆为 true，要特别注意

null 会被省略

若属性值是 null，则该属性则会被省略

编译前

$size: ('a': 10px, 'b': 12px);h3 {  font: {    size: map-get($size, 'c');    weight: bold;  }}

编译后

h3 {  font-weight: bold;}

开发者侦错

这边介绍的是 @error、@warn 与 @debug，前两者是开发者给用户的提醒，而 @debug 比较像是开发时所用的 console.log 一样

@error

将提示写入，若编译时出现条件内的条件，则会跳出该错误提示提醒用户

@mixin reflexive-position($property, $value) {  @if $property != left and $property != right {    @error "Property #{$property} must be either left or right.";  }  $left-value: if($property == right, initial, $value);  $right-value: if($property == right, $value, initial);  left: $left-value;  right: $right-value;}.sidebar {  @include reflexive-position(top, 12px);}

Error: Property top must be either left or right.>>     @error "Property #{$property} must be either left or right.";   ----^

@warn

将提示写入，若编译时出现条件内的条件，则会跳出该警告提示提醒用户

$known-prefixes: webkit, moz, ms, o;@mixin prefix($property, $value, $prefixes) {  @each $prefix in $prefixes {    @if not index($known-prefixes, $prefix) {      @warn "Unknown prefix #{$prefix}.";    }    -#{$prefix}-#{$property}: $value;  }  #{$property}: $value;}.tilt {  @include prefix(transform, rotate(15deg), wekbit ms);}

Warning: Unknown prefix wekbit.    test.scss 6:7   prefix()    test.scss 16:3  root stylesheet

@debug

开发时写入，提供开发者确认程式运行是否如预期

@mixin size($size, $space) {  $height: (2 * $space) + $size;  @debug 'divider offset: #{$height}';  line-height: $height;}.list {  @include size(20px, 5px);}

test.scss:3 Debug: height: 30px

内建函式

SCSS 的内建函式相当的多，这边介绍几个比较常看到的，其他可翻阅文件

数字

// 返回正整数abs(-10px); // 10px// 检查单位是否一致comparable(10px, 5em); // false// 返回随机数random(); // 0 ~ 1 随机数random(10); // 1 ~ 10 随机数// 无条件进位ceil(9.1px); // 10px// 无条件捨去floor(10.9px); // 10px// 四捨五入round(4.5px); // 5px// 最小值min(1px,30px,50px); // 1px// 最大值max(1px,30px,50px); // 50px

字串

// 返回字串位置str-index("Helvetica Neue", "Neue"); // 11// 返回字串长度str-length("Helvetica Neue"); // 14// 撷取字串str-slice("Helvetica Neue", 1, 9); // "Helvetica"// 返回带引号的字串quote(Helvetica); // "Helvetica"// 返回不带引号的字串unquote("Helvetica"); // Helvetica

颜色

// 增加亮度darken(#ff0000,10%); // #cc0000// 减少亮度lighten(#ff0000,10%); // #ff3333// 降低饱和度desaturate(#ff0000, 20%); // #e61a1a;// 混合颜色，第三个参数表示第一个颜色的比例mix(#036, #d2e1dd, 40%); // #7e9bad// 返回反相色invert(#ff0000); // #00ffff// 调整色相环adjust-hue(#ff0000, 50deg); // #ffd500

阵列

// 返回阵列长度length(10px 20px 30px); // 3// 返回索引index(10px 20px 30px, 20px); // 2// 返回该索引的值nth(10px 20px 30px, 3); // 30px

map

$font-weights: ("regular": 400, "medium": 500, "bold": 700);$font-weights-2: ("regular": 400, "bolder": 900);// 返回对应的值map-get($font-weights, "medium"); // 500// 检查 key 是否存在map-has-key($font-weights, "regular"); // true// 合併两个物件// ('regular': 400, 'medium': 500, 'bold': 700, 'bolder': 900)map-merge($font-weights, $font-weights-2); 

通用

// 返回类型type-of(#ffffff); // color// 返回 unquoted + 字串形式inspect(10px 20px 30px); // unquote("10px 20px 30px")

这次介绍的有小知识与一些内建函式，其他功能部分会在下篇介绍~