sass: 学习笔记、一些坑/dart-sass/sass

一些使用 sass 的坑
更新于: 2023-10-17 00:50:55

cheatsheet

描述代码其它(编译后)
sass 在循环 range 的时候，会报错, list 没问题
所以，@include 的时候，直接写 list，不要用 range 生成
@mixin generator-line-height($list) {
  @each $i in $list {
    .lh-#{$i} {
      line-height: $i;
    }
  }
}


$list1: (1,2,3);     # 这种list会正常
$list2: range(1,10); # 放下面会报错
@include generator-line-height($list1);
 
map + each 的使用
@mixin generator-font-family($ff-map) {
  $prefix: '.' + '' + 'ff-';
  @each $key, $value in $ff-map {
    #{$prefix}#{$key} {
      font-family: $value;
    }
  }
}

$ff-map: (
    'semibold': "PingFangSC-Semibold",
    'medium': "PingFangSC-Medium",
    'regular': "PingFangSC-Regular",
);

@include generator-font-family($ff-map);
.ff-semibold {
  font-family: "PingFangSC-Semibold";
}

.ff-medium {
  font-family: "PingFangSC-Medium";
}

.ff-regular {
  font-family: "PingFangSC-Regular";
}
百分比
@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}
.container {
  display: flex;
}

article[role="main"] {
  width: 62.5%;
}

aside[role="complementary"] {
  width: 31.25%;
  margin-left: auto;
}
partial
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

nodejs 使用 sass

  • 等价命令行: $ npx sass ./scss/app.scss ./scss/style.css
const sass = require('sass');
const fs = require('fs');
const file = './scss/app.scss';
const result = sass.compile(file, { sourceMap: true });

// 文件也需要自己生成
fs.writeFileSync('./scss/style.css', result.css);
// 这里的 sourceMap 需要自己去生成
if (result.sourceMap) fs.writeFileSync('./scss/style.css.map', JSON.stringify(result.sourceMap));
文件名文件内容
./scss/app.scss
.n1 {
  .n2 {
    color: red;
    font-family: serif;
    user-select: none;
  }
}
./scss/style.css
.n1 .n2 {
  color: red;
  font-family: serif;
  user-select: none;
}

参考