The great thing about SCSS is that it makes CSS becomes more lively by adding variables
, functions
, logic
and looping
to it.
This opens a whole new level of flexibility to CSSS.
This article will give an overview of the variables
& functions
in SCSS. As for the logic
and looping
part, that will be in another article.
SCSS Variables
A variable is a 'container' which stores value.
In SCSS, variables start with a $
sign and end with a ;
.
To make it easier to read, the variable name can be separated by a -
or a _
.
example:
$color-one: red;
$color_two: blue;
$color-three: orange;
h1 { color: $color-one; }
.blue { color: $color_two; }
#orange { color: $color-three; }
Variable Scopes
A variable can have global scope or local scope.
Global scope
Globally scoped variables are generally 'declared' at the beginning/top of the SCSS file outside any curly braces { }
.
In the example below: $color-one
is globally scoped.
$color-one: red;
h1 { color: $color-one; }
Local scope
Locally scoped variables are created within the curly braces { }
.
In the example, $color-five
, which is globally scoped, has been initially assigned a value of black
.
Later on, it has been assigned a new value of purple
.
Since this assignment is within { }
, we say that it is locally scoped.
The new value will persist only within the { }
and not elsewhere.
$color-one: red;
$color-five: black;
h1 {
color: $color-one;
}
.newColor {
$color-five: purple;
color: $color-five;
border: 1px solid $color-five;
}
We can use !global
to enforce the value of a local variable globally, but it is not recommended. Hence, I'm not showing any example.
Nesting in SCSS
Nesting makes the code easier to read.
Avoid nesting many levels, it'll make the code harder to read & understand.
To nest pseudo-classes, we need to prepend the pseudo-class with a &
.
Example &:hover
.
$size: 3em;
$color: blueviolet;
$color-hover: red;
/* Nesting with SCSS */
nav {
ul li {
background-color: lime;
text-decoration: none;
}
a {
font-weight: bold;
&:hover {
color: $color-hover;
font-size: $size;
}
}
}
/* Normal CSS */
a {
font-size: $size;
color: $color;
text-decoration: none;
}
a:hover{
color: green;
font-size: 2em;
}
Mixins
Mixin is a block of reusable CSS styles grouped together.
Did I mention "reusable"?
We declare a mixin by using @mixin
followed by a name.
To call/use a mixin, we use @inlcude
followed by the mixin name.
@mixin headingStyles {
background-color: $color;
text-align: center;
}
.header {
@include headingStyles;
}
Mixin parameter
Mixin parameter: single + default value
Mixin can accept a parameter.
That parameter can be given a default value if required.
$font-lg: 2em;
@mixin headingFont($size: 3em) {
color: $color-second;
font-size: $size * 2;
}
.header {
@include headingFont($font-lg);
}
Mixin parameters: multiple
To pass in more than one parameter, we need to use a parameter name followed by ...
3-dots.
@mixin myTransition($params...) {
transition: $params;
}
.text {
@include headingFont();
@include myTransition(color .5s, background-color 1s);
&:hover {
color: $color;
background-color: $color-second;
}
}
Extend
Extends allows one selector to inherit styles of another selector.
Like @mixin
, @extend
allows us to write cleaner and better code.
.heading {
color: red;
background-color: gold;
}
h1 {
@extend .heading;
}
h2 {
@extend .heading;
text-align: center;
}
Placeholder Selectors
If we have classes which are not used anywhere, we can make them become placeholders by replacing the .
with a %
.
For example an unused .heading
becomes %heading
.
Then we call it similarly as @extend
.
%heading {
color: red;
background-color: gold;
}
%toolbelt {
box-sizing: border-box;
border-top: 1px rgba(#000, .12) solid;
padding: 16px 0;
width: 100%;
&:hover { border: 2px rgba(#000, .5) solid; }
}
h1 {
@extend %heading;
}
h2 {
@extend %heading;
text-align: center;
}
p {
@extend %toolbelt;
}
Functions
Functions, like in all programming languages, allows us to execute the block of logic multiple times.
A function is declared with @function
followed by a name, similar to a mixin.
However, a function has to return a value. To do so we use the @return
keyword.
The function can also accept a parameter.
$size: 4em;
@function setFontSize($newSize: 1em) {
@return $newSize;
}
@function doubleFontSize($newSize: 1em) {
@return $newSize * 2;
}
.normal {
font-size: setFontSize();
color: red;
}
.biggest {
font-size: setFontSize($size);
color: green;
}
.doubled {
font-size: doubleFontSize();
color: blue;
}
Built-in Functions
SCSS comes with many useful functions.
$orange-color: orange;
.orange {
background-color: $orange-color
}
.orange-lighten {
background-color: lighten($orange-color, 25%);
}
.orange-darken {
background-color: darken($orange-color, 10%);
}
.mixed-color {
background-color: mix($orange-color, blue);
color:white;
}
A whole list of functions can be found here ➡️ https://www.rubydoc.info/github/sass/sass/Sass/Script/Functions
Top comments (4)
Thanks for writing this article. I think SASS may be a big improvement when I make user styles the next time.
Indeed, it does simplify things.
Keep an eye for my next post. It’ll be about some more advanced feature of SCSS.
Thanks :)
Nice article. Two questions: SASS and SCSS are both mentioned for the same concept, is this intentional? SCSS looks like a pre processor for CCS, is this the way browsers implement this?
That was an indeed a typo error, which I've corrected thank you.
SASS & SCSS are very similar but are syntactically different. SASS doesn't have braces
{ }
and ending semi-colons;
. No need to use@include
for mixin, use+
reducing keystrokes.And there are many more, do have a look at this article to better understand the differences.
thesassway.com/editorial/sass-vs-s...
And thanks again @jhelberg . Much appreciated.