This content originally appeared on DEV Community and was authored by aryan015
note: I will not always show CSS version of my code.
SCSS
SCSS (Syntatically Awesome Stylesheet) is CSS pre-processor. It uses *.scss extension. Based on Ruby 💎.
Installation (install)
using node package manager
npm install -g sass
using Extension in VSCODE (easier guide)
You might this on preffered IDE too.
glenn2223.live-sass
# the above code is for extension name live-sass compiler
compilation
# after installtion run this command it will com
# pile index.scss to index.css
sass source/stylesheets/index.scss build/stylesheets/index.css
# sass package is prerequisite
variables
With Sass, you can store information in variables, like:
- strings
- numbers
- colors
- booleans
- lists
- nulls
$variableName:value;
code
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;h
in scss you dont have to use var() method to use variables. (that'a why i prefer it.)🧡
body{
font-famly:$myFont;
}
after compilation
body{
font-famly:Helvetica, sans-serif;;
}
variaible scoping
They are available only where {} are defined.
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
compilation
h1 {
color: green;
}
p {
color: red;
}
!global
The default behavior for variable scope can be overridden by using the !global switch.
$myColor:red;
h1{
$myColor:green !global; /*it will replace red to green use with caution*/
color:$myColor; /*green*/
}
p{
color:$myColor; /*green*/
}
note: avoid using global you might never know what causing your varible a different color. 🧡
SCSS nesting
Another reason I use SCSS pre-processor that it support nesing.
nav{
li{
list-style:none;
}
p{
color:red; /*set color to red*/
}
}
after compilation
nav li{
list-style:none;
}
nav p{
color:red;
}
Because you can nest properties in Sass, it is cleaner and easier to read than standard CSS. At the end I will show you a scss hake.
@Import
Scss keeps the CSS code DRY (Don't Repeat Yourself).You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables, colors, fonts, font-sizes, etc. (extension is optional). You might required it in big apps.
@import "variables";
@import "reset";
SCSS NESTED HACK
font: {
family: Helvetica, sans-serif;
}
text: {
align: center;
}
p {
font-family:helvetica, sans-serif;
text-align:center;
}
SCSS partials
It let transpiler know that it sould not translate this file to .scss. Syntax is __colors.scss. Import does not require __ in the name.
__colors.scss
$myGreen:green;
main.scss
@import "colors";
body{
color:$myGreen;
}
Part two
link
if the link is going to google means second has not been uploaded🧡. Might need atleast 5 stars ⭐ on this post.🤣
learning resources
🧡Scaler - India's Leading software E-learning
🧡w3schools - for web developers
This content originally appeared on DEV Community and was authored by aryan015
aryan015 | Sciencx (2024-06-23T11:38:45+00:00) SCSS Complete guide part one 🧡. Retrieved from https://www.scien.cx/2024/06/23/scss-complete-guide-part-one-%f0%9f%a7%a1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.