DEV Community

loading...

SCSS make life more easier .

fatimaalmashhor profile image Fatima Almashhor ・3 min read

What Scss ?

Scss is Sassy Cascading Style Sheets. It wraps the CSS to allow you to use functions and variables exc.. make more likely language like JavaScript .

Previously when we styled some of our projects we get repeated code and some time needed much work to design the things .

Then after the Scss appears make the style more clean , easy to read and use multiple times . I am not here to explain what is Scss and how to start and all these PLA PLA things , So let's jump into the way to use it .

Just Second before we dev deep into the example ?! Would you ever feel confused between the Scss and Sass?

Sass is stand from (Syntactically Awesome Style Sheets) ,language that will be compiled into CSS . SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax.SASS has more developer community and support than SCSS

let jump in into the basic syntax

Variables

the most useful feature , It is really help for write the value once and get it all over the project and help for avoid the forgot value of the colors , fonts size and even the break points

// Colors 
$color-primary : #333333;
$color-scondary :  #4F4F4F ;  
$color-oriange : #F2994A ;
$color-green : #B0C2AC ; 
Enter fullscreen mode Exit fullscreen mode

Functions

the second things that we absolutely aspect from script language is the methods , Which struct our code and reject the repetitions .In Scss there are two comment way to do that on is by using @mixin and the other is @function.
And the equation is which one is better . Let me tell you the main differences between them first . Function are blocks of code that return a single value of any Sass data type.

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}
Enter fullscreen mode Exit fullscreen mode

And invoke it like this

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}
Enter fullscreen mode Exit fullscreen mode

But the mixin will compile directly into CSS styles, no need to return any value .
like

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}
Enter fullscreen mode Exit fullscreen mode

By using the @include

Import

Sometime we need to split the code into multiple file ,Then we need to call some of them into other Scss make the way possible by adding statements to do so . Like @import and @use.
The main differences is how they handle members. @import makes everything globally accessible in the target file. The Sass team discourages the continued use of the @import rule and that because it is allows for overlap and makes it difficult to trace back why your perfect css breaks .

Same as @import, @use rule enables us to break our stylesheet into more practical, smaller sections and load them inside other stylesheets. The key difference is how you access the original files' members .
and You can access variables, functions, and mixins from another module by writing .,

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
Enter fullscreen mode Exit fullscreen mode
// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}
Enter fullscreen mode Exit fullscreen mode

extend

one more think I like to add here the @extend . when one class should have all the styles of another class, as well as its own specific styles.

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}
Enter fullscreen mode Exit fullscreen mode

after compile it will be like

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}
Enter fullscreen mode Exit fullscreen mode

I will keep update this post till I get the most helpful features in SCSS . I HOPE YOU ENJOY IT

Discussion (6)

pic
Editor guide
Collapse
3in0 profile image
3in0 • Edited

I've found functions and mixins very useful and initially also variables but after our company moved off IE11 and we could make use of CSS variables (custom properties) I've found I can make global style changes on-the-fly by defining variables in a class that I can use to toggle on the a parent container. Example dark mode:

body {
background-color: var(--theme-bg-color);
color: var(--theme-fg-color);
}

.theme-dark {
--theme-bg-color: #000;
--theme-fg-color: #fff;
}

.theme-light {
--theme-bg-color: #fff;
--theme-fg-color: #000;
}

Then toggle between these classes on the body (in this example).

You could still use SCSS variables here but for var definitions they need to be interpolated as strings like this:

.theme-dark {
--theme-bg-color: #{$color_bg_theme_dark};
--theme-fg-color: #{$color_fg_theme_dark};
}

/* etc */

Collapse
nefomemes profile image
Nefomemes

Tbh I prefer SASS to SCSS. Very unorthodox syntax and I love it

Collapse
zava810 profile image
viml kumar

yes sass is more preferable but at some places only scss is option like if ve vant to create github repo as our page like user.github.io then jekyll/scss is there but sass is not included.

Collapse
nefomemes profile image
Nefomemes

Wait, isn't like SCSS share the same transpiler as SASS?

Thread Thread
zava810 profile image
viml kumar

oh yes vhen i searched , found as per markdotto.com/2014/09/25/sass-and-... ve can use sass also . i vill try sass.

Collapse
tarek_mo profile image
tarek mo

What I love the most about SASS is the import feature that allows you to split code into multiple pieces, makes your life so mush easier when you wanna look for stuff.