SASS Coding Standards

Install SASS and compiling the code into CSS


/* Step : 1 */
>> Download Ruby for windows user : https://rubyinstaller.org/downloads
>> Open cmd and install sass globally -  gem install sass https://sass-guidelin.es

/* Step : 2 */
Compiling the code into CSS 

>> Go to the project folder where you want to run the sass via cmd or terminal

sass --watch style.scss:style.css --style nested
                              --style compact
                              --style expanded
                              --style compressed

>> Sass allows you to choose between four styles: nested, expanded, compact, and compressed.
https://www.quackit.com/sass/tutorial/sass_output_style.cfm

SCSS directory structure


scss/
|
|– abstracts/ (or utilities/)
|   |– _variables.scss    // Sass Variables
|   |– _mixins.scss       // Sass Mixins
|
|– base/
|   |– _fonts.scss         // Webfont font-face 
|   |– _normalize.scss     // Reset/normalize
|   |– _helpers.scss       // Flexbox Grid 
|   |– _typography.scss    // Typography rules
|   |– _buttons.scss       // Buttons
|   |– _forms.scss         // Forms
|
|– vendors/
|   |– _slick.scss         // Slider 
|
|– components/ (or modules/)
|   |– _header.scss        // Header
|   |– _device-menu.scss   // Devices menu
|   |– _footer.scss        // Footer
|
|– pages/
|   |– _home.scss          // Home specific styles
|   |– _about.scss         // About specific styles
|   |– _default.scss       // Common styles
|
`– style.scss              // Main Sass file

Variables


_variables.scss /* name of file */

/// Regular ( Open Sans ) font family
$font-family-base:  'Open Sans', 'Arial', sans-serif !default;

// Colors
$brand-primary :   #0eb769 !default;
$brand-secondary : #319e6b !default;

// Start with assigning color names to specific hex values.
$white:  #fff !default;
$black:  #000 !default;
$gray:   #464a4c !default;

// text color
$text-color:   $black !default ;

_hero-segment.scss /* name of file */    
/* How to use above mixin */
.banner {
.main-title {
    font-family: $font-family-base;
    color: $text-color;
}
}

style.css /* name of file */     
/* css output */
.banner .main-title{
font-family: 'Open Sans', 'Arial', sans-serif;
color: #000;
}

Mixins


_mixin.scss /* name of file */

/* Background group */
@mixin background($size:cover, $repeat:repeat, $position:center center) {
background-size: $size;
background-repeat: $repeat;
background-position: $position;
}

_hero-segment.scss /* name of file */    
/* How to use above mixin */
.banner{
@include background(cover, repeat, top left);
}

style.css /* name of file */     
/* css output */
.banner{
background-size:cover;
background-repeat:repeat;
background-position:top left;
}

Media query

General media query fo responsive css


@include respond-above(sm) {

}

@include respond-below(md) {

}

@include respond-between(sm, md) {

}


/* output */
@media ( min-width: 641px ) { 

}

@media ( max-width: 767px ) { 

}

@media ( min-width: 641px ) and ( max-width: 767px ) {

}

Code formating


/*--- header ---*/
.main-header {
width: 100%;
height: auto;

/* nav */
.navigation {
    width: 100%;
    height: auto;

    ul {
        padding: 0;
        margin: 0;
        list-style: none;

        li {
            padding: 0;
            margin: 0;
            list-style: none;

            a {
                text-decoration: none;
            }

            ul {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: block;
                margin: 0;
                color: $text-color;
                font-size: $font-size-base;
                background-color: $black;

                @include respond-between(sm, md) {
                    font-size: $font-size-base - 2;
                }
            }
        }
    }
}
}

Responsive helpers

Includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.


/* cell and spacing classes */
<div class="container" >
<div class="row" >
    <div class="cell-lg-4 cell-md-6 pt-lg-30 pt-20"></div>
    <div class="cell-lg-4 cell-md-6 pt-lg-30 pt-20"></div>
    <div class="cell-lg-4 cell-md-6 pt-lg-30 pt-20"></div>
    <div class="cell-lg-4 cell-md-6 pt-lg-30 pt-20"></div>
</div>
</div>

Create Typography

Before start with any page HTML must create css for following base Typography first.

<body>
<h1> to <h6> title tag
<p>
<a>
<ul> & <li>
<ol> & <li>
<blockquote>
<input> fields
<hr>
<img>
<table>

Demo Link: typography.html

Boilerplate

Download here : SASS boilerpalte

Content