シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。
まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。
ページを見ても、あんまり意味が無いっすね。えぇ。
いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
んでは、続きにて中身の説明なんぞをしていきます。
]]>
中身のご説明
zipを解凍すると「newsite_sass_ver01」ってフォルダができます。
バッチファイルに関しては「バッチファイルを使ってカンタンに黒い画面でSassを利用する 」を参考にして下さい。
各SCSSファイルの概要
sassフォルダに入ってる、各SCSSファイルについてカンタンに。
_layout.scss ヘッダーとかフッターとかレイアウト関係用。
_main.scss メインコンテンツ等のスタイル用です。一番ガツガツ書いていくファイル。
_mixin.scss ミックスインとか@extendなどが定義されてます。
_print.scss 印刷用で使うSCSSファイル。
_reset.scss XHTMLとHTML5のリセットスタイル、フォントサイズの相対指定が書かれているファイル。
_setting.scss なんか、色々を設定する為のファイル。
style.scss style.cssに変換するファイルで、上記すべてをインポートするファイル。
後は、ページ固有のスタイルが必要な場合に、SCSSファイルを追加していく感じになるかなーと思います。あと味さん でも使ってるSCSSファイルを紹介しているので、そちらも参考になると思います。
設定の変更
色々を設定する為の_setting.scssファイルは、一部の値をちょっと変えたりするだけで、ガラっとスタイルを変更したり出来ます。
リセットCSSの切り替え
リセットCSSをHTML5に切り替えたい場合は、$use_html5 の値を「false」から「true」にすればOKです。
VIDEO
値を変更するだけで、ガラっと吐き出されるCSSが変わるのが面白いかなーと。
付与するベンダープレフィックスの変更
$set_prefix の値を変更すれば、次のように付与されるベンダープレフィックスが変更されるので、同じようにインポートして使ってる他のスタイルも一瞬で変更できます。
VIDEO
余白調整用のスタイルを吐き出す
あまり使いたくはないけど、やはり状況に寄っては余白を調整するためだけのクラスが用意されてると便利だったりしますよね。
デフォルトでは、これらのクラスは吐き出されないようにしていますが、これも値を「false」から「true」に変更することで吐き出されるので必要に応じて使い分けが出来る感じです。
VIDEO
なお、この余白調整用のクラスは「_mixin.scss」に定義されてますので、変更したい場合は次の部分を変えてもらえれば良いかと。
// 余白調整用のクラス
@if $use_spacing_classes {
@for $i from 0 through 20 {
.mt#{$i * 5} { margin-top: 5px * $i !important; }
.mb#{$i * 5} { margin-bottom: 5px * $i !important; }
.pt#{$i * 5} { padding-top: 5px * $i !important; }
.pb#{$i * 5} { padding-bottom: 5px * $i !important; }
}
}
今は、5px刻みにしているので、10pxにしたい場合は 5 ん所を10にするだけでOKです。また、今は0から20回繰り返されるので100 までの各クラスが吐き出されますが、多すぎたり少ないって思う場合は、この20を変えればOKです。
他にも、paddingの調整はいらない場合は、コメントアウトか消してしまえばOKです。
試しに、10px刻みにして繰り返し回数を20から10に。paddingは吐き出さない様にした場合は次のような感じです。
// 余白調整用のクラス
@if $use_spacing_classes {
@for $i from 0 through 10 {
.mt#{$i * 10} { margin-top: 10px * $i !important; }
.mb#{$i * 10} { margin-bottom: 10px * $i !important; }
//.pt#{$i * 5} { padding-top: 5px * $i !important; }
//.pb#{$i * 5} { padding-bottom: 5px * $i !important; }
}
}
こんな風に、色んな設定が出来たり、ちょっと数値を変えるだけで吐き出されるCSSを大幅に変更できます。
色々試して、遊んでみるのが良いのかなーと！
各SCSSファイル
最後に、ちょっと長いけど各SCSSファイルのコードをそのまま貼っておきます。
_layout.scss
@charset "utf-8";
// ===================================================================
// レイアウト関係のスタイル
// ===================================================================
/*----------------------------------------------------
#page
----------------------------------------------------*/
#page {
width: $base_width;
margin: 0 auto;
padding: 10px;
background: $sub_color;
font-size: fz(12);
}
/*----------------------------------------------------
#contents
----------------------------------------------------*/
#contents {
@extend .clearfix;
width: $base_width - 20px;
padding: 10px;
margin-bottom: $base_margin_bottom;
background: #ccc;
.pageTop {
clear: both;
margin: 0;
text-align: right;
}
}
/*----------------------------------------------------
ヘッダー
----------------------------------------------------*/
#header {
width: $base_width;
margin-bottom: $base_margin_bottom;
background: #fff;
#nav {
@extend .clearfix;
li {
float: left;
}
}
}
/*----------------------------------------------------
フッター
----------------------------------------------------*/
#footer {
@extend .clearfix;
width: $base_width;
background: #ccc;
.copyright {
text-align: center;
}
}
_main.scss
@charset "utf-8";
// ===================================================================
// メイン - このファイルにメインコンテンツ部分のスタイルをガツガツ書いていく。
// ===================================================================
/* TEST */
.test {
@include border_radius;
@include border_radius(5px 10px 2px 12%);
@include bg_size(100px);
@include min_height(777px);
@extend .clearfix;
@extend .box_size;
background: url(#{$img_path}share/bg_test.gif);
font-size: fz(18);
}
.opTest img:hover {
@extend .opacity;
}
/*----------------------------------------------------
element style
----------------------------------------------------*/
body {
background: $main_color;
border-top: 4px solid $accent_color;
color: $font_color;
font-family: $base_font;
}
input, textarea {
font-family: $base_font;
}
// for IE6
* html {
body, input, textarea {
font-family: $base_font_ie;
}
}
// 外部リンクアイコン
.externalIcon {
margin: 0 3px;
vertical-align: middle;
}
// リンク
a {
&:link {
color: $link_color;
}
&:visited {
color: $link_color_visited;
}
&:hover {
text-decoration: none;
color: $link_color_hover;
}
&:active {
color: $link_color_active;
}
}
// レイアウト関係のスタイル読み込み
@import "layout";
/*----------------------------------------------------
#main
----------------------------------------------------*/
#main {
float: left;
width: 600px;
background: $main_color;
@include border_radius;
table, ol, ul, dl, blockquote, pre, p {
margin-bottom: $base_margin_bottom;
}
}
/*----------------------------------------------------
#sub
----------------------------------------------------*/
#sub {
float: right;
width: 310px;
background: $main_color;
}
_mixin.scss
@charset "utf-8";
// ===================================================================
// mixinやらCSS3やら、extendも。
// ===================================================================
// border-radius
@mixin border_radius($br_value) {
@each $prefix in $set_prefix {
#{$prefix}border-radius: $br_value;
}
}
// background-size
@mixin bg_size($w, $h: auto) {
@each $prefix in $set_prefix {
#{$prefix}background-size: $w $h;
}
}
// min-height
@mixin min_height($value) {
min-height: $value;
_height: $value;
}
// ===================================================================
// extend
// ===================================================================
@if $use_extend_object {
/* 汎用クラス */
// リストマーカー
[class^="mark"] {
padding-left: 15px;
background: no-repeat left .5em;
}
@for $i from 1 through 5 {
.mark#{$i} {
background-image: url(#{$img_path}share/mark_#{$i}.gif);
}
}
// 簡易ロールオーバー
@if $opacity_value {
.opacity {
opacity: $opacity_value;
-moz-opacity: $opacity_value;
filter: alpha(opacity=#{$opacity_value * 100});
-ms-filter: "alpha(opacity=#{$opacity_value * 100})";
}
}
// inline-block
.inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}
// table-cell
.table_cell {
display: table-cell;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
// float: right
.fr,
.imgR {
float: right;
margin-left: 10px;
}
// float: left
.fl,
.imgL {
float: left;
margin-right: 10px;
}
// text-align: center
.imgC,
.tC,
.btn {
text-align: center;
}
// img Centering
.imgC {
display: block;
margin-left: auto;
margin-right: auto;
}
// text-align: right
.tR,
.sign {
text-align: right;
}
// box-sizing
.box_size {
@each $prefix in $set_prefix {
#{$prefix}box-sizing: border-box;
}
}
// text-shadow none
.ts_none {
@each $prefix in $set_prefix {
#{$prefix}text-shadow: none !important;;
}
}
// box-shadow none
.bs_none {
@each $prefix in $set_prefix {
#{$prefix}box-shadow: none !important;;
}
}
// 余白調整用のクラス
@if $use_spacing_classes {
@for $i from 0 through 20 {
.mt#{$i * 5} { margin-top: 5px * $i !important; }
.mb#{$i * 5} { margin-bottom: 5px * $i !important; }
.pt#{$i * 5} { padding-top: 5px * $i !important; }
.pb#{$i * 5} { padding-bottom: 5px * $i !important; }
}
}
}
/* clearfix */
.clearfix {
*zoom: 1;
&:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
}
_print.scss
@charset "utf-8";
// ===================================================================
// 印刷用
// ===================================================================
/*----------------------------------------------------
印刷用スタイル
----------------------------------------------------*/
@media print {
* html body {
zoom: .7;
}
}
_reset.scss
@charset "utf-8";
// ===================================================================
// リセット用CSS
// ===================================================================
/* Reset Style */
html {
overflow-y: scroll;
}
body {
line-height: 1;
color: #000;
}
@if $use_html5 {
/* html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
// change colours to suit your needs
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
// change colours to suit your needs
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
// change border colour to suit your needs
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
} @else {
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,th {
text-align: left;
}
q:before,q:after {
content: '';
}
img,
object,
embed {
vertical-align: top;
}
hr,legend {
display: none;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
}
img,abbr,acronym,fieldset {
border: 0;
}
li {
list-style-type: none;
}
}
/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License. http://yuilibrary.com/license/ */
// Percents could work for IE, but for backCompat purposes, we are using keywords.
// x-small is for IE6/7 quirks mode.
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
*font-size:small; // for IE
*font:x-small; // for IE in quirks mode
}
// Nudge down to get to 13px equivalent for these form elements
select, input, button, textarea {
font:99% arial,helvetica,clean,sans-serif;
}
// To help tables remember to inherit
table {
font-size:inherit;
font:100%;
}
// Bump up IE to get to 13px equivalent for these fixed-width elements
pre, code, kbd, samp, tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
// ===================================================================
// フォントサイズ
// ===================================================================
$fontSizeList: 62%, 70%, 77%, 85%, 93%, 100%, 108%, 116%, 124%, 131%, 139%, 147%, 154%, 162%, 170%, 177%, 185%, 193%, 200%, 208%, 216%, 224%, 231%, 239%, 247%, 254%, 262%, 270%, 277%, 285%, 293%, 300%, 308%;
@function fz($size) {
@if $size < 8 {
$size: 8;
}
@if $size > 40 {
$size: 40;
}
@return nth($fontSizeList, $size - 7);
}
フォントサイズを利用するには「font-size: fz(14)」とかってすればOKです。
最後の方に書かれてる「@functionを使って何度も記述することをまとめる」ん所です。
_setting.scss
@charset "utf-8";
// ===================================================================
// 設定
// ===================================================================
// HTML5の場合は値を「false」から「true」にする
$use_html5: false;
// 汎用クラスを使用するか
$use_extend_object: true;
// 簡易ロールオーバーの値
$opacity_value: .55;
// 余白調整用のクラスを使用するか
$use_spacing_classes: false;
// 画像のパス
$img_path: "../img/";
// ベースフォント
$base_font: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
$base_font_ie: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
// ページ全体の横幅
$base_width: 940px;
// 要素の基本下マージン
$base_margin_bottom: 15px;
// メインカラー（ベースカラー）
$main_color: #fff;
// サブカラー
$sub_color: #eee;
// アクセントカラー
$accent_color: #e73562;
// ベーステキストカラー
$font_color: #333;
// ベースリンクカラー
$link_color: #06f;
$link_color_visited: #39f;
$link_color_hover: #00f;
$link_color_active: #00f;
// 付与するベンダープレフィックス
$set_prefix: -webkit-, -moz-, -ms-, -o-, '';
// 角丸の初期値
$br_value: 3px;
style.scss
@charset "utf-8";
// ===================================================================
// 各SCSSファイルのインポート
// ===================================================================
// 設定用
@import "setting";
// リセットCSS、フォントサイズ
@import "reset";
// ミックスイン、@extend、CSS3など
@import "mixin";
// メインスタイル - layout.scssはメイン内でインポート
@import "main";
// 印刷用スタイル
@import "print";
ながいなー！
]]>
バッチファイルはディレクトリ（フォルダ）構成に影響を受けてしまうので、次のようなディレクトリ構成として進めます。
この画面では必須項目になっているStylesheet Directories の2つを指定する必要があるので、先ほど作成した「scout_test」フォルダ内に「css」フォルダを作成し、cssフォルダ内に「sass」フォルダを作成します。
