Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tk082016

sassに関して

Last updated at Posted at 2018-02-18

##ソース

##saasの概要

  • cssを効率的に書くための記法
  • 二つの記法(sass/scss)
    -> sassは少しデザイナーに不評だった。

##sass環境構築
sudo gem update --system
sudo gem install sass
これでインストールされる。

##動作の記法
.scss -> .sass -> .css

scss/main.scss
//comment
/* comment */
#main {
  width: 90%;
  p{
    font-size: 16px;
  }
}

##実行方法
$ saas scss/main.scss:css/main.css

構造が字下げされててわかりにくいのを直す
$ --style expanded

.scssに変更があったら自動で.cssに変更を与えるためのコマンド(watchオプション)
$sass --style expanded --watch scss:css
以下が表示される

>>> Sass is watching for changes. Press Ctrl-C to stop.
この操作をするとsassを修正すると変更がcssにも反映される

##saasの基本

  • ネスト構造(入れ子)/コメント記法（/* ... */, //）
scss/main.scss
//comment:変換したcssに反映されない
/* comment */:cssに反映される
#main {
  width: 90%;
  p{
    font-size: 16px;
    a{
      text-decoration: none;
      &.hover {
        font-weight: bold;
      }
    }
  }
}
  • 入れ子の構造の中の「&」
    「&」は、入れ子の構造の中でこれが使われたら、「その親要素のセレクタを表す」

###saas内での変数宣言、初期化

  • 変数:データにつけるラベル
  • データ型:数値、文字列、真偽、色、リスト）
scss/main.scs
//comment
/* comment */
$baseFontSize: 14px;

#main {
  width: 90%;
  p{
        font-size: $baseFontSize;
   }
}

これを変換
$ sass --style sepanded --watch scss:css

css/main.css
/* comment */
#main {
  width: 90%; }
#main p {
  font-size: 14px; }

/*# sourceMappingURL=main.css.map */

数値の計算

scss/main.scss
//comment
/* comment */
$baseFontSize: 14px;

#main {
  width: 90%;
  p{
        font-size: $baseFontSize;
        .sub{
                font-size: $baseFontSize - 2px; /*この部分で変数から2px引く*/
        }
   }
}

saas --style expanded scss/main.scss:css/main.css
変換すると

css/main.css
/* comment */
#main {
  width: 90%; }
#main p {
  font-size: 14px; }
#main p .sub {
  font-size: 12px; } /*ここの部分が計算されている*/

###文字列

scss/main.scss
//$baseFontSize: 14px;

$imgDir: "../img/";

#main {
        width: 90%;
        background: url($imgDir + "bg.png")
  p{
        font-size: $imgDir - 2px;
   }
}

変換:saas --style expanded scss/main.scss:css/main.css

文字列の連結がされる

css/main.css
/* comment */
#main {
  width: 90%;
  background: url("../img/bg.png") p;/*こんな感じで連結される*/
  background-font-size: "../img/"-2px; }

###文字列の中で変数展開したい場合

scss/main.scss
/* comment */
//$baseFontSize: 14px;

$imgDir: "../img/";

#main {
        width: 90%;
        background: url("#{$imgDir}bg.png")
  p{
        font-size: $imgDir - 2px;
   }
}

これで先ほどのものと同じ結果になる

css/main.css
/* comment */
#main {
  width: 90%;
  background: url("../img/bg.png") p;/*こんな感じで連結される*/
  background-font-size: "../img/"-2px; }
  • #{}の意味：波かっこの中を評価しなさいという意味
scss/main.scss
/* comment */
//$baseFontSize: 14px;

$imgDir: "../img/";

#main {
        width: 90%;
        background: url("#{$imgDir}bg.png")
  p{
        font-size: #{12+ 12}px;
   }
}

これで文字列だけでなく数字も#{}で評価される

css/main.css
/* comment */
#main {
  width: 90%;
  background: url("../img/bg.png") p;
  background-font-size: 24px; }

###変数宣言(色)

scss/main.scss
$brandColor: #red;

#main {
        width: 90%;
  p{
        color: $brandColor;
        font-size: #{12+ 12}px;
   }
}
css/main.css
/* comment */
#main {
  width: 90%; }
#main p {
  color: #red;
  font-size: 24px; }
  • lighten/darken
scss/main.scss
$brandColor: rgba(255,0,0,0.9);

