Sassについて

CSSに関連する情報を網羅

 2018-01-07に投稿  |  1 分間  |  424 言葉  • 翻訳：en

環境設定

ruby -v
sudo gem update --system

インストール

sudo gem install sass

アップデート

gem update sass

アンインストール

gem uninstall sass

バージョンを指定してインストール

gem install sass -v 特定のバージョン

コンパイル

sass --style expended --watch sass:css

入れ子(ネスト)構造

#main {
  width: 90%;
  P {
    font-size: 16px;
    a {
      text-decoration: none;
      &:hover {
        font-weight: bold;
      }
    }
  }
}

コメント

/*
commnet
*/
  • comment こちらはCSSには反映されない

変数

$imgDir: "../img/";
$baseFontSize: 14px;
$brandColor: rgba(255,0,0,0.9);

#main {
  width: 90%;
  backgoround: url($imgDir + "bg.png");
  #### url("#{$imgDir}bg.png");
  P {
    color: $brandColor;
    #### lighten, darken
    #### lighten($brandColor, 30%);
    font-size: $baseFontSize;
    .sub {
      font-size: $baseFontSize -2px;
      #### #{12 + 12}px;
    }
  }
}

条件分岐

$debugMode: true;
$x: 10;

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

ループ

@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;
}

リスト

$animals: cat, dog, tiger;

@each $animal in $animals {
  #### @each $animal in cat, dog, tiger {
  .#{$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);
}

ファイルを分離して管理する

@import "settings"; #### _settings.scss
@import "functions"; #### _functions.scss

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

### mixin

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

.label {
  fount-size: 12px;
  @include round(10px);
}

### extend(継承)

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

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

.warningMsg {
  @extend .msg;
  background: orange;
}
css  sass