There are two file extension fro sass files .sass and .scss the .scss is most like .css as it have semicolon ;
@importwill be depreacated in new version in sass so use@use_filename.scsswhen put undersocer_before file name that mean it wom't be compiled but it used only to be include and u can call it with out_for example
_global-rules.scss
// importing into main.scss
@use "./a/b/global-config.scss"
- Anything u will include into
main.scssu should do the previous method but if u want the file alone don't do it.
- css var
vsscss var css var-- when u use it thevar namewill be refrenced but when using -- created int root with two dash prefix--scss var-- thevaluewill be refrenced -- created in any thing by dollar sign$- to change global var u can use
!globalfor example - u can create file for var names to use it u must import file in file u want
@use "./var/var-names"but with this u can't use ur var to fix that there are two ways --@use "./var/var-names" as *it will show everything or$var01--@use "./var/var-names"it will show everything or and use var like thatvar-names.$var01 - $max-mobile : "max-width: 767px"
.parent {
font-weight: bold;
.child {
font-size: 20px;
.grand-child {
font-size: 15px;
}
}
}
Equivelant
.parent {
font-weight: bold;
}
.parent .child {
font-size: 20px;
.grand-child {
font-size: 15px;
}
}
.parent .child .grand-child {
font-size: 15px;
}
U can use all operator from css as selector
.parent {
> .child {
font-size: 20px;
}
.test {
font-weight: bold;
}
+ p {
font-size: 15px;
}
}
U can use and operator & to refrance parent as in the code below and it called parent
.box {
.title {
font-size: 10px;
}
.description {
font-size: 8px;
}
&.red {
color: red;
}
&.green {
color: green;
}
&:hover {
background-color: #eee;
}
&:hover .title {
font-weight: bold;
}
:not(&) {
font-weight: normal;
}
[dir="rtl"] & {
direction: rtl;
}
}
-
Property Declarations
.box { font-size: 20px; font: { size: 15px; weight: bold; } padding: 10px; margin: auto { top: 10px; bottom: 15px; } }
-
U can extend properties like oreder isnot required
.main-box { background-color: white; padding: 15px; border: 1px solid #ccc; } .ads { @extend .main-box; font-size: 20px; color: red; } .article { font-size: 22px; @extend .main-box; color: green; }U can achieve pervouis with css grouping
-
With pervouis method the declation u used should be used in your website but what if u want this as only as code organization and u won't use it in your website here come consept of
placeholder%main-box { background-color: white; padding: 15px; border: 1px solid #ccc; } .ads { @extend %main-box; font-size: 20px; color: red; } .article { font-size: 22px; @extend %main-box; color: green; }
// Control Flow => If And Else
$theme: "dark";
.page {
@if $theme == "light" {
background-color: white;
color: #444;
} @else {
background-color: #444;
color: white;
}
}
-
There is a thing like Ternanry operator and it's like
if(condition, [do if true], [do if false]) -
if compiler find
nullthe line won't be compiled or it will be erased
$rounded: false;
.box {
@extend %main-box;
border-radius: if($rounded, 6px, null);
}
@erroru can use it to throw error- Interpolation
#{var}u can use it to call variables
-
unique-id()U can use this function to generate unique id -
In interpolation u can call variableds and funcions
$company: "falcon";
$position: "right";
.ad-#{$company}-#{unique-id()} {
font-size: 20px;
background-image: url("imgs/#{$company}.png");
#{$position}: 0;
}
.ad-#{unique-id()} {
font-weight: bold;
}
-
There are diffrent type of comment and visibilty
// Comments // This Comment Will Not Show In CSS File /* This Comment Will Show In CSS File But Not In Compressed Mode */ /*! This Comment Will Show In CSS File And In Compressed Mode */ -
U can type comment anywhere
.box /* Multiple Lines Comment */ { font-size: 20px; // Inline Comment } /* This Comment Contains Interpolation => #{$company} */ -
Documentation
/// Function To Do Bla Bla Bla /// /// @param {num} /// The Number To Deal With /// @return {int}
- Mixin used like function in js u can define it and use it anywhere
at this point placeholder can do the job - U have the ability to pass parameters to it
Here Mixin shows it potentials
ul.links {
@include list-reset;
}
.circle-100 {
@include circle(100px);
background-color: red;
color: white;
}
.circle-200 {
@include circle(200px);
background-color: red;
color: white;
}
.center-circle {
@include circle(400px);
@include centering;
}
-
When project become bigger and u have much Mixin it's recommended to define a seperated folder for example
sass/helpers/_mixins.scssand collect all mixin in it. -
Don't forget to use documentaion to define param and return
-
Note
_underscoer used as this file won't be compailed and it will only used to be imported -
Some mixin library from Github -- 7ninjas/scss-mixins -- wagerfield/cssmixins
to dosn't include end
through include end
@for $i from 1 through 10 {
}
@for $i from 1 to 10 {
.class-#{$i} {
font-size: #{$i + 10px};
}
}
$dimensions: 0;
@for $i from 1 through 10 {
.circle-#{100 + $dimensions} {
width: $dimensions + 100px;
height: $dimensions + 100px;
border-radius: 50%;
}
$dimensions: $dimensions + 100;
}
-
Each
$themes: red, green, blue, orange; @each $theme in $themes { .#{$theme}-theme { .product { background-color: white; border-bottom: 2px solid $theme; .title { color: $theme; font-weight: bold; } } } } -
Map
$socials: ( "facebook": blue, "youtube": red, "github": black, "twitter": indianred, ); @each $name, $color in $socials { .#{$name} { background-color: $color; color: white; &::before { content: $name; } } } -
Desctruction concept
$classes: "one" 20px red, "two" 15px green, "three" 22px blue; @each $class, $font, $color in $classes { .#{$class} { font-size: $font; background-color: $color; color: white; padding: $font / 2; } }
Don't forget to implement condition otherwise there will be an infinte loop
$start: 1;
@while $start <= 10 {
.width-#{$start * 100} {
width: $start * 100px;
height: ($start * 100px) / 2;
}
$start: $start + 1;
}
percentage($i / $grid_cols)built in function to cal percentage
// Create Grid System
$grid_cols: 12;
@for $i from 1 through $grid_cols {
.col-#{$i} {
width: percentage($i / $grid_cols);
}
}
-
When project become bigger and u have much functions it's recommended to define a seperated folder for example
sass/helpers/_functions.scssand collect all functions in it. -
Don't forget to use documentaion to define param and return
-
Note
_underscoer used as this file won't be compailed and it will only used to be imported -
If U have function with non defined number of parameters u can use
varName...and access it witheach
/// Function To Get Element Height
///
/// @param {size}
/// Element Width
/// @return {int}
/// Return Element Height => Width / 2
@function half($size) {
@return $size / 2;
}
@function calculate($sizes...) {
$total: 0;
@each $size in $sizes {
$total: $total + $size;
}
@return $total;
}
U can use @content with @mixin to allow write content when mixin called
@mixin keyF($anim-name) {
@-webkit-keyframes #{$anim-name} {
@content;
}
@keyframes #{$anim-name} {
@content;
}
}
@include keyF(fade-in) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@include keyF(go-up) {
from {
bottom: 0;
}
to {
bottom: 100px;
}
}
// If Condition + Mixin + Content
.media {
@include breakpoints(mobile) {
font-size: 15px;
}
@include breakpoints(small) {
font-size: 18px;
}
@include breakpoints(medium) {
font-size: 20px;
}
@include breakpoints(large) {
font-size: 22px;
}
}
@mixin breakpoints($point) {
@if $point == mobile {
@media (max-width: 767px) {
@content;
}
} @else if $point == small {
@media (min-width: 768px) and (max-width: 991px) {
@content;
}
} @else if $point == medium {
@media (min-width: 992px) and (max-width: 1199px) {
@content;
}
} @else if $point == large {
@media (min-width: 1200px) {
@content;
}
}
}