Learn SCSS

This repository contains the code for learning SCSS. SCSS is a preprocessor scripting language that is interpreted or compiled into CSS. SCSS is a superset of CSS, which means that it contains all of the features of CSS and is built on top of CSS. SCSS files are processed by the server before being served to the client as a CSS file.

npm GitHub code size in bytes GitHub repo size GitHub GitHub last commit

Table of Contents

Installation

npm install scss

Usage

sass input.scss output.css

Features

Variables

$variable-name : value;

Nesting

nav{
    ul{
        li{
            a{
                &:hover
                {
                
                }
            }
        }
    }
}

Partials & Imports

Create file with _filename.scss

@import "filename";

Mixins

@mixin align($value){
    text-align = $value;
}

.classname1{
    @include align(center);
}
.classname2{
    @include align(left);
}

Extends

.clasname{
    height: 10px;
    width: 10px;
    text-align: center;
}
.classname1{
    height: 12px;
    @extend .classname;
}

%clasname{
    height: 10px;
    width: 10px;
    text-align: center;
}
.classname1{
    height: 12px;
    @extend %classname;
}

Operators

.clasname{
    height: 10px;
    width: 10px;
    text-align: center;
}
.classname1{
    height: 12px;
    @extend .classname;
}

%clasname{
    height: 10px;
    width: 10px;
    text-align: center;
}
.classname1{
    height: 12px;
    @extend %classname;
}

Functions

@function function-name($value){
    @return($value/2)+px;
}

.half-column{
    width: function-name(1000);
}

@container-width: 1000;

@function half($width){
    @return $width/2 + px;
}

.half-width{
    width: half($container-width);
}

Inbuild Functions

  1. Numbers
  2. Strings
  3. Colors
  4. Lists
  5. Selectors
  6. Introspection

Number Functions

.test{
    margin: abs(10);
    margin: ceil(10);
    margin: floor(10);
    margin: round(10);
    margin: max(10px, 20px, 30px);
    margin: min(10px, 20px, 30px);
    margin: comparable(1rem, 2px);
    margin: percentage(0.5);
    margin: random();
    margin: unit(10);
    margin: unitless(10);
}

String Functions

.test{
    font-family: quote(Arial);
    font-family: unquote("Arial");
    font-family: to-upper-case(Arial);
    font-family: to-lower-case(Arial);
    font-family: str-length("Helvetica");
    font-family: str-index("Helvetica Neue","Neue");
    font-family: str-insert("Helvetia Neue","Mono",2);
    font-family: str-slice("Mono",1);
    font-family: unique-id();
}

Colors Functions

$base-color: pink;
.test{
    background-color: darken($base-color, 30);
    background-color: lighten($base-color, 30);
    background: adjust-hue($base-color, 30);
    background: saturate($base-color, 30);
    background: desaturate($base-color, 30);
    background: mix($base-color, yellow, 30);
    background: transparentize($base-color, 0.2);
    background: red($base-color);
    background: green($base-color);
    background: blue($base-color);
    background: hue($base-color);
    background: saturation($base-color);
    background: lightness($base-color);
    background: alpha($base-color);
}

Lists

$list : 10px 20px 30px;
$list1 : 10px 20px 30px;
$list2 : 10px 20px 30px;

.test{
    padding: length($list);
    padding: nth($list,1);
    padding: set-nth((Helventica, Arial, Verdana),1, Roboto);
    padding: join($list1, $list2);
    padding: append($list, 70px);
    padding: zip($list1, $list2);
    padding: index($list, 20);
    padding: list-separator($list);
    padding: is-bracketed($list);   
}

Selectors

$selector : selector-nest("ul","li");
$selector : selector-append("a",".active");
$selector : selector-replace("a.ab",".ab");
$selector : is-superselector("a","a.active");
$selector : simple-selector("a.ab");
$selector : selector-unify("a",".active");
$selector : selector-extend("a.active","a",".link");

#{$selector}{
    width: 10px;
}

Map

$font-weights : ("regular" : 400, "medium": 500, "bold": 700);
$light-weights : ("lightest" : 400, "light": 500);

$merge : map-merge($font-weights, $light-weights);
$remove: map-remove($font-weights, "regular")

.test{
    font-weight: map-get($font-weights, "bold");
    font-weight: map-keys($font-weights);
    font-weight: map-values($font-weights);
    font-weight: map-values($font-weights);
    font-weight: map-values($remove);
    font-weight: map-has-keys($font-weights, "bold");
}

Introspection

$char : "Arial"
$list : 10px 20px 30px;
$map : ("regular" : 400, "medium" : 500);

@mixin border-radius{
    border-radius: 5px;
}

@function add($a, $b){
    @return $a + $b;
}
.test{
    $num: 10px;
    padding: variable-exists(list);
    padding: global-variable-exists(list);
    padding: mixin-exists(border-radius);
    padding: function-exists(add);
    padding: type-of($char);
    padding: inspect($add);
}

Conditional Directives

@contect

@mixin test{
    @content;
}

@include test{
    .block{
    color: green;
    }
}

@media

.container{
    width: 1100px;
    margin: 0px auto;

    @media screen and (max-width: 1150px){
    width: 900px;   
    }
    @media screen and (max-width: 950px){
    width: 700px;   
    }
}

@at-root

.item{
    color: red;

    @at-root{
    .item-wrapper{
    color: green;
    }
    img{
    width: 100%;
    }
    }
}

Loops

@if and @else and @else if

$test : 2;

p{
    @if $test <= 5 {
    color: blue;
    }@else if $test > 5 and $test < 10{
    color: green;
    }@else {
    color: red;
    }
    font-size: 10px;
}

@for

@for $1 from 1 through 3{
    .list{
    width: 100px;
    }
}

@each

@each $iin (normal, bold, italic){
    .test{
    font-weight: bold;
    }
}

@while

$i : 10;
@while $i <= 50{
    .padding{
    padding-left: 10x;
    }
}

Connect with me

Support

If you like this learning repository and find it useful, consider buying me a coffee or sponsoring me through the GitHub Sponsor. Your support will help me to continue and bring more exciting projects. Thank you!

Buy Me A Coffee

Sponsor Me

Show your support by 🌟 the repository.