Как расширить существующие классы сетки начальной загрузки SASS

Я пытаюсь сделать свой код чище, поэтому у меня есть что-то вроде этого

 <div class="col-sm-6 col-md-6">
                    <div class="feature-list-item">
                        <div class="feature-list-item__icon-container">
                            <i class="feature-list-item__icon fa fa-code"></i>
                        </div>
                        <div class="feature-list-item__description">
                            <h4 class="feature-list-item__description-title">Clean Code</h4>
                            <p class="feature-list-item__description-text"> Hello world</p>

                        </div> 
                    </div>
                </div>

Как вы уже догадались, мне не нравится эта обертка div - <div class="col-sm-6 col-md-6">

Это отличная идея использовать его в качестве макета в соответствии с правилами SMACSS.

Итак, я хочу создать класс для макета, например l-feature-list-item

И замените все эти классы столбцов, чтобы они выглядели следующим образом.

 <div class="l-feature-list-item">
                    <div class="feature-list-item">
                        <div class="feature-list-item__icon-container">
                            <i class="feature-list-item__icon fa fa-code"></i>
                        </div>
                        <div class="feature-list-item__description">
                            <h4 class="feature-list-item__description-title">Clean Code</h4>
                            <p class="feature-list-item__description-text"> Hello world</p>

                        </div> 
                    </div>
                </div>

Но в этом случае мне нужно расширить col-sm-6 col-md-6 классов из Bootstrap SASS sources

.l-feature-list-item {
   @extend .col-sm-6;
   @extend .col-md-6;
}

Это псевдокод.

Итак, мой вопрос заключается в том, как правильно организовать мою идею. Использование @import “../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap”; заставит выводить каждый отдельный класс из bootstrap sass sources, что является нежелательным поведением. Мне нужно импортировать только зависимости, и было бы здорово, если бы можно было @extend как placeholders.

Буду признателен за любую помощь.


css twitter-bootstrap sass code-cleanup
person CROSP    schedule 11.08.2016    source источник
comment
Вы уверены, что хотите это сделать? Любой, кто знаком с Bootstrap, может взглянуть на class="col-sm-6 col-md-6" и точно узнать, что это такое.   -  person Barryman9000    schedule 12.08.2016
comment
Что, если я захочу поменять свою систему сетки, в этом случае мне нужно изменить все в моем HTML, но в основном это будет сложный PHP-файл. Вот почему я хочу инкапсулировать все это   -  person CROSP    schedule 12.08.2016
comment
Да, но есть ли вероятность, что вам понадобится/хотите поменять свою сетку? Поможет ли создание другой сетки (т. е. большего количества столбцов) с помощью миксина _grid.scss?   -  person Barryman9000    schedule 12.08.2016

Ответы (2)


arrow_upward
0
arrow_downward

Вот как это можно сделать, когда вам нужен полный Bootstrap, но с большим размером сетки. Важно сначала импортировать переменные Bootstrap, внести изменения и затем импортировать остальную часть Bootstrap. Итак, предположим, у вас есть style.scss:

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
 
// extend bootstrap grid system
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1360px,
  xxxl: 1860px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1300px,
  xxxl: 1800px
);

@import '~bootstrap/scss/bootstrap';

// your code next
person Alex K    schedule 02.10.2020

arrow_upward
0
arrow_downward

В Bootstrap 4 bootstrap-grid можно построить отдельно от остальной части Bootstrap. Поэтому вы можете использовать и расширять только такие классы сетки...

@import "bootstrap-grid";

.l-feature-list-item {
   @extend .col-sm-6;
   @extend .col-md-6;
}

Демонстрация: https://codeply.com/go/u5qAx8K7AN

Также см.: Как расширить/изменить (настроить) Bootstrap 4 с помощью SASS

person Zim    schedule 01.06.2018