OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

SassやStylusでcalc()関数内の値に変数を使う

クライアントワークでのあるプロジェクトで使う場面があり、忘れないようにメモとして残しておきたいと思います。記事タイトルのままですが、通常のSassの記法ではエラーとなりうまく出力されないので少し変えてあげる必要があります。 【SCSS】
$fixedWidth: 200px;
div {
 width: calc(100% - #{$fixedWidth})
}
  SASSやSCSSの場合は、変数部分を上記のように、「#{ ・・・}」で囲んであげることで変数が使えるようになります。ただしStylusの場合にはこのようにすることができませんので下記のようになります。 【Stylus】
fixedWidth = 200px
div
 width "calc(100% - %s)" % fixedWidth
  まず、calc()関数自体をクォーテーションマークで囲み、変数部分には「%s」を入れます。そしてその後に代入される変数を指定してあげる形になります。   レスポンシブの場合にはデザインによってはこのようなケースも出てくるかもしれませんが、その場合には上記の方法で対応できますので、ぜひ覚えておきたいですね。   (参考にさせていただいたサイト) SCSSの変数と、CSS3のcalc()を併用するには Stylus ではまった点
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram