勉強会SCSSサンプル

//========================================================
// [_variables.scss]
// 共通パラメータ
//========================================================

//文字色
$COLOR_TXT_LIGHT_EX: #888888;
$COLOR_TXT_LIGHT: #555555;
$COLOR_TXT: #333333;
$COLOR_TXT_DARK: #000;
$COLOR_TXT_DARK_EX: #000;
//線色
$COLOR_LINE_LIGHT_EX: #000;
$COLOR_LINE_LIGHT: #aaaaaa;
$COLOR_LINE: #707070;
$COLOR_LINE_DARK: #555555;
$COLOR_LINE_DARK_EX: #000;
//ベースカラー
$COLOR_BASE1: #f8f8f8;
$COLOR_BASE2: #ffffff;
$COLOR_BASE3: #dddddd;
$COLOR_BASE4: #000;
$COLOR_BASE5: #000;
//メインカラー
$COLOR_MAIN1: #e3e2ce;
$COLOR_MAIN2: #000;
$COLOR_MAIN3: #000;
$COLOR_MAIN4: #000;
$COLOR_MAIN5: #000;
//アクセントカラー
$COLOR_ACCENT1: #ff5c41;
$COLOR_ACCENT2: #4aa1eb;
$COLOR_ACCENT3: #000000;
$COLOR_ACCENT4: #000;
$COLOR_ACCENT5: #000;
//その他カラー
$COLOR_NOIMAGE: #AAAAAA;

//z-index管理
$Z_IDX_DEADEND: 2147483647;
$Z_IDX_MODAL: 999;
$Z_IDX_HEADER: 100;
$Z_IDX_TOOLTIP: 10;
$Z_IDX_DEFAULT: 1;
$Z_IDX_BACKMOST: -1;

//幅
$MAX-WIDTH_PAGE: 1160px;
$MAX-WIDTH_PAGE2: 958px;
$MAX-WIDTH_PAGE3: 640px;
$MAX-WIDTH_PAGE_SP: 500px;
$MIN-WIDTH_PAGE: 640px;
$WIDTH_CONTENTS_PC: 1400px;
$WIDTH_CONTENTS_PC_HEAD: 1160px;
$WIDTH_CONTENTS_TABLET: 500px;
$WIDTH_CONTENTS_SP: 300px;
$UI_PARTS_SIZE: 44px;
$PADDING_INNER: 24px;
$PADDING_INPUT_INNER: 4px;
//高さ
$HEIGHT_HEADER: 64px;

//その他
$M-SEC_TRANSITION: 300ms;
$ROOT_FONTSIZE_PER: 62.5%;
$OPACITY_HOVER: 0.8;

//========================================================
// [_mixins.scss]
// vwの計算など関数としてまとめておく
//========================================================
@charset "UTF-8";
@use "sass:math"; //math.div（除算）利用のため
@use "_variables" as v;

//-------------------------------------------------------
//[getVw]
// vwに変換する関数（変換対象の単位：px、rem）
//-------------------------------------------------------
@function getVw($minval, $base: 375px) {

  $value: $minval;

  //単位
  $unit: unit($minval);

  @if ($unit == 'px') {
    $value: math.div($minval, $base) * 100vw;
  }
  @else {
    @warn '変換対象外の単位です';
    @return $value;
  }

  @return $value;
}

//-------------------------------------------------------
//[x-strip-unit]
// 単位を除去して数値のみを返す関数
//
// http://stackoverflow.com/a/12335841
// http://jsdo.it/kosei27/hqio
//
// Strip unit from number
// @function x-strip-unit
// @param    {Number} $number number to strip unit
// @return   {Number} unitless number
// @example
//     x-strip-unit(-16px)        => -16
//     x-strip-unit(0.5em)        => 0.5
//     x-strip-unit(0.5cm + 10mm) => 1.5
//-------------------------------------------------------
@function x-strip-unit ($number) {

  @if type-of($number) != number {
      @warn '#{ $number } is not a number.';
      @return $number;
  }
  @return math.div($number, $number * 0 + 1);
}

//========================================================
// [_mixins.scss]
// コンポーネント単位で定義できるCSSをmixinとして定義する
//========================================================
@charset "UTF-8";
@use "_variables" as v;


// --------------------------------------------------------
// [mq]
//   概要：
//    メディアクエリの記述短縮および、分かり安さのために定義。
//    PC用レイアウトを定義したい時は呼出元に「@include mq(PC){}」と記述
// --------------------------------------------------------
$breakpoints: (
  'MOBILE': 'screen and (max-width: 1024px)',
  'SP': 'screen and (min-width: 320px)',
  'TAB': 'screen and (min-width: 480px)',
  'PC': 'screen and (min-width: 1025px)',
  'FULL': 'screen and (min-width: 1599px)'
);
@mixin mq($breakpoint: SP) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

// --------------------------------------------------------
// [setSimpleArrowWithPElem]
//   概要：
//    擬似要素での使用を想定した矢印をCSSで描画する 
//    実装イメージ … [次へ >]
//    ※矢印は縦中央に配置する
//   引数：
//    $arrowEdgeLength … 矢印１辺の長さ（※必須）
//    $arrowLineWidth … 矢印の太さ（※必須）
//    $color … 色
//    $triangleDirection … 三角形の向きを指定（right：→ / left：← / down：↓ / up：↑）
//   このmixinが想定している呼出元の構造：
//    擬似要素（*::bofore,*::after）
//    親要素となる*には、「position:relative」の指定が必要
// --------------------------------------------------------
@mixin setSimpleArrowWithPElem($arrowEdgeLength, $arrowLineWidth, $color: #000, $direction: right){
  content: "";
  //inlineのままだとtransformが効かないので、block化
  //(inline-blockはabsoluteが効かないので不採用)
  display: block;
  position: absolute;
  width: $arrowEdgeLength;
  height: $arrowEdgeLength;
  border-top: solid $arrowLineWidth $color;
  border-left: solid $arrowLineWidth $color;

  @if $direction == up {
    transform: rotate(45deg);
  } @else if $direction == down {
    transform: rotate(225deg);
  } @else if $direction == left {
    transform: rotate(-45deg);
  } @else {
    transform: rotate(-225deg);
  }

  //表示位置は呼び出し元で指定
  @content;
}

@charset "UTF-8";
//--- ①変数読込み ----------
@use "variables" as v;

$HEIGHT_HEADER: 80px;
$HEIGHT_FOOTER: 200px;

//--- ②mixin読込み ----------
@use "mixins" as mx;

//--- ③関数読込み ----------
@use "functions" as f;


//--- ④ここよりスタイル定義 ----------