SCSS日常应用

443 阅读2分钟

这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战

写在前面

scss 是日常应用非常多的 css 预处理工具,但部分小伙伴只做简单嵌套使用,这么完全是浪费,真正用好工具才能提升开发效率,下面记录一下日常常用的 scss 用法。

嵌套

对,提一下嵌套。除了常见的 .a{.b {...}} 等价 .a .b {...}
还有一些其他常见情况:

.c1 {
  color: #555;
  // 1  属性
  font: {
    weight: 800;
  }
  // 2 .c1:hover
  &:hover {
    color: rgb(177, 116, 25);
  }
  // 3 .c1-bro 不是.c1 .c1-bro; 除法记得加括号
  &-bro {
    height: (100px / 2);
    background: brown;
  }
}

上述代码分别对应: .c1 {font-weight: 800;}、.c1:hover{...}、c1同级的 .c1-bro {...}

变量

可以把常用的属性值(字体大小、内外边距、颜色)定义为变量并且给任意类型的默认值。
变量声明:$headings-color: green;
变量使用:color: $headings-color;

多次定义同名变量会优先使用当前局部作用域内之前定义的变量值。

$fs: 16px;
.c2 {
  // 1
  font-size: $fs;
  $fs: 18px;
  .c21 {
    // 2
    font-size: $fs;
  }
  $fs: 20px;
} 

上述代码分别对应 16px、18px

$fs: 18px!default; // 前文没有定义该变量,那就取这个值了
$fs: 18px!gloabal; // 某处全局覆盖某变量的值,强烈不建议你这么干。。

还有一种类似的写法不单独列一项了:

$fsN: 16;
.fs {
  &-#{$fsN} {
    font-size: #{$fsN}px;
  }
}

即:.fs-16: font-size: 16px; 注意 #

mixin

主要是实现【某一块样式代码】的复用,还可以接受对应参数作为属性值变量(有点像函数, 但更像模板)
mixin 定义:@mixin fc($c: #555) {color: $c;}
mixin 使用:.c3 { @include fc(#f00);}
编译的结果是: .c3 { color: #f00; }

为了更好的实现效果可以用指令加入相关判断和循环的逻辑:

@if @else @else if 条件判断,没啥好说的
@for
用法如下:

@for $item from 1 through 5 {
    .pl-#{$item} {
         padding-left-#{$item * 8} : $item * 8px ;
    }
}

from to 不含末位,from through 包含末位
@while
用法如下: @while $limit < 5 {.font-size-#{$limit} {...} $limit: $limit + 1} @each
用法如下: @each $item in $list { .XX-#{$item} {...}} 其实不太用

function

scss 默认有提供一堆各种处理的函数。这里指的是自定义函数。主要是用来处理返回属性的【值】。
function 定义: @function f1($c: #555) { @return $c; } @function f2($background...) { @return $background; }
function 使用: .c40 { color: f1(#f00); background: f2(#00FF00 url(bgimage.gif) no-repeat fixed top); }
ok,个人基本常用的就在这里了。如果你有更多想法,欢迎留言!!!😀😀😀