$breakpoints: (
'xs': ('(max-width: 576px)'),
'sm': ('(max-width: 768px)'),
'md': ('(max-width: 992px)'),
'lg': ('(max-width: 1199px)'),
);
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media #{inspect(map-get($breakpoints, $breakpoint))} {
@content;
}
} @else {
@error 'Не указано значение для `#{$breakpoint}`';
}
}
@include respond-to('md') {
// ...
}
gulp.task('build-css', function(){
gulp.src(scssFiles)
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(concatCss("style.css"))
.pipe(cleanCSS())
.pipe(gulp.dest(cssDist));
});
gulp.task('sass', () =>
gulp.src(variables.src.scss)
.pipe(errorNotifier.handleError(sass()))
.pipe(autoPrefixer({
browsers: ['last 2 versions', 'safari 5', 'ie 11', 'opera 12.1', 'ios 6', 'android 4'],
cascade: false
}))
.pipe(combineMq({
beautify: true
}))
.pipe(gulp.dest(variables.public.css))
.pipe(notify('Sass compile!'))
);
lighten(#ff7fa1, 20%)
darken(#ff7fa1, 20%)
saturate(#ff7fa1, 20%)
desaturate(#ff7fa1, 20%)
\31 u\24
= 1$
<div class="1$"></div>
.accept{
color: map-get($list, 'accept');
/* или */
color: map-get($list, accept);
}