Gathering detailed insights and metrics for postcss-advanced-variables
Gathering detailed insights and metrics for postcss-advanced-variables
Gathering detailed insights and metrics for postcss-advanced-variables
Gathering detailed insights and metrics for postcss-advanced-variables
Use Sass-like variables, conditionals, and iterators in CSS
npm install postcss-advanced-variables
95.8
Supply Chain
100
Quality
83.4
Maintenance
100
Vulnerability
100
License
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
132 Stars
69 Commits
33 Forks
9 Watching
1 Branches
19 Contributors
Updated on 27 Nov 2024
Minified
Minified + Gzipped
JavaScript (58.37%)
CSS (39.76%)
SCSS (1.87%)
Cumulative downloads
Total Downloads
Last day
0.1%
19,939
Compared to previous day
Last week
4.6%
107,967
Compared to previous week
Last month
-0.4%
492,531
Compared to previous month
Last year
-8.8%
5,843,810
Compared to previous year
1
1
4
PostCSS Advanced Variables lets you use Sass-like variables, conditionals, and iterators in CSS.
1$dir: assets/icons; 2 3@each $icon in (foo, bar, baz) { 4 .icon-$icon { 5 background: url('$dir/$icon.png'); 6 } 7} 8 9@for $count from 1 to 5 by 2 { 10 @if $count > 2 { 11 .col-$count { 12 width: #{$count}0%; 13 } 14 } 15} 16 17@import "path/to/some-file"; 18 19/* after */ 20 21.icon-foo { 22 background: url('assets/icons/foo.png'); 23} 24 25.icon-bar { 26 background: url('assets/icons/bar.png'); 27} 28 29.icon-baz { 30 background: url('assets/icons/baz.png'); 31} 32 33.col-3 { 34 width: 30%; 35} 36 37.col-5 { 38 width: 50%; 39} 40 41// the contents of "path/to/_some-file.scss"
Add PostCSS Advanced Variables to your build tool:
1npm install postcss-advanced-variables --save-dev
Use PostCSS Advanced Variables to process your CSS:
1require('postcss-advanced-variables').process(YOUR_CSS);
Add PostCSS to your build tool:
1npm install postcss --save-dev
Use PostCSS Advanced Variables as a plugin:
1postcss([ 2 require('postcss-advanced-variables')(/* options */) 3]).process(YOUR_CSS);
Add Gulp PostCSS to your build tool:
1npm install gulp-postcss --save-dev
Use PostCSS Advanced Variables in your Gulpfile:
1var postcss = require('gulp-postcss'); 2 3gulp.task('css', function () { 4 return gulp.src('./src/*.css').pipe( 5 postcss([ 6 require('postcss-advanced-variables')(/* options */) 7 ]) 8 ).pipe( 9 gulp.dest('.') 10 ); 11});
Add Grunt PostCSS to your build tool:
1npm install grunt-postcss --save-dev
Use PostCSS Advanced Variables in your Gruntfile:
1grunt.loadNpmTasks('grunt-postcss'); 2 3grunt.initConfig({ 4 postcss: { 5 options: { 6 use: [ 7 require('postcss-advanced-variables')(/* options */) 8 ] 9 }, 10 dist: { 11 src: '*.css' 12 } 13 } 14});
Variables let you store information to be reused anywhere in a stylesheet.
Variables are set just like CSS properties, placing a $
symbol before the
name of the variable ($var-name
). They may also be set placing a $
symbol
before two parentheses wrapping the name of the variable ($(var-name)
), or by
wrapping the $
symbol and variable name in curly braces preceeded by a hash
(#{$var-name}
).
1$font-size: 1.25em; 2$font-stack: "Helvetica Neue", sans-serif; 3$primary-color: #333; 4 5body { 6 font: $font-size $(font-stack); 7 color: #{$primary-color}; 8}
*Note: To use #{$var-name}
without issues, you will need to include the
PostCSS SCSS Syntax.
In that example, $font-size
, $font-stack
, and $primary-color
are replaced
with their values.
1body { 2 font: 1.25em "Helvetica Neue", sans-serif; 3 color: #333; 4}
Conditionals like @if
and @else
let you use rules in a stylesheet if they
evaluate true or false.
Conditionals are set by writing @if
before the expression you want to
evaluate. If the expression is true, then its contents are included in the
stylesheet. If the expression is false, then its contents are not included, but
the contents of an @else
that follows it are included.
1$type: monster; 2 3p { 4 @if $type == ocean { 5 color: blue; 6 } @else { 7 color: black; 8 } 9}
In that example, $type === ocean
is false, so the @if
contents are ignored
and the @else
contents are used.
1p { 2 color: black; 3}
Iterators like @for
and @each
let you repeat content in a stylesheet.
A @for
statement repeats by a numerical counter defined as a variable.
It can be written as @for $counter from <start> through <end>
where
$counter
is the name of the iterating variable, <start>
is the number to
start with, and <end>
is the number to finish with.
It can also be written as @for $counter from <start> to <end>
where
$counter
is still the name of the counter variable, <start>
is still the
number to start with, but <end>
is now the number to finish
before, but not include.
When <start>
is greater than <end>
, the counter will decrement instead of
increment.
Either form of @for
can be written as
@for $var from <start> to <end> by <increment>
or
@for $var from <start> through <end> by <increment>
where <incremement>
is the amount the counter variable will advance.
1@for $i from 1 through 5 by 2 { 2 .width-#{$i} { 3 width: #{$i}0em; 4 } 5} 6 7@for $j from 1 to 5 by 2 { 8 .height-#{$j} { 9 height: #{$j}0em; 10 } 11}
In that example, $i
is repeated from 1 through 5 by 2, which means it is
repeated 3 times (1, 3, and 5). Meanwhile, $j
is repeated from 1 to 5 by 2,
which means it is repeated 2 times (1 and 3).
1.width-1 { 2 width: 10em; 3} 4 5.width-3 { 6 width: 30em; 7} 8 9.width-5 { 10 width: 50em; 11} 12 13.height-1 { 14 height: 10em; 15} 16 17.height-3 { 18 height: 30em; 19}
An @each
statement statement repeats through a list of values.
It can be written as @each $item in $list
where $item
is the
name of the iterating variable and $list
is the list of values being looped
over.
1@each $animal in (puma, sea-slug, egret, salamander) { 2 .#{$animal}-icon { 3 background-image: url("images/icon-#{$animal}.svg"); 4 } 5}
In that example, a list of 4 animals is looped over to create 4 unique classnames.
1.puma-icon { 2 background-image: url("images/icon-puma.svg"); 3} 4 5.sea-slug-icon { 6 background-image: url("images/icon-sea-slug.svg"); 7} 8 9.egret-icon { 10 background-image: url("images/icon-egret.svg"); 11} 12 13.salamander-icon { 14 background-image: url("images/icon-salamander.svg"); 15}
It can also be written as @each $item $counter in $list
where $item
is
still the name of the iterating variable and $list
is still the list of values
being looped over, but now $counter
is the numerical counter.
1@each $animal $i in (puma, sea-slug, egret, salamander) { 2 .#{$animal}-icon { 3 background-image: url("images/icon-#{$i}.svg"); 4 } 5}
1.puma-icon { 2 background-image: url("images/icon-1.svg"); 3} 4 5.sea-slug-icon { 6 background-image: url("images/icon-2.svg"); 7} 8 9.egret-icon { 10 background-image: url("images/icon-3.svg"); 11} 12 13.salamander-icon { 14 background-image: url("images/icon-4.svg"); 15}
In that example, a list of 4 animals is looped over to create 4 unique classnames.
Mixins let you reuse rule in a stylesheet. A @mixin
defines the content you
want to reuse, while an @include
rule includes it anywhere in your stylesheet.
Mixins are set by writing @mixin
before the name of the mixin you define.
This can be (optionally) followed by comma-separated variables you
want to use inside of it. Mixins are then used anywhere by writing @include
before the name of the mixin you are using. This is (again, optionally)
followed by some comma-separated arguments you want to pass into the mixin as
the (aforementioned) variables.
1@mixin heading-text { 2 color: #242424; 3 font-size: 4em; 4} 5 6h1, h2, h3 { 7 @include heading-text; 8} 9 10.some-heading-component > :first-child { 11 @include heading-text; 12}
In that example, @include heading-text
is replaced with its contents.
1h1, h2, h3 { 2 color: #242424; 3 font-size: 4em; 4} 5 6.some-heading-component > :first-child { 7 color: #242424; 8 font-size: 4em; 9}
Remember, mixins can be followed by comma-separated variables you want to pass into the mixin as variables.
1@mixin heading-text($color: #242424, $font-size: 4em) { 2 color: $color; 3 font-size: $font-size; 4} 5 6h1, h2, h3 { 7 @include heading-text; 8} 9 10.some-heading-component > :first-child { 11 @include heading-text(#111111, 6em); 12}
In that example, @include heading-text
is replaced with its contents, but
this time some of their contents are customized with variables.
1h1, h2, h3 { 2 color: #242424; 3 font-size: 4em; 4} 5 6.some-heading-component > :first-child { 7 color: #111111; 8 font-size: 6em; 9}
The variables
option defines global variables used when they cannot be
resolved automatically.
1require('postcss-advanced-variables')({ 2 variables: { 3 'site-width': '960px' 4 } 5});
The variables
option also accepts a function, which is given 2 arguments; the
name of the unresolved variable, and the PostCSS node that used it.
1require('postcss-advanced-variables')({ 2 variables(name, node) { 3 if (name === 'site-width') { 4 return '960px'; 5 } 6 7 return undefined; 8 } 9});
1.hero { 2 max-width: $site-width; 3} 4 5/* after */ 6 7.hero { 8 max-width: 960px; 9}
The unresolved
option defines how unresolved variables, mixins, and imports
should be handled. The available options are throw
, warn
, and ignore
. The
default option is to throw
.
1require('postcss-advanced-variables')({ 2 unresolved: 'ignore' // ignore unresolved variables 3});
The disable
option defines which features should be disabled in
PostCSS Advanced Variables.
The disable
option can be a string or an array, and the features that can be
disabled are @content
, @each
, @else
, @if
, @include
, @import
, @for
,
and @mixin
.
1require('postcss-advanced-variables')({ 2 disable: '@mixin, @include, @content' // ignore @mixin, @include, and @content at-rules 3});
These options only apply to the @import
at-rule.
The importPaths
option defines a path or multiple paths used to lookup
files when they cannot be found automatically.
The importPaths
option can be a string or an array.
By default, imports are resolved using the Sass Import Resolve Specification.
1require('postcss-advanced-variables')({ 2 importPaths: ['path/to/files', 'another/path/to/files'] 3});
The importResolve
option defines the file resolver used by imports. It is a
function given 3 arguments; the url id, the current working directory, and the
options processed by PostCSS Advanced Variables.
The importResolve
function should return a Promise with an object containing
the full path (file
) and the contents of the file (contents
).
1const resolve = require('custom-resolver'); 2 3require('postcss-advanced-variables')({ 4 // a resolver may work many ways, and this is just an example 5 importResolve: (id, cwd, opts) => resolve({ id, cwd }); 6});
The importFilter
option determines whether an import will be inlined.
The value can be a function or an regular expression. When
providing a function, it is called with a single string argument id
and returns true when the import should be inlined. When providing a
regular expression, if the id
matches the expression, the import will
be inlined.
By default, imports are ignored if they begin with a protocol or
protocol-relative slashes (//
).
1require('postcss-advanced-variables')({ 2 importFilter: (id) => { 3 return ['ignore', 'these', 'imports'].contains(id); 4 } 5});
The importRoot
option defines the root directory used by imports when the
current directory cannot be detected. Its default value is process.cwd()
.
1require('postcss-advanced-variables')({ 2 importRoot: 'path/to/root' 3});
The importCache
option defines a cache made available to the options object
that may be used by the file resolver.
1const sharedCache = {}; 2 3require('postcss-advanced-variables')({ 4 importCache: sharedCache 5});
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 existing vulnerabilities detected
Reason
Found 12/30 approved changesets -- score normalized to 4
Reason
2 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 1
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More