programming Web Development CSS
Yudai H ⚑️
Yudai H ⚑️

@creator_yudai

18 Tweets 5 reads Jun 04, 2022
Twitter
Do you like CSS already?
Well then, you will love CSS with superpowers πŸ”₯
Learn Sass in this thread 🧡
Do you like CSS already? Well then, you will love CSS with superpowers πŸ”₯ Learn Sass in this thread...
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain.
This is where a preprocessor can help.
What is Sass?
Syntactically Awesome Stylesheets
It allows us to write next-gen CSS today, manage large CSS files, and split them across different files.
-Variables
-Nested rules
-Mixins
-Functions
-Parent Selector
Every valid code in CSS is valid Sass code.
So you can take your CSS files content and put it in a Sass and it will work just fine.
You might have heard about Scss
This is because .sass files allow us to write CSS without semicolons(;) and curly brackets ({}), with an added indentation for CSS properties.
You might have heard about Scss This is because .sass files allow us to write CSS without semicolo...
Files with the .scss extension is the CSS we used to write with semicolons and curly brackets.
That’s the main difference between Sass and Scss.
That's it πŸ˜‰
Variables
Sass provides the use of variables.
This is a very important feature because it lets you create variables for general assets like colors and fonts, and use them in any file.
We can declare a variable starting with a dollar sign $ and then the variable name.
We can declare a variable starting with a dollar sign $ and then the variable name. https://t.co/NsH...
Nested Rules
The feature I love the most about Sass.
We can group together related code, which is easy to modify and read by other developers.
It also saves us from typing extra characters.
Nested Rules The feature I love the most about Sass. We can group together related code, which is...
Parent selector
It is a special selector to refer to the outer selector.
The & will refer to the parent which is β€œa”
Parent selector It is a special selector to refer to the outer selector. The & will refer to t...
Mixins
It lets you create a group of CSS declarations that you want to reuse.
You can even pass in values to make the mixin more flexible.
We can declare a mixin using @mixin and use it with @include
Mixins It lets you create a group of CSS declarations that you want to reuse. You can even pass in...
@mixin @include Partials
It allows us to create separate .scss files and import them into another file.
To declare a partial file, we start the file name with underscore (_) and add it to another file using @import.
@mixin @include @import For example, I use them to load all my global variables.
You call them without using the _
@mixin @include @import For example, I use them to load all my global variables. You call them with...
@mixin @include @import Operators and functions
Sass provides support for mathematical operators like +,-,*,/ and %.
It also provides a calc function that we can use to calculate any value.
@mixin @include @import Sass functions can have a thread of it’s own, which I’ll post later on πŸ˜‰
@mixin @include @import So that’s it to get you started with Sass, CSS with superpowers.
It will help you write better and clean code, along with its multiple functionalities to upgrade your productivity.
@mixin @include @import I gather all my twitter threads in a githup repo, make sure to give it a visit πŸ‘‡
github.com
github.com
@mixin @include @import If you liked this thread, it would help me a lot if you give it some love πŸ’™ and share it πŸ” with your friends.
Make sure to follow @creator_yudai for more content like this.
See you in the next one πŸ€™

Categories

programming Web Development CSS

Some tweets missing

Loading suggestions...