Pass arbitrary values between your module files\hypertarget{md_sfcode_node_modules_postcss_modules_values_README_autotoc_md21761}{}\doxysubsection{Usage}\label{md_sfcode_node_modules_postcss_modules_values_README_autotoc_md21761}

\begin{DoxyCode}{0}
\DoxyCodeLine{/* colors.css */}
\DoxyCodeLine{@value primary: \#BF4040;}
\DoxyCodeLine{@value secondary: \#1F4F7F;}
\DoxyCodeLine{}
\DoxyCodeLine{.text-\/primary \{}
\DoxyCodeLine{  color: primary;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.text-\/secondary \{}
\DoxyCodeLine{  color: secondary;}
\DoxyCodeLine{\} }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{/* breakpoints.css */}
\DoxyCodeLine{@value small: (max-\/width: 599px);}
\DoxyCodeLine{@value medium: (min-\/width: 600px) and (max-\/width: 959px);}
\DoxyCodeLine{@value large: (min-\/width: 960px); }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{/* my-\/component.css */}
\DoxyCodeLine{/* alias paths for other values or composition */}
\DoxyCodeLine{@value colors: "{}./colors.css"{};}
\DoxyCodeLine{/* import multiple from a single file */}
\DoxyCodeLine{@value primary, secondary from colors;}
\DoxyCodeLine{/* make local aliases to imported values */}
\DoxyCodeLine{@value small as bp-\/small, large as bp-\/large from "{}./breakpoints.css"{};}
\DoxyCodeLine{/* value as selector name */}
\DoxyCodeLine{@value selectorValue: secondary-\/color;}
\DoxyCodeLine{}
\DoxyCodeLine{.selectorValue \{}
\DoxyCodeLine{  color: secondary;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.header \{}
\DoxyCodeLine{  composes: text-\/primary from colors;}
\DoxyCodeLine{  box-\/shadow: 0 0 10px secondary;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{@media bp-\/small \{}
\DoxyCodeLine{  .header \{}
\DoxyCodeLine{    box-\/shadow: 0 0 4px secondary;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\}}
\DoxyCodeLine{@media bp-\/large \{}
\DoxyCodeLine{  .header \{}
\DoxyCodeLine{    box-\/shadow: 0 0 20px secondary;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


{\bfseries{If you are using Sass}} along with this Post\+CSS plugin, do not use the colon {\ttfamily \+:} in your {\ttfamily @value} definitions. It will cause Sass to crash.

Note also you can {\itshape import} multiple values at once but can only {\itshape define} one value per line.


\begin{DoxyCode}{0}
\DoxyCodeLine{@value a: b, c: d; /* defines a as "{}b, c: d"{} */ }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_modules_values_README_autotoc_md21762}{}\doxysubsection{Justification}\label{md_sfcode_node_modules_postcss_modules_values_README_autotoc_md21762}
See \href{https://github.com/css-modules/css-modules-loader-core/pull/28}{\texttt{ this PR}} for more background\hypertarget{md_sfcode_node_modules_postcss_modules_values_README_autotoc_md21763}{}\doxysection{License}\label{md_sfcode_node_modules_postcss_modules_values_README_autotoc_md21763}
ISC\hypertarget{md_sfcode_node_modules_postcss_modules_values_README_autotoc_md21764}{}\doxysection{With thanks}\label{md_sfcode_node_modules_postcss_modules_values_README_autotoc_md21764}

\begin{DoxyItemize}
\item Mark Dalgleish
\item Tobias Koppers
\item Josh Johnston
\end{DoxyItemize}

\DoxyHorRuler{0}


Glen Maddern, 2015. 