zukucode
主にWEB関連の情報を技術メモとして発信しています。

cssのcalcの設定をlessで記述するときの注意点

cssで計算式を行うためのcalclessで同じように実装するには少し工夫が必要です。

以下のように普通にcalcを指定すると、lessをコンパイルしたタイミングで計算が行われてしまいます。

width: calc(100% - 10%);

/*コンパイル後*/
width: 90%; /*計算されてしまう*/

解決策

以下のようにダブルクォーテーション(")で囲い、直前に~をつけます。

width: calc(~"100% - 10%");

/*コンパイル後*/
width: calc(100% - 10%);

関連記事

  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • less font-sizeをremで汎用的に使いこなす

    css3ではremという単位でルートの要素のサイズに対しての相対的な値を指定できるようになりました。その便利なremをlessのミックスインを使って便利に使いこなす方法を紹介します。フォントサイズはこ...


  • less cssファイルをそのままImportする

    lessでcssファイルをそのままImportする方法を紹介します。cssの@importではなく、lessのコンパイル時にcssを読み込みます。下記のように(inline)を追加します。lessで実...


  • cssのcalcの設定をlessで記述するときの注意点

    cssで計算式を行うためのcalcをlessで同じように実装するには少し工夫が必要です。普通にcalcを指定すると、lessをコンパイルしたタイミングで計算が行われてしまいます。以下のようにダブルクォ...


  • gulp lessをcssにコンパイルする

    lessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブ...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...


  • ASP.NET 外部クラスでページオブジェクトを取得する

    Webページ(aspx)のコードビハインドでは以下のようにページオブジェクトのプロパティでタイトルなどを動的に設定できます。これを外部クラスで行いたい場合は同じようにするとエラーになってしまいます。以...


  • Oracle 文字列の先頭または末尾の1文字を取得する

    Oracleで文字列の先頭または末尾の1文字を取得する方法を紹介します。1文字を取得するのでSUBSTRBではなくSUBSTRで取得します。