\href{https://www.npmjs.com/package/postcss-calc}{\texttt{ }} \href{https://travis-ci.org/postcss/postcss-calc}{\texttt{ }} \href{https://gitter.im/postcss/postcss}{\texttt{ }}

\href{https://github.com/postcss/postcss-calc}{\texttt{ Post\+CSS Calc}} lets you reduce {\ttfamily calc()} references whenever it\textquotesingle{}s possible. This can be particularly useful with the \href{https://github.com/postcss/postcss-custom-properties}{\texttt{ Post\+CSS Custom Properties}} plugin.

When multiple units are mixed together in the same expression, the {\ttfamily calc()} statement is left as is, to fallback to the \href{https://www.w3.org/TR/css3-values/\#calc-notation}{\texttt{ W3C calc() implementation}}.\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20888}{}\doxysection{Installation}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20888}

\begin{DoxyCode}{0}
\DoxyCodeLine{npm install postcss-\/calc }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20889}{}\doxysection{Usage}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20889}

\begin{DoxyCode}{0}
\DoxyCodeLine{// dependencies}
\DoxyCodeLine{var fs = require("{}fs"{})}
\DoxyCodeLine{var postcss = require("{}postcss"{})}
\DoxyCodeLine{var calc = require("{}postcss-\/calc"{})}
\DoxyCodeLine{}
\DoxyCodeLine{// css to be processed}
\DoxyCodeLine{var css = fs.readFileSync("{}input.css"{}, "{}utf8"{})}
\DoxyCodeLine{}
\DoxyCodeLine{// process css}
\DoxyCodeLine{var output = postcss()}
\DoxyCodeLine{  .use(calc())}
\DoxyCodeLine{  .process(css)}
\DoxyCodeLine{  .css }

\end{DoxyCode}


{\bfseries{Example}} (with \href{https://github.com/postcss/postcss-custom-properties}{\texttt{ Post\+CSS Custom Properties}} enabled as well)\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{// dependencies}
\DoxyCodeLine{var fs = require("{}fs"{})}
\DoxyCodeLine{var postcss = require("{}postcss"{})}
\DoxyCodeLine{var customProperties = require("{}postcss-\/custom-\/properties"{})}
\DoxyCodeLine{var calc = require("{}postcss-\/calc"{})}
\DoxyCodeLine{}
\DoxyCodeLine{// css to be processed}
\DoxyCodeLine{var css = fs.readFileSync("{}input.css"{}, "{}utf8"{})}
\DoxyCodeLine{}
\DoxyCodeLine{// process css}
\DoxyCodeLine{var output = postcss()}
\DoxyCodeLine{  .use(customProperties())}
\DoxyCodeLine{  .use(calc())}
\DoxyCodeLine{  .process(css)}
\DoxyCodeLine{  .css }

\end{DoxyCode}


Using this {\ttfamily input.\+css}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{:root \{}
\DoxyCodeLine{  -\/-\/main-\/font-\/size: 16px;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{body \{}
\DoxyCodeLine{  font-\/size: var(-\/-\/main-\/font-\/size);}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{h1 \{}
\DoxyCodeLine{  font-\/size: calc(var(-\/-\/main-\/font-\/size) * 2);}
\DoxyCodeLine{  height: calc(100px -\/ 2em);}
\DoxyCodeLine{  margin-\/bottom: calc(}
\DoxyCodeLine{      var(-\/-\/main-\/font-\/size)}
\DoxyCodeLine{      * 1.5}
\DoxyCodeLine{    )}
\DoxyCodeLine{\} }

\end{DoxyCode}


you will get\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{body \{}
\DoxyCodeLine{  font-\/size: 16px}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{h1 \{}
\DoxyCodeLine{  font-\/size: 32px;}
\DoxyCodeLine{  height: calc(100px -\/ 2em);}
\DoxyCodeLine{  margin-\/bottom: 24px}
\DoxyCodeLine{\} }

\end{DoxyCode}


Checkout \href{src/__tests__/index.js}{\texttt{ tests}} for more examples.\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20890}{}\doxysubsection{Options}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20890}
\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20891}{}\doxysubsubsection{$<$tt$>$precision$<$/tt$>$ (default\+: $<$tt$>$5$<$/tt$>$)}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20891}
Allow you to define the precision for decimal numbers.


\begin{DoxyCode}{0}
\DoxyCodeLine{var out = postcss()}
\DoxyCodeLine{  .use(calc(\{precision: 10\}))}
\DoxyCodeLine{  .process(css)}
\DoxyCodeLine{  .css }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20892}{}\doxysubsubsection{$<$tt$>$preserve$<$/tt$>$ (default\+: $<$tt$>$false$<$/tt$>$)}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20892}
Allow you to preserve calc() usage in output so browsers will handle decimal precision themselves.


\begin{DoxyCode}{0}
\DoxyCodeLine{var out = postcss()}
\DoxyCodeLine{  .use(calc(\{preserve: true\}))}
\DoxyCodeLine{  .process(css)}
\DoxyCodeLine{  .css }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20893}{}\doxysubsubsection{$<$tt$>$warn\+When\+Cannot\+Resolve$<$/tt$>$ (default\+: $<$tt$>$false$<$/tt$>$)}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20893}
Adds warnings when calc() are not reduced to a single value.


\begin{DoxyCode}{0}
\DoxyCodeLine{var out = postcss()}
\DoxyCodeLine{  .use(calc(\{warnWhenCannotResolve: true\}))}
\DoxyCodeLine{  .process(css)}
\DoxyCodeLine{  .css }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20894}{}\doxysubsubsection{$<$tt$>$media\+Queries$<$/tt$>$ (default\+: $<$tt$>$false$<$/tt$>$)}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20894}
Allows calc() usage as part of media query declarations.


\begin{DoxyCode}{0}
\DoxyCodeLine{var out = postcss()}
\DoxyCodeLine{  .use(calc(\{mediaQueries: true\}))}
\DoxyCodeLine{  .process(css)}
\DoxyCodeLine{  .css }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20895}{}\doxysubsubsection{$<$tt$>$selectors$<$/tt$>$ (default\+: $<$tt$>$false$<$/tt$>$)}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20895}
Allows calc() usage as part of selectors.


\begin{DoxyCode}{0}
\DoxyCodeLine{var out = postcss()}
\DoxyCodeLine{  .use(calc(\{selectors: true\}))}
\DoxyCodeLine{  .process(css)}
\DoxyCodeLine{  .css }

\end{DoxyCode}


Example\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{div[data-\/size="{}calc(3*3)"{}] \{}
\DoxyCodeLine{  width: 100px;}
\DoxyCodeLine{\} }

\end{DoxyCode}


\DoxyHorRuler{0}
\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20897}{}\doxysection{Contributing}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20897}
Work on a branch, install dev-\/dependencies, respect coding style \& run tests before submitting a bug fix or a feature.


\begin{DoxyCode}{0}
\DoxyCodeLine{git clone git@github.com:postcss/postcss-\/calc.git}
\DoxyCodeLine{git checkout -\/b patch-\/1}
\DoxyCodeLine{npm install}
\DoxyCodeLine{npm test }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20898}{}\doxysection{@ref /opt/lampp/htdocs/sfcode/node\+\_\+modules/postcss-\/calc/\+CHANGELOG.\+md \char`\"{}\+Changelog\char`\"{}}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20898}
\hypertarget{md_sfcode_node_modules_postcss_calc_README_autotoc_md20899}{}\doxysection{\mbox{[}\+License\mbox{]}(\+LICENSE)}\label{md_sfcode_node_modules_postcss_calc_README_autotoc_md20899}
