Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !32791

Docs v4: Sass implementation and rounding precision

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/voltaek/v4-docs-sass-compiler-precision into v4-dev 4 years ago
  • Overview 3
  • Commits 5
  • Pipelines 0
  • Changes 3

Created by: voltaek

@XhmikosR Here is the backport you requested in #32512.

This makes changes similar to those made to the v5 docs to update and clarify the Sass compiler used and the minimum rounding precision we recommend with it. The details added are linked to from several places now instead of bits of the info being spread throughout the docs.

I added some notes about Node Sass being deprecated and how Dart Sass should be a mostly drop in replacement if the user would need support for newer Sass features or CSS standards. It's still made clear that we build Bootstrap v4 with Node Sass, so I think this is a good balance of telling them it's still alright to compile with it while also giving them options if they need newer features.

Compare
  • v4-dev (base)

and
  • latest version
    42310bc5
    5 commits, 2 years ago

3 files
+ 12
- 4

    Preferences

    File browser
    Compare changes
site/content/docs/‎4.5/getting-started‎
build-t‎ools.md‎ +8 -0
downl‎oad.md‎ +3 -3
themi‎ng.md‎ +1 -1
site/content/docs/4.5/getting-started/build-tools.md
+ 8
- 0
  • View file @ 42310bc5

  • Edit in single-file editor

  • Open in Web IDE


@@ -34,6 +34,14 @@ Run `npm run` to see all the npm scripts.
{{< partial "callout-info-npm-starter.md" >}}
{{< /callout >}}
## Sass
Bootstrap v4 uses [Node Sass](https://github.com/sass/node-sass) for compiling our Sass source files into CSS files (included in our build process). In order to end up with the same generated CSS when compiling Sass using your own asset pipeline, you'll need to use a Sass compiler that supports at least the features that Node Sass does. This is important to note because as of October 26, 2020, LibSass and packages built on top of it—including Node Sass—are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated).
If you require newer Sass features or compatibility with newer CSS standards, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on Dart Sass's [GitHub page](https://github.com/sass/dart-sass)).
We increase the Sass rounding precision to 6 (by default, it's 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won't be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted.
## Autoprefixer
Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
site/content/docs/4.5/getting-started/download.md
+ 3
- 3
  • View file @ 42310bc5

  • Edit in single-file editor

  • Open in Web IDE


@@ -21,10 +21,10 @@ This doesn't include documentation, source files, or any optional JavaScript dep
Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:
- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
- [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) for compiling Sass source files into CSS files
- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
Should you require our full set of [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
<a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
@@ -53,7 +53,7 @@ If you're using our compiled JavaScript and prefer to include Popper separately,
## Package managers
Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
### npm
site/content/docs/4.5/getting-started/theming.md
+ 1
- 1
  • View file @ 42310bc5

  • Edit in single-file editor

  • Open in Web IDE


@@ -14,7 +14,7 @@ Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There
## Sass
Utilize our source Sass files to take advantage of variables, maps, mixins, and more. In our build we've increased the Sass rounding precision to 6 (by default it's 5) to prevent issues with browser rounding.
Utilize our source Sass files to take advantage of variables, maps, mixins, and more when [compiling Sass]({{< docsref "/getting-started/build-tools#sass" >}}) using your own asset pipeline.
### File structure
0 Assignees
None
Assign to
2 Reviewers
Mark Otto's avatar
Mark Otto
XhmikosR's avatar
XhmikosR
Request review from
Labels
2
docs v4
2
docs v4
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
3
3 participants
XhmikosR
Mark Otto
Administrator
Reference: twbs/bootstrap!32791
Source branch: github/fork/voltaek/v4-docs-sass-compiler-precision

Menu

Explore Projects Groups Snippets