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 ではまった点
categories
- WordPress（61）
- JavaScript（49）
- Vue.js（48）
- CSS（46）
- jQuery（34）
- Nuxt.js（22）
- Sass（21）
- Gulp（17）
- webpack（16）
- PHP（14）
- HTML（14）
- GSAP（11）
- React（10）
- Vite（9）
- Pug（9）
- Laravel（8）
- Cordova（8）
- Linux（7）
- Next.js（6）
- Apache（5）
- Shopify（4）
- REST API（4）
- Node.js（4）
- Smarty（3）
- Git（3）
- JSON（3）
- その他プログラミング（3）
- Google Apps API（3）
- Bootstrap（3）
- 環境構築・システム（3）
- TypeScript（2）
- EJS（2）
- RMS（2）
- Docker（2）
- Instagram API（2）
- Excel VBA（2）
- SVG（1）
- Dart（1）
- ECカートASP（1）
- Markdown（1）
- AMP（1）
- Nginx（1）
- XML（1）
- shellscript（1）
- Ruby（1）
- MySQL（1）
