use / forword / 組み込み関数 Dart Sass 便機能徹底ガイド（Gulp タスクサンプルコード(postCSS)付）

your-project/
├── styles/
│   ├── main.scss
│   ├── utils/
│   │   ├── _utils.scss
│   │   ├── _mixins.scss
│   │   └── _variables.scss

@use './utils/_variables';
@use './utils/_mixins';

p {
  //variables + $color
  color: variables.$color;
}

section {
  //mixins + mq(md)
  @include mixins.mq(md) {
    color: variables.$color;
  }
}

@use 'mixins';
@use 'variables';

@use './utils/utils' as *;

p {
  color: $color;
}

section {
  @include mq(md) {
    color: $color;
  }
}

your-project/
├── styles/
│   ├── main.scss
│   ├── components/
│   │   ├── box/
│   │   │   ├── _a.scss
│   │   │   ├── _b.scss
│   │   │   ├── _index.scss

@mixin a {
  padding: 10px;
  background-color: #f0f0f0;
}

@mixin a {
  padding: 20px;
  background-color: #e0e0e0;
}

@forward 'a';
@forward 'b';

@use './components/box/index' as box;

.c-box--a {
  @include box.a;
}

.c-box--b {
  @include box.b;
}

.c-box--c {
  @include box.a;
  border: #000 1px solid;
}

your-project/
│   ├── styles/
│   │   ├── components/
│   │   │   └── button.scss

@use 'sass:color';
$button-bg-color: #3498db;
.button {
  padding: 10px 20px;
  color: #fff;
  background-color: $button-bg-color;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;

  &:hover {
    background-color: darken($button-bg-color, 10%);
  }
}

@use 'sass:color';

//エイリアス化
@use './utils/utils' as *;

$button-bg-color: #3498db;
.button {
  padding: 10px 20px;
  color: #fff;
  background-color: $button-bg-color;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;

  &:hover {
    background-color: darken($button-bg-color, 10%);
  }
}

let list = ['1px solid red', '2px dashed blue', '3px dotted green'];

$list: 1px solid red, 2px dashed blue, 3px dotted green;

@for $i from 1 through length($list) {
  .box-#{$i} {
    border: nth($list, $i);
  }
}

your-project/
│   ├── styles/
│   │   ├── utils/
│   │   │   ├── _utils.scss
│   │   │   ├── _mixins.scss
│   │   │   ├── _variables.scss
│   │   ├── components/
│   │   │   └── button.scss

@use 'sass:list';

$list1: 1px solid red, 2px dashed blue;
$list2: 3px dotted green, 4px double yellow;

// $list1と$list2を結合
$combined-list: list.join($list1, $list2);

@for $i from 1 through list.length($combined-list) {
  .box-#{$i} {
    border: list.nth($combined-list, $i);
  }
}

const breakpoints = {
  sm: 425,
  md: 768,
  lg: 1080,
  xl: 1366,
};

$breakpoints: (
  'sm': 425,
  'md': 768,
  'lg': 1080,
  'xl': 1366,
);

@use 'sass:map';
@use 'variables';
@use 'mixins';

@use 'sass:map';
$u-container: 1080;
$breakpoints: (
  'sm': 425,
  'md': 768,
  'lg': $u-container,
  'xl': 1366,
);

@use 'sass:map';
@use 'variables' as *;

@mixin mq($breakpoint: 'md') {
  @media screen and (min-width:  #{map.get($breakpoints, $breakpoint)px) {
    @content;
  }
}

@use './utils/utils' as *;
@use 'sass:color';

$button-bg-color: #3498db;

.button {
  padding: 10px 20px;
  color: #fff;
  background-color: $button-bg-color;
  border: none;
  border-radius: 4px;

  // 768px以上
  @include mq(){
    transition: background-color 0.3s;
    &:hover {
      background-color: darken($button-bg-color, 10%);
    }
  }
}

@use 'sass:map';
@use 'variables' as *;

@mixin mq($breakpoint: 'md', $larger: true) {
  $width: #{map-get($breakpoints, $breakpoint) + if($larger, 0, 1)};
  $type: if($larger, 'min', 'max');
  @media screen and (#{$type}-width: #{$width}px) {
    @content;
  }
}

@use 'sass:selector';

$inner: '__inner ';
$root: '.c-header';

#{$root} {
  // デフォルトのスタイル
  &#{$inner} {
    background: #fff;
    transition: bacground-color 1s ease-in;
  }
  // JavaScriptなどで別の設定をしたい場合
  #{selector.nest('&', '.is-transparent', $inner)} {
    background: transparent;
  }
}

