UIkit @use 考察 (2)

UIkit3

使用環境

Name	Version
Dart Sass	1.87.0
UIkit	3.23.6

準備

下記は、私が検証した時のディレクトリ一覧です。

.
├── custom
│   └── theme
│       ├── mixins.scss
│       └── variables.scss
├── node_modules
├── package.json
├── src
│   ├── less
│   └── scss
│       ├── components
│       ├── mixins.scss
│       ├── uikit.scss
│       └── variables.scss

各ファイルの中身

src/scss/uikit.scss

@use './components';

src/scss/mixins.scss

@use 'sass:meta';
@use 'sass:math';
@use 'theme/variables.scss' as *;
@use './components/mixin.scss' as *;

@mixin hook-accordion(){}
@mixin hook-accordion-item(){}
@mixin hook-accordion-title(){}
@mixin hook-accordion-title-hover(){}
@mixin hook-accordion-content(){}
@mixin hook-accordion-misc(){}
@mixin hook-inverse-accordion-item(){}
@mixin hook-inverse-accordion-title(){}
@mixin hook-inverse-accordion-title-hover(){}
@mixin hook-inverse-component-accordion() {

    .uk-accordion > * {
        @if(meta.mixin-exists("hook-inverse-accordion-item")) { @include hook-inverse-accordion-item(); }
    }

    .uk-accordion-title {
        color: $inverse-accordion-title-color;
        @if(meta.mixin-exists("hook-inverse-accordion-title")) { @include hook-inverse-accordion-title(); }
    }

    .uk-accordion-title:hover {
        color: $inverse-accordion-title-hover-color;
        @if(meta.mixin-exists("hook-inverse-accordion-title-hover")) { @include hook-inverse-accordion-title-hover(); }
    }

}

/* 以下省略 */

src/scss/variables.scss

@use './components/mixin' as *;
@use 'sass:math';
@use 'sass:color';
@use 'sass:string';

/* 以下省略 */

src/scss/components/_index.scss

// Base
@forward "base";
/* 省略 */
@forward './alert';
/* 以下省略 */

src/scss/components/alert.scss

下記は、あくまでもalert.scssの例で、@useの行は、内容によって増える場合もあります。

@use 'sass:meta';
@use 'theme/variables.scss' as *;
@use '../mixins.scss' as original;
@use 'theme/mixins.scss' as custom;

/* 省略 */

.uk-alert {
    position: relative;
    margin-bottom: $alert-margin-vertical;
    padding: $alert-padding $alert-padding-right $alert-padding $alert-padding;
    background: $alert-background;
    color: $alert-color;
    @if (meta.mixin-exists("hook-alert", "custom")) { @include custom.hook-alert(); }
    @else if (meta.mixin-exists("hook-alert", "original")) { @include original.hook-alert(); }
}

/* 以下省略 */

src/scss/components/inverse.scss

/* 省略 */

// @mixin hook-inverse(){}
@if ( $dropbar-color-mode == light ) { .uk-dropbar { @extend .uk-light !optional;} }
@if ( $dropbar-color-mode == dark ) { .uk-dropbar { @extend .uk-dark !optional;} }
@if ( $dropdown-color-mode == light ) { .uk-dropdown { @extend .uk-light !optional;} }
@if ( $dropdown-color-mode == dark ) { .uk-dropdown { @extend .uk-dark !optional;} 
/* 省略 */
@if ( $tile-default-color-mode == light ) { .uk-tile-default:not(.uk-preserve-color) { @extend .uk-light !optional;} }
@if ( $tile-default-color-mode == dark ) { .uk-tile-default:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
@if ( $tile-muted-color-mode == light ) { .uk-tile-muted:not(.uk-preserve-color) { @extend .uk-light !optional;} }
@if ( $tile-muted-color-mode == dark ) { .uk-tile-muted:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
@if ( $tile-primary-color-mode == light ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
@if ( $tile-primary-color-mode == dark ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
@if ( $tile-secondary-color-mode == light ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
@if ( $tile-secondary-color-mode == dark ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }

custom/theme/variables.scss

@forward '../src/scss/variables.scss' with (
  $global-color: #999,
);

custom/theme/mixins.scss

@mixin hook-alert() {
  border-radius: 0.25rem;
}

package.json

下記の通り、記述は一部で、scripts欄の前後は、省略しています。

{
    "scripts": {
        "scss": "sass --no-source-map --silence-deprecation=mixed-decls --load-path=custom ./src/scss/uikit.scss:dist/main.css",
    }
}