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

一些使用 sass 的坑
更新于: 2025-05-10 13:17:46

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;
}

Dart Sass VS Old sass

功能Dart SassOld sass
颜色: darken
@use "sass:color";

$primary-color: #3498db !default;
$focus-input-color: color.adjust($primary-color, $lightness: -10%) !default;

body {
  background: gray;
}

.btn-primary {
  background-color: $primary-color;
  color: white;
}

.input-focus {
  border-color: $focus-input-color;
}

$focus-old-way: darken($primary-color, 10%) !default;
颜色: lighten
@use "sass:color";

body {
  background: gray;
}

$primary-color: #3498db !default;
// $focus-input-color: lighten($primary-color, 10%) !default;
// use color.adjust($color, $property: value)
$focus-input-color: color.adjust($primary-color, $lightness: 10%) !default;


.btn-primary {
  background-color: $primary-color;
  color: white;
}
.input-focus {
  border-color: $focus-input-color;
}
$focus-input-color: lighten($primary-color, 10%) !default;
除法
@use "sass:math";

.container {
  display: flex;
}

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

.container {
  display: flex;
}

# Recommendation: math.div(1, 10) or calc(1 / 10)
article[role="main"] {
  width: (1/10) * 100%;
}

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;
}