5 reasons you should be using Sass today
Everyday technology is moving so fast at same we have to move with that or else we fall back we find abandoned from technology.
CSS2 to CSS3 there are lot of changes happened so many properties have been added. Still few browsers doesn't support few properties.
Once CSS has doesn't know any functions or do nothing on dynamically on the client side its just a tailoring your website into beautiful design. But now SASS has come where css became CSSOOps and writing functions in our css.
Our web pages and apps get more complex our style sheets get larger and harder to maintain. CSS preprocessors like Sass help by keeping our style sheets concise and allowing us to modularize our code while offering a whole slew of features not yet available in regular CSS.
This means you can start using Sass while continuing to write your styles as you always have, slowly incorporating more features as your comfort level grows.
The main important features of SASS are.
1. Variables
$
followed by the name. This name can be whatever you want it to be. Then you type a colon :
followed by the value and a semi-colon ;
:$mainFont: "Helvetica Neue", Arial, sans-serif; $mainColor: #CC6699;
.mySelector { font-family: $mainFont; color: $mainColor; }
2. @import
@import
pulls in other style sheets but it does this by making another HTTP request, something we usually want to avoid. For this reason you may not have even used @import before. Sass, on the other hand, is a preprocessor (emphasis on the pre) that will pull in that file before it compiles the CSS._myFile.scss
. The underscore lets Sass know that the file is only a partial file and that it should not be compiled into CSS. To import this partial you just have to add the @import to your file like so:@import 'partials/myPartial';
3. Color functions
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
//in parenthesis you can put any color value followed by the amount you want to modify it by.
//lighten(#000, 10%)
//darken(rgb(0,0,0), 25%)
//rgba(blue, 0.6)
//rgba($mainColor, 0.6)
//use case
$color: #333;//set color variable
.myButton {
background-color: rgba($color, 0.8);
color: lighten($color, 65%);
border: 1px solid darken($color, 5%);
}
//this compiles to:
.myButton {
background: rgba(51, 51, 51, 0.8);
color: #d9d9d9;
border: 1px solid #262626;
}
4. Mixins
@mixin
keyword. We then give it a name and apply our styles in between curly braces like so:@mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Arguments can even be passed to the mixin to make it more flexible. To use our mixin we just use the
@include
keyword.//declare mixin(now being passed an argument) @mixin box-sizing($boxSize) { -webkit-box-sizing: $boxSize; -moz-box-sizing: $boxSize; box-sizing: $boxSize; } //use mixin .mySelector { @include box-sizing(border-box); } //compiled to: .mySelector { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@include
followed by the name of the mixin then any arguments inside parenthesis. Think of how much time this will save you. Why isn’t everybody using this?5. @extend
@extend
is one of the most useful features that allows us to share a set of CSS properties from one selector to another. Think of a pair of buttons, like an accept and decline button on a modal window. Since they are both buttons they’ll probably share most of the same styling but the decline button will have a red background to make it stand out. With Sass we write the default styles for all buttons then “extend” these styles to the decline button where we would add the red background..button {
background: rgba($color, .8);
color: lighten($color, 65%);
border: 1px solid darken($color, 5%);
padding: 1em;
display: block;
max-width: 200px;
}
.button-decline {
@extend .button;
background: red;
}
//compiles to
.button, .button-decline {
background: rgba(51, 51, 51, 0.8);
color: #d9d9d9;
border: 1px solid #262626;
padding: 1em;
display: block;
max-width: 200px;
}
.button-decline {
background: red;
}
No comments: