スキップしてメイン コンテンツに移動

Sass/SCSS/Compass

Sass/SCSS


Sassって何?

  • CSSのメタ言語
  • 記法に従って記述し、コンパイルするとCSSファイルが生成される。
  • 変数の使用や条件分岐、共通部分の部品化、共通部分の継承等が特徴。


公式サイト

http://sass-lang.com/


ファイル

インデントによる記法がSass
拡張子:.sass
CSSベースの記法がSCSS(“Sassy CSS”)(こちらが主流)
拡張子:.scss


インストール

コンソールで

$ ruby -v(ルビーがインストールされていることを確認)
$ sudo gem update --system
(gem(rubyのパッケージマネージャー)を最新版に更新)
$ sudo gem install sass(sassのインストール)
$ cd (index.htmlのフォルダ)


使用例


フォルダ構成

/index.html
/css
/scss
main.scss
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
    border-color: $blue;
    color: darken($blue, 9%);
    p {
        font-size: 14px;
    }
}
.border {
    padding: $margin / 2;
    margin: $margin / 2;
    border-color: $blue;
}

$ sass scss/main.scss:css/main.css

とやると

main.css
.content-navigation {
    border-color: #3bbfce;
    color: #2b9eab; 

}
.content-navigation p {
    font-size: 14px; 
}
.border {
    padding: 8px;
    margin: 8px;
    border-color: #3bbfce; 
}
が生成される。
実際は都度コマンド実行するのではなく、

$sass --watch scss:css
でフォルダ監視し、scssフォルダ内の.scssファイルが更新されたら自動でcssフォルダにファイルを生成(上書き)する。

SCSSの記法


入れ子構造

#main {
    width: 90%;
    p {
        font-size: 16px;
        a {
            text-decoration: none;
            &:hover { // &は親要素のセレクタをあらわす
                font-weight: bold;
            }
        }
    }
}


コメント

// (=>変換後のCSSに表示されない)
/* */


変数(数値)

$baseFontSize: 14px;
#main {
    font-size: $baseFontSize;
    .sub {
        font-size: $baseFontSize - 2px; // -2 でもOK
    }
}
// +, -, *, / の演算可能
文字列$imgDir: "/img/";
#main {
    background: url($imgDir + "bg.png");
    // 文字列の中で変数を展開したいときは #{$hoge}, #{12 + 12}みたいなことも可能
    // background: url("#{imgDir}bg.png");
}


変数(色)

$brandColor: rgba(255, 0, 0, 0.9);
// $brandColor: #ff0000; とかも可
// lighten, darkenとか使える => "sass built-in functions" でググる
// hsla($hue, $saturation, $lightness, $alpha)
// lighten($color, 20%)
// darken($color, 20%)
// saturate($color, 20%)
#main {
    color: $brandColor;
    p {
        color: lighten($brandColor, 30%);
    }
}


変数(分岐処理)

$debugMode: true;
$x: 10;
// ==, !=, <, >, <=, >=

#main {
    @if $debugMode == true {
        color: red;
    } @else {
        color: green;
    }
    p {
        @if $x > 20 {
            .....
        }
    }
}


変数(繰り返し処理)

// @forの場合
@for $i from 10 through 14 {
    .fs#{$i} {
        font-size: #{$i}px;
    }
}


// @whileの場合
$i: 10;
@while $i <= 14 {
    .fs#{$i} {
        font-size: #{$i}px;
    }
    $i: $i + 1;
}


変数(リスト)

$animals: cat, dog, tiger;
@each $animal in $animals {
    .#{$animal}-icon {
        background: url("#{animal}.png");
    }
}


変数(関数)

$totalWidth: 940px;
$columnCount: 5;
@function getColumnWidth($width, $count) {
    // $columnWidthを計算
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}

.grid {
    float: left;
    width: getColumnWidth($totalWidth, $columnCount);
}


ファイルを分離

上の例の場合で、設定ファイルと、関数ファイルに分ける

/scss/main.scss
/scss/_settings.scss // ファイルの先頭は_(パーシャルズ)
/scss/_functions.scss // 〃

_settings.scss
$totalWidth: 940px;
$columnCount: 5;