.c-header__inner {
  background: #fff;
  transition: bacground-color 1s ease-in;
}

.c-header.is-transparent__inner {
  background: transparent;
}

@use 'sass:map';
@use 'sass:selector';

//プレースホルダーセレクタ
%label {
  border-radius: 8px;
  padding: 4px 16px;
  color: #fff;
}

$base-selector: '.label';
$labels: (
  red: #ff0000,
  blue: #0000ff,
  green: #008000,
);

@each $key, $color in $labels {
  #{selector.append($base-selector, '.#{$key}')} {
    background: $color;
    @extend %label;
  }
}

.label.red, .label.blue, .label.green {
  border-radius: 8px;
  padding: 4px 16px;
  color: #fff;
}

.label.red {
  background: #ff0000;
}

.label.blue {
  background: #0000ff;
}

.label.green {
  background: #008000;

$primary-color: blue !default;
$font-size: 16px !default;

@mixin box($color: $primary-color, $font-size: $font-size) {
  color: $color;
  font-size: $font-size;
  border: solid 1px $color;
  padding: 16px;
  border-radius: 16px;
}

@use 'mixins/box' as *;

@include box;

@use 'mixins/box' with (
  $primary-color: white,
  $font-size: 18px
);

@use 'mixins/box' as box;

@include box.box;

npm init --y

{
  ...
  "main": "gulpfile.js",
  "type": "module",
  "scripts": {
    "start": "gulp",
    "prod": "gulp --env production"
  },
  "browserslist": [
    "last 2 versions",
    "> 2%"
  ],
  ...
}

npm i プラグイン1 プラグイン2 ...

import { src, dest, series, parallel, watch } from 'gulp';
import minimist from 'minimist';
import bs from 'browser-sync';
import replace from 'gulp-replace';
import gulpIf from 'gulp-if';
import plumber from 'gulp-plumber';
import gulpSass from 'gulp-sass';
import dartSass from 'sass';
import postcss from 'gulp-postcss';
import cssdeclsort from 'css-declaration-sorter';
import mqpacker from 'css-mqpacker';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import rename from 'gulp-rename';

//コンパイラーの指定
const sassCompiler = gulpSass(dartSass);

// パス設定
const paths = {
  srcDir: 'src/', //開発ディレクトリ
  rootDir: 'public/', //コンパイルしたファイル格納するディレクトリ
};

// 開発環境のパス
const srcDir = {
  scss: [paths.srcDir + 'scss/*.scss', paths.srcDir + 'scss/**/*.scss'],
};

// 出力パス
const destDir = {
  css: paths.rootDir + 'assets/css/',
};

// 開発環境設定
const envSettings = {
  string: 'env',
  default: {
    env: process.env.NODE_ENV || 'development',
  },
};

//モード切り替え
const options = minimist(process.argv.slice(2), envSettings);
const isProduction = options.env === 'production';

// SCSSのコンパイルとPostCSS処理
const compileScss = (done) => {
  console.log('Starging task: compileScss...')
  // postcss の プラグイン
  let plugins = [
    autoprefixer(),
    cssdeclsort({ order: 'smacss' }),
    mqpacker(),
  ];
  // プロダクションモードの場合はCSSを圧縮
  if (isProduction) plugins = [...plugins, cssnano({ autoprefixer: false })]
  src(srcDir.scss, { sourcemaps: !isProduction })
    .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
    .pipe(sassCompiler.sync().on('error', sassCompiler.logError)))
    .pipe(postcss(plugins))
    .pipe(gulpIf(!isProduction, sourcemaps.write('./_map')))
    .pipe(dest(destDir.css))
    .pipe(bs.stream());
    console.log('Going on task: compileScss 👍️')
  done();
};
export default compileScss;

npm start

npm run prod

npm i -D prettier
# もしくは
npm install --save-dev prettier

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "overrides": [
    {
      "files": "*.scss",
      "options": {
        "parser": "scss"
      }
    }
  ]
}

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "files.eol": "\n",
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[html]": {
    "editor.tabSize": 2
  },
  "[scss]": {
    "editor.tabSize": 2
  }
}

{
  "main": "gulpfile.js",
  "type": "module",
  "scripts": {
    "start": "gulp",
    "prod": "gulp --env production",
    "lint:scss": "npx prettier --write \"src/**/*.scss\""
  }
}

npm run lint:scss