SCSS Mixins for CSS Vendor Prefixes is a git submodule
that should be compatible with GitHub's Pages
-
SCSS
toCSS
compiler, see notice from Ruby SCSS team for available migration options -
Declaring which should be prefixed, there's roughly
100
available
Add the code within this repository to your own as a submodule
via git
...
cd your-project
_git_url='https://github.com/scss-utilities/vendor-prefixes.git'
_destination='_scss/modules/vendor-prefixes'
git submodule add -b master "${_git_url}" "${_destination}"
... commit
and push
the changes to the .gitmodules
file and _scss/modules/vendor-prefixes
directory from within the root of you project...
git status
git commit -m ':heavy_plus_sign: Adds submodule scss-utilities/vendor-prefixes#1'
git push <remote> <branch>
Be sure to notify those cloning code from your project for the first time that...
git clone --recurse-submodules <your-repositorys-url>
... is a good idea, and those that have already cloned your project may instead want something like...
git submodule update --init --recursive --merge
... to sync up with the additional tracking information.
Within the main.scss
file for your site, import the lib/render-vendor-prefixes.scss
and lib/map-vendor-prefixes.scss
file and then any other vendor-prefixes
contained in this repository.
@import '_scss/modules/vendor-prefixes/lib/map-vendor-prefixes.scss';
@import '_scss/modules/vendor-prefixes/lib/render-vendor-prefixes.scss';
@import '_scss/modules/vendor-prefixes/cursor.scss';
.some-selectable-element {
@include cursor(pointer);
}
Above will output CSS
similar to...
.some-selectable-element {
-webkit-cursor: pointer;
-moz-cursor: pointer;
-o-cursor: pointer;
cursor: pointer;
}
Some of the available vendor prefixes may have additional arguments that may be passed, eg. the calc.scss
mixin has $property
, $value
, $fallback
keyword arguments...
@mixin calc($property, $value, $fallback: false) {
@if $fallback {
#{$property}: #{$fallback};
} @else {
@warn "Consider setting a fallback for #{$property}";
}
@include render-vendor-prefixes(
$property: $property,
$value: calc(#{$value}),
$vendor-list: (-webkit, -moz),
$prefix: value,
);
}
... which allows for setting a CSS
fallback for browsers that do not support calc()
...
@import '_scss/modules/vendor-prefixes/lib/map-vendor-prefixes.scss';
@import '_scss/modules/vendor-prefixes/lib/render-vendor-prefixes.scss';
@import '_scss/modules/vendor-prefixes/calc.scss';
.some-resizing-element {
@include calc(
$property: width,
$value: 100% - 40px,
$fallback: 85%
);
}
... eventually outputing CSS
a bit like...
.some-resizing-element {
width: 85%;
width: calc(100% - 40px);
}
Following Bash code may be used to @import
all vendor prefixes to a main.scss
file...
_module_path='_scss/modules/vendor-prefixes'
_imports_path='_scss/vendor-prefixes.scss'
_path_list=()
while IFS= read -r -d '' _path; do
_path_list+=("${_path}")
done < <(find "${_module_path}/lib" -type f -name '*.scss' -print0 | sort -z)
while IFS= read -r -d '' _path; do
_path_list+=("${_path}")
done < <(find "${_module_path}" -type f -name '*.scss' -not -path '*/lib/*' -print0 | sort -z)
for _path in "${_path_list[@]}"; do
[[ $(grep -q -- "@import '${_path}';" "${_imports_path}") ]] || {
tee -a "${_imports_path}" <<<"$(printf "@import '%s';" "${_path:6:-5}")"
}
done
## Note the ':6:-5' portion of '${_path:6:-5}' _should_
## strip '_scss/' or '_sass/' from beginning
## and '.scss' from end of file paths
Import the _imports_path
file into your main styles file, eg. assets/main.scss
for Minima....
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@import "minima";
@import "modules/vendor-prefixes";
... then declare any desired Sass vendor prefixes...
.example-class {
@include text-stroke(4px blue);
@include min-content(width);
}
... to build CSS similar to...
.example-class {
-webkit-text-stroke: 4px blue;
-o-text-stroke: 4px blue;
text-stroke: 4px blue;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
Legal bits of Open Source software
SCSS Vendor Prefixes documentation of a GitHub Pages compatible submodule
Copyright (C) 2019 S0AndS0
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation; version 3 of the License.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.