В чем разница между node-sass и обычным sass и какой из них я использую?
- Bootstrap 4 использует s css ( Compass , который построен around sass)
- они используют аналогичный синтаксис, но есть разница в некоторых функциях
- node-sass - это библиотека, которая обеспечивает привязку для Node. Это позволяет вам компилировать файлы .s css в css. Поскольку вы используете менеджеры пакетов, такие как NPM, вы будете использовать Node.js. Эта библиотека привязывается к вашей среде и версии Node для предварительной обработки ваших файлов s css.
- с использованием наблюдателя css в gulp, для его работы требуются другие пакеты
- вы не нужен глоток для наблюдателя, но тогда вам, скорее всего, придется установить Ruby Компас (который в наши дни немного устарел, я могу ошибаться)
Что за правильный способ установить Sass и настроить его для отслеживания изменений?
Итак, подождите, вы уже решили использовать sass или вы имеете в виду s css? Правильнее всего будет придерживаться того, что находится в пакете Bootstrap. Если вы используете файл package. json, а вам это нужно, вам понадобится node-sass (я думаю). Возможно, существуют и другие пакеты, но я знаю, что это работает именно так.
Еще одна вещь, о которой стоит подумать, - это транспилятор, такой как Babel. Babel требует установки в пакете. json или в файле .browserslistr c.
Итак, некоторые важные вещи в пакете. json:
{
"dependencies": {
"bootstrap": "^4.3.1", // your bs version
"font-awesome": "^4.7.0", // we'll get to fonts later
"jquery": "^3.4.1", // bs dependency
"popper.js": "^1.15.0" // bs dependency
},
"devDependencies": {
"@babel/core": "^7.5.5", // transpiler requirement
"@babel/preset-env": "^7.5.5", // transpiler requirement
"debounce": "^1.2.0", // gulp task, depends on your Gulpfile.js
"es6-promise": "^4.2.8",
"eslint": "^5.16.0",
"graceful-fs": "^4.2.2",
"gulp": "^4.0.2", // your task runner Gulp
"gulp-autoprefixer": "^6.1.0", // gulp util
"gulp-babel": "^8.0.0-beta.2", // transpiler for gulp tasks
"gulp-clean": "^0.4.0", // gulp util
"gulp-clean-css": "^3.10.0",
"gulp-cli": "^2.2.0", // gulp requirement
"gulp-concat": "^2.6.1", // gulp util
"gulp-fs-cache": "^0.1.0", // gulp util
"gulp-modernizr": "^3.3.0", // great way to detect js requirements
"gulp-sass": "^4.0.2", // node-sass version for gulp
"gulp-sourcemaps": "^2.6.5", // gulp util
"gulp-uglify": "^3.0.2", // gulp util
"gulp-util": "^3.0.8", // hey gulp util
"gulp-watch-sass": "^1.4.1", // css compiler
"invariant": "^2.2.4", // not sure, probably got some warning
"minimatch": "^3.0.4", // not sure, probably got some warning
"node-gyp": "^3.8.0", // meh
"npm": "^6.11.2", // your package manager
"requirejs": "^2.3.6", // requirements in Gulpfile.js
"stream-series": "^0.1.1", // task util
"strip-ansi": "^4.0.0" // not sure, probably got some warning
},
"browserslist": [
"> 0.5%",
"not ie <= 10",
"not dead"
]
}
Итак хорошо, не совсем node-sass, но gulp-sass - это оболочка вокруг node-sass, которая, в свою очередь, привязывается к вашей среде. Я знаю, что в наши дни легко перепутать пакеты.
Настройку Babel можно изменить с помощью https://browserl.ist/. Это используется для вашего автопрефикса в CSS. Больше не нужно писать -webkit-blabla. В зависимости от настроек списка браузеров, он выберет это за вас.
Если я хочу использовать шрифты Google, куда мне импортировать / связать? В HTML? В моем пользовательском файле S CSS? Оба?
Я предпочитаю скопировать файлы пакета s css и создать файл fonts.s css в root. Оттуда мы можем импортировать шрифты Google или пользовательские шрифты, такие как font-awesome.
My fonts.s css файл
@import '_variables/myprojectname.custom.variables';
/*
* font-weight: 100; // Thin (Hairline)
* font-weight: 200; // Extra Light (Ultra Light)
* font-weight: 300; // Light
* font-weight: 400; // Normal
* font-weight: 500; // Medium
* font-weight: 600; // Semi Bold (Demi Bold)
* font-weight: 700; // Bold
* font-weight: 800; // Extra Bold (Ultra Bold)
* font-weight: 900; // Black (Heavy)
*/
//https://github.com/webpack-contrib/less-loader/issues/67
//https://github.com/madskristensen/BundlerMinifier/issues/191
// DIN PRO (converted)
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-Light.eot');
src: url('#{$converted-font-path}/DINPro-Light.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-Light.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-Light.woff') format('woff'), url('#{$converted-font-path}/DINPro-Light.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-Light.svg#DINPro-Regular') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-Regular.eot');
src: url('#{$converted-font-path}/DINPro-Regular.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-Regular.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-Regular.woff') format('woff'), url('#{$converted-font-path}/DINPro-Regular.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-Regular.svg#DINPro-Regular') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-Medium.eot');
src: url('#{$converted-font-path}/DINPro-Medium.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-Medium.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-Medium.woff') format('woff'), url('#{$converted-font-path}/DINPro-Medium.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-Medium.svg#DINPro-Medium') format('svg');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-MediumItalic.eot');
src: url('#{$converted-font-path}/DINPro-MediumItalic.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-MediumItalic.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-MediumItalic.woff') format('woff'), url('#{$converted-font-path}/DINPro-MediumItalic.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-MediumItalic.svg#DINPro-MediumItalic') format('svg');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-Bold.eot');
src: url('#{$converted-font-path}/DINPro-Bold.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-Bold.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-Bold.woff') format('woff'), url('#{$converted-font-path}/DINPro-Bold.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-Bold.svg#DINPro-Bold') format('svg');
font-weight: 700;
font-style: normal;
}
// HELVETICA ROUNDED
@font-face {
font-family: "Helvetica";
src: url('#{$cond-font-path}/HelveticaRounded-BoldCond.eot');
src: url('#{$cond-font-path}/HelveticaRounded-BoldCond.eot?#iefix') format('embedded-opentype'), url('#{$cond-font-path}/HelveticaRounded-BoldCond.woff2') format('woff2'), url('#{$cond-font-path}/HelveticaRounded-BoldCond.woff') format('woff'), url('#{$cond-font-path}/HelveticaRounded-BoldCond.ttf') format('truetype'), url('#{$cond-font-path}/HelveticaRounded-BoldCond.svg#HelveticaRounded-BoldCond') format('svg');
font-weight: 700;
font-stretch: condensed;
font-style: normal;
}
// ICON
@font-face {
font-family: $ico-font-family;
src: url('#{$ico-font-path}/#{$ico-font-family}.eot?v=#{$ico-font-version}');
src:
//url('#{$ico-font-path}/WHN-Icons.eot?#iefix&v=#{$ico-font-version}') format('embedded-opentype'),
url('#{$ico-font-path}/#{$ico-font-family}.woff?v=#{$ico-font-version}') format('woff'),
url('#{$ico-font-path}/#{$ico-font-family}.ttf?v=#{$ico-font-version}') format('truetype'),
url('#{$ico-font-path}/#{$ico-font-family}.svg?v=#{$ico-font-version}#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Обратите внимание на первую строку, как я использую файл пользовательских переменных. Это просто копия файла Bootstrap _variables.s css. Я воссоздаю настройку в своем собственном файле s css и переопределяю файл переменных.
Самая важная причина использования отдельного файла заключается в том, что шрифты блокируют рендеринг при загрузке . Разделение ресурсов (шрифтов, иллюстраций, изображений и т. Д.) Позволяет мне использовать асинхронные от c CSS <link /> до устранять проблемы с блокировкой рендеринга .
Пользовательские bootstrap setup имя_проекта.atomi c .s css:
/*!
* Atomic design principle
*/
@import "../vendor/bootstrap/scss/functions";
@import "_variables/fa.custom.variables"; // font awesome override variables
@import "_variables/projectname.custom.variables"; // bootstrap override variables
@import "../vendor/bootstrap/scss/variables";
@import "../vendor/bootstrap/scss/mixins";
@import "_mixins/company.custom.mixins"; // custom mixins
@import "../vendor/bootstrap/scss/root";
@import "../vendor/bootstrap/scss/reboot";
@import "../vendor/bootstrap/scss/type";
@import "../vendor/bootstrap/scss/images";
@import "../vendor/bootstrap/scss/code";
@import "../vendor/bootstrap/scss/grid";
@import "../vendor/bootstrap/scss/tables";
@import "../vendor/bootstrap/scss/forms";
@import "../vendor/bootstrap/scss/buttons";
@import "../vendor/bootstrap/scss/transitions";
@import "../vendor/bootstrap/scss/dropdown";
@import "../vendor/bootstrap/scss/button-group";
@import "../vendor/bootstrap/scss/input-group";
@import "../vendor/bootstrap/scss/custom-forms";
@import "../vendor/bootstrap/scss/nav";
@import "../vendor/bootstrap/scss/navbar";
@import "../vendor/bootstrap/scss/card";
@import "../vendor/bootstrap/scss/breadcrumb";
@import "../vendor/bootstrap/scss/pagination";
@import "../vendor/bootstrap/scss/badge";
@import "../vendor/bootstrap/scss/jumbotron";
@import "../vendor/bootstrap/scss/alert";
@import "../vendor/bootstrap/scss/progress";
@import "../vendor/bootstrap/scss/media";
@import "../vendor/bootstrap/scss/list-group";
@import "../vendor/bootstrap/scss/close";
@import "../vendor/bootstrap/scss/modal";
@import "../vendor/bootstrap/scss/tooltip";
@import "../vendor/bootstrap/scss/popover";
@import "../vendor/bootstrap/scss/carousel";
@import "../vendor/bootstrap/scss/utilities";
@import "../vendor/bootstrap/scss/print";
// This is where my real work comes in, for big projects this has proven to be succesful in maintaining and multisite setup
@import "atoms/atoms";
@import "molecules/molecules";
@import "organisms/organisms";
@import "tenants/projectname/themes/themes";
@import "tenants/projectname/pages/pages";
Повторно создавая настройку, становится легко изменить настройки по умолчанию. Просто помните об использовании !default, когда вы вставляете свои собственные переменные, и не используйте !default, когда это переменная bootstrap.
Часть моего _projectname.custom.variables.s css
$design-path: "/Design" !default;
$font-family-headings: Helvetica, sans-serif !default;
$font-family-headings-fallback: DINPro, sans-serif !default;
$cond-font-path: "../../../fonts/app/helvetica-rounded-converted" !default;
$pro-font-path: "" !default;
$converted-font-path: "../../../fonts/app/din-pro-converted" !default;
$ico-font-path: "../../../fonts/app/icomoon/projectname" !default;
$ico-font-version: "xyftn5" !default;
$ico-font-family: 'icomoon' !default;
$theme-green: #7EC796 !default; // de york
$theme-yellow: #FFBD51 !default; // texas rose
$theme-red: #E24B43 !default; // cinnabar
$theme-blue: #7CB1D1 !default; // half baked
$theme-pink: #FE8980 !default; // vivid tangerine
$theme-cyan: #A5B54E !default; // olive green
$theme-indigo: #12884E !default; // salem
$theme-orange: #F77D54 !default; // coral
$theme-teal: #307A83 !default; // paradiso
// FONTAWESOME VARIABLES override
$fa-var-arrow-down: "\e903";
$fa-var-arrow-left: "\e900";
$fa-var-arrow-right: "\e901";
$fa-var-arrow-up: "\e902";
$fa-var-bars: "\e914";
$fa-var-calendar: "\e908";
$fa-var-chevron-down: "\e907";
$fa-var-chevron-left: "\e904";
$fa-var-chevron-up: "\e906";
$fa-var-chevron-right: "\e905";
// BOOTSTRAP VARIABLES override
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );
$grid-gutter-width: 2rem;
$grid-gutter-fluid-width: 2.1875rem !default; // custom variable
$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1340px );
// and many many more become available at your fingertips
Как правильно импортировать Bootstrap функции, которые я хочу переопределить?
Это должно быть рассмотрено в предыдущем вопросе. Просто создайте свой собственный _functions.s css и добавьте его под исходным.
@import "../vendor/bootstrap/scss/functions";
@import "_functions/company.custom.functions"; // override or extend, your choice
Я понимаю, что это много, но вы просили довольно много :) Похоже, вы получили повесить его уже или просто несколько штук здесь и там. Не стесняйтесь спрашивать дополнительную информацию, например, Gulpfile. js или что-то в этом роде.
Удачи и получайте удовольствие, переваривая один из моих длинных ответов ^^