SCSS Vendor Prefixes

SCSS Mixins for CSS Vendor Prefixes is a git submodule that should be compatible with GitHub's Pages

---

Table of Contents

• ⬆️ Top of ReadMe File

• 🏗️ Requirements

• ⚡ Quick Start

• 🐚 Utilize Vendor Prefixes

• 🗒 Notes

• 📇 Attribution

• ⚖️ License

---

Requirements

• SCSS to CSS compiler, see notice from Ruby SCSS team for available migration options

• Declaring which should be prefixed, there's roughly 100 available

---

Quick Start

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.

---

Utilize Vendor Prefixes

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);
}

---

Notes

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;
}

---

Attribution

• W3 -- Vendor Keyword History

• StackOverflow -- List of CSS Vendor Prefixes

• SassDoc -- annotations

• Mozilla Developer -- CSS Reference

• Wikipedia -- Browser Prefixes

• Wikipedia -- Browser Engines CSS Support

---

License

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/>.