Geek asks and answers

How to show Bourbon Neat grid columns?

In my CSS file, the Bourbon Neat commands are used and do not display the columns in the html file if they show the result of the application but do not show the columns.

.container{
    @include outer-container;
    @include span-columns(2 of 8, table);
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    width: 960px;
}

When it is shown that the css generated for sass does not show the background property of the Bourbon Neat columns.

+5
source share
4 answers

It is important to set both parameters $visual-grid: true;and define breakpoints in front of your line.@import "neat";

From https://github.com/thoughtbot/neat#using-neat :

The visual grid reflects the changes applied to the grid through new-breakpoint (), as long as media contexts are defined before importing Neat.

, _grid-settings.scss ( ), . , , $visual-grid: true; . , , .

+14

, "$ visual-grid: true"; . , , . , _getting-settings.scss :

$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.5;

, $visual-gridL, , , . , .

+11

,

  $visual-grid: true;

.

+1

  • Create the file as shown below (configure the settings according to your own requirements). This file overwrites the neat default settings that are in _visual-grid.scssthe optional settings directory.

  • Add import to the file you just created, in the line Before (after it will not work) you import the main neat file into your main SCSS file for the project.

_neatsettings.scss

// Neat Settings

$visual-grid: true;
$visual-grid-color: #faa;
$visual-grid-index: front;
+1
source

More articles:


All Articles