• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

Sassの変数と演算

2018-03-27 by mocurot コメントを書く

Sassでも変数を定義することで、任意の場所で呼び出すことができる。
変数は「$変数名:値; → $mainColor: #3a86e0;」という形で宣言する。

変数とスコープ

どのるルールセットにも属さない変数は、グローバル変数として全てのルールセットから呼び出すことができるが、ルールセット内で宣言した変数はローカル変数となり、そのルールセット内でのみ呼び出すことができる。

#main{
  $mainColor: #3a86e0;
  border-bottom: $mainColor;
  a{
    color: $mainColor;
  }
}
#side{
  $mainColor: #3a86e0;
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

#main {
  border-bottom: #3a86e0;
}
#main a {
  color: #3a86e0;
}

#sideからは$mainColorを呼び出せないので、コンパイル時には無視される。(エラーは出ない)

演算

演算は、+(足し算)や-(引き算)、または*(かけ算)、/(割り算)などを使うことで、コンパイル時に計算結果を返してくれる。

#main{
  $w:800px;
  width:$w;
  .left{
    width: $w / 2;
    float: left;
  }
  .right{
    width: $w / 2 - 10;
    float: right;
  }
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

#main {
  width: 800px;
}
main .left {
  width: 400px;
  float: left;
}
#main .right {
  width: 390px;
  float: right;
}

この例では、変数「w」に800pxを代入して

  • .leftでは変数「w」を2で割る
  • .rightでは変数「w」を2で割って10を引く

ということをしている。
覚えておくと便利なのでぜひ覚えよう。


次回「 @import」

関連

Filed Under: Sass 関連タグ:SASS, SCSS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
the mocuLogの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • Sassで@import
    Sassで@import
  • Sassでネスト
    Sassでネスト
  • SassでFont Awesomeを使う
    SassでFont Awesomeを使う
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • ios safariでのスクロールバー表示について
    ios safariでのスクロールバー表示について
  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて

タグ

AMAZON ANKER APPLE APPLE WATCH APPS BLOOD BONE CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET EMMET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC MUSIC NGINX NINTENDO NODE.JS NOTE PHP PS4 PYTHON SASS SCSS SEKIRO SERVER SWICH WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン