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