_functions.scss@function getColumnWidth($width, $count) {
    // $columnWidthを計算
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}


main.scss@import "settings"; // _は不要
@import "functions";
=>main.cssでは展開されている

@mixin

複数の設定をまとめて管理
例1
@mixin round {
    border-radius: 4px;
}

.label {
    font-size: 12px;
    @include round;
}


例2(引数:初期値)
@mixin round($radius: 4px) {
    border-radius: $radius;
}

.label {
    font-size: 12px;
    @include round(5px);
}


@extend

スタイルの継承

.msg {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px;
    color: white;
}

.errorMsg {
    @extend .msg;
    background: red;
}

.warningMsg {
    @extend .msg;
    background: orange;
}
// @mixin, @includeでも同様に記述できるが、より経済的(CSS上で同一の記述が重複しない)かつ継承関係が明示的




出展
公式サイト
http://sass-lang.com/

ドットインストール
http://dotinstall.com/lessons/basic_sass/

コメント

このブログの人気の投稿

iframeに異なるドメイン(クロスドメイン)のコンテンツを読み込んで高さを自動調節する方法

趣旨 iframe(親)に異なるドメインのページ(子)を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する


方法 普通にやると、
「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com".  Protocols, domains, and ports must match. 」
などと怒られてしまいますのでこちらを参考に
http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside

http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascript


コード hoge.com(親)
<html> <head>     <title>親</title>     <script src="js/jquery.js"></script>     <script>         window.addEventListener('message', function(e) {         var iframe = $("#fugapage");         var eventName = e.data[0];         var data = e.data[1];         switch(eventName) {             case '…

WordPressのwp_get_archivesで月別リストを生成する際に<li>をカスタムする方法

【About】 WordPressの wp_get_archives('type=monthly') で月別のリスト<li>を生成する際に、特定の年月のアーカイブページを表示した際に<li>に特定のクラス(class="active"など)を設定する方法を記載します。
また、おまけとして、functions.phpによらず、テンプレートで<li>をカスタマイズする方法も記載します。

【通常の書き方】 <WordPress>ーテンプレート
<p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul>
とすると

<HTML><p>月別アーカイブ</p> <ul>     <li><a href="http://hoge.com/2013/12/">2013年12月</a></li>     <li><a href="http://hoge.com/2013/11/">2013年11月</a></li> </ul>
などと生成されます。

これを、ある月を表示しているときに、該当のリスト<li>に class="active" を追加したいとします。

【カスタマイズ方法】 <WordPress>ーテンプレート
<p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> (変更なし)

ーfunctions.php
functions.phpに以下を追加
<?php ・・・ function my_archives_link($link_html){   $my_month = '/' . get_query_var('year') . &#…

PhotoSwipeでテキストリンクから特定の画像のPhotoSwipeギャラリーを起動する方法

【PhotoSwipeとは】 スマホサイトで写真ギャラリーを設置したいときに使えるライブラリ
スワイプで画像がめくれて便利!
レスポンシブサイトの画像ギャラリーにオススメ。
(optionに、imageScaleMethod: "fitNoUpscale" とすれば画像が最大100%で表示されるのでPCサイトでも使えます。)
https://github.com/codecomputerlove/PhotoSwipe


【実現したいこと】 通常は画像サムネイルのクリック(or タップ)でPhotoswipeギャラリーを起動します。
それとは別に、新着情報などのテキストリンクから特定の画像のPhotoSwipeギャラリーを起動したい。


【方針】var instance = $("#Gallery a").photoSwipe(options); instance.show(0); で、最初のPhotoSwipeギャラリーを起動できることから、テキストリンクに任意の要素(data-swipeとする)と、クラス(.swipe-targetとする)を設置し、.swipe-targetの上から順番にdata-swipeに番号を振ってゆき、.swipe-targetがクリックされたら、data-swipeから番号xを取得し、instance.show(x)で目的のPhotoSwipeギャラリーを起動する。


【HTML】 ヘッダー(もしくはフッター)部分(jQueryバージョンを使用)<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.2.min.js"><\/script>')</script> <script src="/js/vendor/klass.min.js"></script> <scri…