//lighten darken

#main {
        width: 90%;
  p{
        color: lighten($brandColor, 30%);
        font-size: #{12+ 12}px;
   }
}

cssが数値で変更されている。

css/main.css
/* comment */
#main {
  width: 90%; }
#main p {
  color: rgba(255, 153, 153, 0.9);
  font-size: 24px; }

###@if文

// @if @else

$debugModel: true;

#main {
        @if $debugModel == true {
                color: red;
        } @else {
                color: green;
        }
}

saas --style expanded scss/main.scss:css/main.css
で実行
less css/main.css

css/main.css
#main {
  color: red; }

数値だけでなく文字列でも使える

scss/main.scss
$debugMode: true;
$x: 30;

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

###@for/@while

scss/main.scss
//loop
//@for
//@while

//.fs 10 (font-size: 10px;)

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

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

}
css/main.css
.fs10 {
  font-size: 10px; }

.fs11 {
  font-size: 11px; }

.fs12 {
  font-size: 12px; }

.fs13 {
  font-size: 13px; }

.fs14 {
  font-size: 14px; }

.fs10 {
  font-size: 10px; }

.fs11 {
  font-size: 11px; }

.fs12 {
  font-size: 12px; }

.fs13 {
  font-size: 13px; }

.fs14 {
  font-size: 14px; }

##リスト
似たようなデータをまとめて管理できるデータ型

scss/main.scss
$animals: cat, dog, tiger;

@each $animal in $animals {
	.#{$animal}-icon { background: url("#{$animal}.png");}
}
css/main.css
cat-icon {
  background: url("cat.png"); }

.dog-icon {
  background: url("dog.png"); }

.tiger-icon {
  background: url("tiger.png"); }

##複数の処理をまとめる関数: @function/ @return

scss/main.scss
//関数

$totalWidth: 940px;
$columnCount: 10;

@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);
}
  • @debugを使うとsassを変換した時点で数値を出してくれる
>>> Change detected to: scss/main.scss
scss/main.scss:10 DEBUG: 85px
      write css/main.css
      write css/main.css.map
css/main.css
.grid {
  float: left;
  width: 85px; }

###ファイル分割

  • 「」(pertials(パーシャルズ)：部分ファイル) :「」で始まるファイルは部分的なファイルとして認識されるので、css に変換する時に一緒にあわせてくれて、1 つの main.css を作ってくれます。

  • @import
    これをmain.scssの文頭に置いて、パーシャルズ(部分ファイル)を連結させる.
    「_」(pertials)でファイルを分割してみる。

  • 分割前

scss/main.scss
//関数

$totalWidth: 940px;
$columnCount: 10;

@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);
}
  • 分割後
    パーシャルズ
    (分割ファイル)をいくつか作ってmain.scssで連結させる
scss/main.scss
@import "settings";
@import "functions";

.grid {
    float: left;
    width: getColumnWidth($totalWidth, $columnCount);
}
scss/_settings.scss
$totalWidth: 940px;
$columnCount: 10;
scss/_functions.scss
@function getColumnWidth($width, $count) {
    // $columnWidthを計算する
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}

###@mixin

  • @mixin:設定をまとめて管理できる機能
  • @include:@mixinを呼び出す
  • mixinは引数を持つ(初期値をつけることもできる)

角丸の要素を複数につけたいとき

scss/main.scss
//mixin

@mixin round($radius) {
        border-radius: $radius;
}

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

@include roundにある値がmixinの引数に入って表示される。

css/main.css
.label {
  font-size: 12px;
  border-radius: 5px; }

また、mixinは初期値を持つこともできる。

scss/main.scss
//mixin

@mixin round($radius:4px) {
        border-radius: $radius;
}

.label {
        font-size: 12px;
        @include round();
}
css/main.css
.label {
  font-size: 12px;
  border-radius: 4px; }

###@extend
スタイルを継承していくことができる。

共通部分を@extendでまとめる

scss/main.scss
// @extend

//.errorMsg
//.warningMsg

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

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

.warningMsg {
        @extend .msg;
        background: orange;
}
css/main.css
.msg, .errorMsg, .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white; }

.errorMsg {
  background: red; }

.warningMsg {
  background: orange; }

###@mixinと@extendの違い

  • 明示的論理的に継承していることを表記した方が可読性が高い
  • @mixinだと重複する処理が多い。
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?