Customize Your Websites with SASS
Customizing your websites is up to your imagination. If you trust your imagination, you can create professional websites with css. With SASS codes, you can create a comfortable css combination by shaping your website according to your own code style. It is very important to effectively define how HTML elements should be displayed on a web page in order to describe everything you need. But once you start working with large, complex sites, you may start to wonder if CSS could get any better. Forget these thoughts now! Because with SASS you will be able to parse your css codes.
SASS nedir?
SASS (Syntactic Awesome Style Sheets) is a CSS preprocessor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functions that make writing CSS much more powerful. In some ways, you can think of SASS as a style sheet extension language because it extends standard CSS features by offering the benefits of a basic programming language. This will compile your SASS code and generate CSS output that the browser can understand.
Yes, you just read “programming language” but that’s really basic stuff. If you are a programmer, if you have a special web design idea, your SASS compilation will take a very short time. But if you have no coding experience, your learning curve will be a little higher. Once you learn CSS with SASS, you no longer write CSS from scratch.
The advantages of using SASS are:
CSS syntax friendly.
If you know CSS, you know SASS. SASS comes in two different syntaxes: SASS itself and the most widely used SCSS. SCSS syntax is CSS compatible, so simply rename your .css file to .scss.
Of course, by doing this you don’t use the superpowers and abilities that SASS provides, but at least you realize that you don’t need to spend a lot of time getting started with SASS.
It offers the possibility to create custom variables for the fields you want.
One of the biggest advantages of using a CSS preprocessor like SASS is the ability to use variables. The variable allows you to store a value or a set of values and reuse these variables as and where you want in your SASS files. So you can change all the colors on your site with a single variable.
Imagine a scenario where you create a site in gorgeous red everywhere; buttons, menus, icons, containers, etc. You also use a few great fonts: Lato and Eurostile. Using traditional CSS you have to repeat the same code over and over, but with SASS you can define these values as variables and change them on the fly.
Sample code:
// Our variable code
$red: #ea2c2c;
$lato-font: ‘Lato’, sans-serif;
$euro-font: ‘Eurostile’, sans-serif;
// We have assigned 3 different variables in the above codes. 1. Color code, 2. Font code and 3. A different font code. You can correct the content of these codes according to yourself and customize the areas you want.
After creating the variables, you can use these codes inside the page.
Sample code:
H3 {
font: $euro-font;
color: $red;
}
a {
font: $lato-font;
background-color: $red;
}
When you compile your SCSS files, SASS takes care of the variables you use and replaces the variable name with its stored value. And of course, changing the value of the color is as fast as updating and recompiling the variable content. Gone are the days of using “Find and Replace” in your text editor to update the colors in your CSS file.
Time is now in your hands!
Uses enhanced syntax.
Another fantastic benefit of CSS preprocessors is improved syntax. SASS allows you to use nested syntax, which is code contained within another piece of code that performs a broader function. It provides a cleaner way to target items in SASS. In other words, you can nest your HTML elements using CSS selectors.
Improved syntax benefits:
- More natural syntax and easy to read in most cases
- Prevents the need to rewrite selectors multiple times
- Comprehensive and fast code structure for custom web design …
- More maintainable code.
Example of nested SASS (SCSS syntax) code:
.packages {
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 52rem;
&__on {
background-color: $maincolor-dark-blue;
height: 52rem;
transition: all .8s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
&–onyazi {
transform: rotateY(180deg);
&-1 {
background-image: linear-gradient(to right bottom, #545454, #000000);
}
&-2 {
background-image: linear-gradient(to right bottom, #545454, #000000);
}
&-3 {
background-image: linear-gradient(to right bottom, #545454, #000000);
}
}
}
However, keep in mind that nesting too deeply is not good practice. The deeper you dig, the more verbose the SASS file will be, and the potentially larger the compiled CSS will be, as nesting is flattened when compiled.
You can split, add and customize unlimited SCSS pages.
As your project grows and becomes more complex, so do your style sheets. You can add comments to your 5,000-line style sheet and then search for a specific pattern in your text editor, but it’s not a great solution. Or you can split your CSS file into 20 smaller chunks, but then you have an HTTP request for each .css file you import. You don’t want that either.
Fortunately, SASS has the @import rule. @import allows your code to be modulated by importing smaller SASS files. The difference between this and the CSS @import rule is that all imported SCSS files are combined into a single CSS file.
Importing SCSS / SASS files is really easy:
@import “layout/footer”;
@import “layout/menu”;
@import “components/projects”;
@import “components/form”;
@import “components/popup”;
@import “components/slider”;
As you can see, you don’t have to name the file extension, and the import path can also contain directories, which means you can give your SASS working directory whatever structure you want.