@use 'base.scss';
@use 'banner.scss';$_color: red;@use './base';
a{
color: base.$color;
text-decoration: none;
}Может быть, в сети, где-то есть актуальная железобетонная инструкции для того, чтобы импорты, переменные, да и Sass нормально завелись?
Т.к. например, при правке стилей класс найти проще, если стили написаны без вложенности.
function css() {
return src('./src/assets/scss/style.scss', {sourcemaps: true})
...
+ .pipe(sourcemaps.init())
- .pipe(sass({sourceComments: 'map'}))
+ .pipe(sass())
- .pipe(sourcemaps.init({loadMaps: true}))
- .pipe(sourcemaps.write())
.pipe(groupCssMediaQueries())
...
.pipe(rename({
suffix: '.min',
extname: '.css'
}))
+ .pipe(sourcemaps.write('.'))
.pipe(dest(path.build.css))
.pipe(browserSync.reload({stream: true}))
}:root {
--aside-width: 200px; /* По умолчанию */
}
.aside {
width: var(--aside-width);
}
.main {
margin-right: var(--aside-width);
}document.documentElement.style.setProperty('--aside-width', '200px'); // show
document.documentElement.style.setProperty('--aside-width', '0'); // hidegulp-sass no longer has a default Sass compiler; please set one yourself.
Both the "sass" and "node-sass" packages are permitted.
For example, in your gulpfile:
const sass = require('gulp-sass')(require('sass'));как можно исправить эту проблему??
@mixin example() {
&::hover { color: red; } // Так можно
// но миксин можно использовать только внутри родительского селектора
}
&::hover { color: red; } // Так нельзя, нет родителя
.block {
&::hover { color: red; } // Так можно, есть родительский селектор (.block)
}
@include example(); // Так нельзя, внутри обращение к родителю, а его нет
.block {
@include example(); // Так можно
}@mixin verticalAlign($screen) {
@each $direction, $alignment in $alignments {
&.v-align-#{$screen}-#{$direction} {
align-items: $alignment;
}
}
}
@mixin media($minWidth) {
@media (min-width: $minWidth) {
@content;
}
}
@include media(768px) {
@include verticalAlign('md');
}возможно, как-то можно расширить
sassOptions: {
includePaths: [
path.join(__dirname, 'styles'),
path.join(__dirname, 'components'),
]
},@mixin media-from($bp) {
@media (min-width: $bp) {
@content;
}
}.box {
...
@include media-from($desktop) {
...
}
}<html lang="ru">
<html lang="en">html[lang=ru] {
--base-font-size: 16px;
}
html[lang=en] {
--base-font-size: 18px;
}h1 {
font-size: calc(var(--base-font-size) * 2)
}.main {
.block1 {
color: blue;
}
}
.main.red {
.block1 {
color: red;
}
}.main {
.block1 {
color: blue;
}
&.red {
.block1 {
color: red;
}
}
}@import 'file.scss'