2021.05.31

ブランチ:page-layout

🎉 TIL

✨ 0. プロジェクトフォルダ構造

😊 構成部品/ページスタイル

各コンポーネントは「assets/scss/components/[コンポーネント名]」です.scss'
各ページは「assets/scss/views/[ページ名]です.「scss」のscssファイルをインポートしてスタイルを適用します.

- 'components/AppHeader.vue'

- 'views/Home.vue'

1.SCSS混入によるメディア照会の作成

-ファイル名に「」を付ける理由

:scssファイル名の前に「」(参考欄)を付けると、単独のcssファイルにコンパイルされないようにします.
'_mixins.css「ファイルは単独のcssファイルにコンパイルする必要がないので、ファイル名の前に「」(参考欄)を付けました.
デスクトップで初めて書くので、ビューポートは広い順に書きます.

- _mixins.scss

// Break Point
$mobile-small: 375px;
$mobile: 425px;
$tablet: 768px;
$labtop: 1024px;
$desktop: 1400px;

// Mixins
@mixin desktop {
    @media (max-width: #{$desktop}) {
        @content;
    }
}

@mixin labtop {
    @media (max-width: #{$labtop}) {
        @content;
    }
}

@mixin tablet {
    @media (max-width: #{$tablet}) {
        @content;
    }
}

@mixin mobile {
    @media (max-width: #{$mobile}) {
        @content;
    }
}

@mixin mobile-small {
    @media (max-width: #{$mobile-small}) {
        @content;
    }
}

-作成したmixin。scssの適用

// vue.config.js
loaderOptions: {
	scss: {
		additionalData: `
			@import "@/assets/scss/_variables.scss";
			@import "@/assets/scss/_mixins.scss";
		`,
	},
},

2. '.vueファイルからscssファイルをインポート

「@/」はvscode aliasとして「src/」と同じ設定です.したがって、scssファイル(モジュール)は、CSSの@importを介してロードすることができる.

// App.vue
<style lang="scss">
@import '@/assets/scss/layout.scss';
</style>

3.font-size:10 pxに初期化

:font-size: 62.5%、初期化可能フォントサイズは1 rem=10 pxです.

/*common.scss*/
html, body {
	font-size: 62.5%;
}

/*layout.scss*/
.app {
	/* 16px */
	font-size: 1.6rem;
}

responsive font size