AtomとSass( SCSS )で目次機能をつけてCSSコードを管理する

今更だけど、Sassを導入するとCSSのコード管理が便利。もっと便利な環境を用意するには?と考えて編み出した現時点で自分的にベストな方法をまとめた。

 

環境:エディタはAtom、SCSSでコードを記述

エディタ:Atom

CSSファイル:SCSSで記述

 

とりあえずSass(SCSS)では以下の変数を指定すれば良いかと。

変数:フォントや配色の管理

フォントと配色は、

 

[フォント]
  • mainfont
  • subfont
  • textfont

 

[配色]
  • maincolor
  • subcolor
  • accentcolor

といった感じにわけている。

変数:解像度のターニングポイント

モバイル対応であれば、レスポンシブデザインにしたいところ。

人によってベストな解像度のブレイクポイントの考え方は様々だろうし、自分がベストだと思うブレイクポイントにしたら良いだろう。

 


//  breakpoint
$device-large-pc: 1280px;
$device-small-pc: 960px;
$device-tablet: 782px;
$device-mobile: 480px;

@mixin max-screen($breakpoint) {
  @media screen and (max-width: $breakpoint) {
    @content;
  }
}

@mixin min-screen($breakpoint) {
  @media screen and (min-width: $breakpoint) {
    @content;
  }
}

@mixin screen($breakpoint-min,$breakpoint-max) {
  @media screen and (min-width: $breakpoint-min) and (max-width: $breakpoint-max) {
    @content;
  }
}

 


div.example {
  @include max-screen($tablet-mobile) {
    color: #fff;
    background: #000;
  }
}

 

以前はmobile.css, tablet.cssなどと解像度によってファイル分けしていたのだけど、一つのファイルで上記で指定した方が個人的にコード管理がしやすいと思った。

結果的にめちゃくちゃ長いCSSファイルでスクロールが大変になるので、Atomの検索機能を利用して、目次機能をつくる。

 

Table of Content機能

目次機能



//---------------------------
// Table Of Contents : @TOC
//---------------------------
// @common
// --wordpress-class
// --scroll-bar
// --pagenation
// @header.php
// --global-header
// --global-nav
// --humberger-nav
// @home.php
// --home-main-area
// --home-side-area
// @post-example1.php
// @post-example2.php
// @page.php
// @page-example1.php
// --section1
// --section2
// --section3
// --section4
// @page-example2.php
// @single.php
// @example.php
// @example2.php
// --section1
// --section2

 


// ヘッダー
//  トップページ
//  フッター

というエリアの名称ではなく


//  @header.php
//  @index.php
//  @footer.php

というようにファイル名で書いている。

 

/* コメントアウト */ではなく// コメントアウトで書いている理由は、コンパイル後にTOCがコメントアウトされないようにするため。

 

終わりに

もし他に良い案や開発環境があれば教えてほしい。

 

@uotomiz

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO