sass

参考URL

公式サイト

sassで使える関数

sassの導入

ruby方式で書くsassが初めに導入されたがデザイナーに不評の為
scssが導入された。

gem update --system

gem install sass

scss compile

基本的なコンパイル

sass main.scss:maincss

インデント綺麗にコンパイル

sass -style expanded scss/main.scss/css/main.css

scssの監視して更新されたら自動コンパイル

sass --style expanded -watch sass:css

コメントの書き方

// コメントがcssに表示されない

/* コメントがscssに表示される */

書き方

アクション要素　&

span{
    background-color: #464646;

    &:hover {
        font-weight: bold;
    }
}

変数（数値、文字列、真偽、色、リスト）

宣言

$baseFontSise: 14px;

計算

#{...}は{ }内を評価しろという指示。

scss

$baseFontSise: 14px;

font-size: $baseFontSise - 2px;

font-size: #{$baseFontSise - 2px};

css

font-size: 12px;

文字列の連結

scss

$imgDir: "../img/";

background: url($imgDir + "bg.png");
// or
background: url("#{$imgDir}bg.png");

css

background: url("../img/bg.png");

色

scss

$brandColor: rgba(255,0,0,9);

lighten　（darken）

scss

color: lighten($brandColor, 30%);

css

color: #ff9999;

条件分岐

scss

$debugMode: true;

@if $debugMode == true{
    color: red;
} @else if $debugMode == false {
    color: green;
} @else {
    color: black;
}

css

color: red;

loop

for

scss

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

css

.fs12 {
  font-size: 10px;
}

.fs13 {
  font-size: 10px;
}

.fs14 {
  font-size: 10px;
}

while

scss

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

css

.fs15 {
  font-size: 10px;
}

.fs16 {
  font-size: 10px;
}

.fs17 {
  font-size: 10px;
}

list

scss

$animals: cat, dog, tiger;

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

css

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

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

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

debug

scss

@debug $columnWidth;

shell

DEBUG: 932px

関数

scope $totalWidthと$columnCountはglobal変数
@function 内の変数はfuction内のみ

scss

$totalWidth: 940px;
$columnCount: 10;

@function getColumnWidth($width, $count) {

    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}

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

css

.grid {
  float: left;
  width: 85px;
}

fileの分割

作成
_settings.scss
_functions.scss

scss

@import 'settings';
@import 'functions';

mixin(ミックスイン)

scss

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

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

css

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

extend(継承)

mixinとの違いは継承していることを明示的にできることと、
mixinの場合includeのした内容を重複してCSSに記載する為、効率的でない。

scss

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

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

}

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

css

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

.errorMsg {
  background: red;
}

.warningMsg {
  background: orange;
}