Skip to content

Instantly share code, notes, and snippets.

@LucasLevino

LucasLevino/input.scss

Created March 12, 2021 14:50
Show Gist options
  • Save LucasLevino/8e2522bf5a8c7335ee79378c8ba3eda3 to your computer and use it in GitHub Desktop.
Save LucasLevino/8e2522bf5a8c7335ee79378c8ba3eda3 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
@mixin clearfix {
&::after, &::before {
content: '';
display: table;
clear: both;
}
}
@mixin clearfix {
}
.container {
display: grid;
width: 100%; /* 1 */
max-width: 1024px; /* 1 */
margin-left: auto; /* 2 */
margin-right: auto; /* 2 */
padding-left: 20px; /* 3 */
padding-right: 20px; /* 3 */
}
.row {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
gap: 24px;
}
$cols: 6;
$gutter: 24px;
@function grid($col) {
$result: #{1} / $col ;
@return $result;
}
// Tag: Grid Classes
@for $i from 1 through $cols {
.col-grid-#{$i} {
grid-column: $i ;
}
}
// Tag: Grid Classes
@for $i from 1 through $cols {
.col-grid-1-#{$i} {
grid-column: grid($i);
}
}
// Tag: Mixin Grid's Structure
@mixin grid-structure {
}
[class^="grid-"] {
@include grid-structure;
}
.col-grid-2-2 {
grid-column: 1/4;
grid-row: 1/4;
}
body {
background: #151515;
}
.object {
background-color: red;
width: 100%;
height: 100px;
}
Raw
markup.html
<body>
<div class="container">
<div class="row">
<div class="object col-grid-1-3"></div>
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
</div>
</div>
</body>
Raw
output.css
.container {
display: grid;
width: 100%;
/* 1 */
max-width: 1024px;
/* 1 */
margin-left: auto;
/* 2 */
margin-right: auto;
/* 2 */
padding-left: 20px;
/* 3 */
padding-right: 20px;
/* 3 */
}
.row {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
gap: 24px;
}
.col-grid-1 {
grid-column: 1;
}
.col-grid-2 {
grid-column: 2;
}
.col-grid-3 {
grid-column: 3;
}
.col-grid-4 {
grid-column: 4;
}
.col-grid-5 {
grid-column: 5;
}
.col-grid-6 {
grid-column: 6;
}
.col-grid-1-1 {
grid-column: 1 / 1;
}
.col-grid-1-2 {
grid-column: 1 / 2;
}
.col-grid-1-3 {
grid-column: 1 / 3;
}
.col-grid-1-4 {
grid-column: 1 / 4;
}
.col-grid-1-5 {
grid-column: 1 / 5;
}
.col-grid-1-6 {
grid-column: 1 / 6;
}
.col-grid-2-2 {
grid-column: 1/4;
grid-row: 1/4;
}
body {
background: #151515;
}
.object {
background-color: red;
width: 100%;
height: 100px;
}
Raw
settings.json
{
"sass": {
"compiler": "libsass/3.5.5",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment