SASS commands

SCSS is a special type of file for SASS (syntactically awesome style sheets)
Sass allows variables to be defined. Variables begin with a dollar sign ($). Variable assignment is done with a colon (:)
Sass Script supports four data types :
  • Numbers (including units)
  • Strings (with quotes or without)
  • Colors (name, or names)
  • Boolean
Don’t be confused by the SASS and SCSS. for eg:
  1. /* SCSS */
  2. $red: #f00;
  3. $padding: 10px;
  5. .content{
  6. border-color: $red;
  7. color: darken($red, 9%);
  8. }
  9. .border {
  10. padding: $padding / 2;
  11. margin: $padding / 2;
  12. border: 2px solid $red;
  13. }
  1. /* SASS */
  2. $red: #f00
  3. $padding: 10px
  5. .content
  6. border-color: $red
  7. color: darken($red, 9%)
  9. .border
  10. padding: $padding / 2
  11. margin: $padding / 2
  12. border: 2px solid $red
After Compilation result would be:
  1. /* CSS */
  3. .content{
  4. border-color: #f00;
  5. color: #f00;
  6. }
  8. .border {
  9. padding: 5px;
  10. margin: 5px;
  11. border: 2px solid #f00;
  12. }

Let start sass/scss step by step:

There are many ways to use SASS, By RUBY, Node.js
First start with node, If ruby not install in your computer system the first install ruby package manager,
  1. /* install */
  2. gem install rail
  3. /* check sass version */
  4. sass -v
  5. /* run/ watch sass code. compile code scss file to css */
  6. sass --watch sass/main.scss:assets/css/main.css

or

second start with node, If node.js not install in your computer system the first install node.js package manager
then open cmd promt(window user) or terminal(ubuntu or mac user) then goto directory
  1. $ npm init
  2. /*for npm initiate*/
this command create a file package.json
  1. {
  2. "name": "sassTute",
  3. "version": "1.0.0",
  4. "description": "this is for SASS practice",
  5. "main": "index.js",
  6. "scripts": {
  7. "compile-sass": "node-sass sass/main.scss css/style.css -w"
  8. },
  9. "author": "shan",
  10. "license": "ISC",
  11. "devDependencies": {
  12. "node-sass": "^4.12.0"
  13. }
  14. }
  16. /* you can fill information or skip it pressing enter */
Now go to cmd promt or teminal and run below command
  1. $ npm install node-sass
  2. /* this install node packages */
now compile command
  1. $ npm run compile-sass
  2. /* compile-sass (image line no. 7) compile all sass/scss to css file */
SASS/SCSS have many interesting features:
  • Variables
  • Mixin
  • Nesting
  • Modules
  • Operators
  • Loops

Variables

variables as a way to store information that you want to reuse throughout your stylesheet. Sass uses the $ symbol to make something a variable. for example:
  1. /* SASS */
  2. $font-roboto: Roboto;
  3. $font-helvita: Helvetica, sans-serif;
  4. $light-color: #333;
  5. $dark-color: #111;
  7. h1{
  8. font: 100% $font-roboto;
  9. color: $dark-color;
  10. }
  11. h2{
  12. font: 100% $font-helvita;
  13. color: $light-color;
  14. }
  1. /* css */
  2. h1{
  3. font: 100% Roboto;
  4. color: #111;}
  5. h2{
  6. font: 100% Helvetica, sans-serif;
  7. color: #333;}

Mixin

mixin is another powerful feature, sometime css is common in some tags/classes, then we use mixin. A mixin lets you make groups of CSS declarations that you want to reuse throughout your website. for eg:
  1. /*scss */
  2. $fontcolor: #f00;
  3. @mixin transform($property) {
  4. -webkit-transform: $property;
  5. -ms-transform: $property;
  6. transform: $property;
  7. }
  8. @mixin propertyname{
  9. color: $fontcolor;
  10. font-weight: bold;
  11. }
  13. .box {
  14. @include transform(rotate(30deg)); }
  15. h1{
  16. @include propertyname;
  17. }
  18. p{
  19. @include propertyname;
  20. text-align: center;
  21. }
  22. a{
  23. @include propertyname;
  24. text-decoration: none;
  25. }
  1. /* css */
  2. .box {
  3. -webkit-transform: rotate(30deg);
  4. -ms-transform: rotate(30deg);
  5. transform: rotate(30deg);
  6. }
  7. h1 {
  8. color: #0a0;
  9. font-weight: bold; }
  11. p {
  12. color: #f00;
  13. font-size: 21px;
  14. text-align: center;}
  15. a{
  16. color: #f00;
  17. font-size: 21px;
  18. text-decoration: none;}

Nesting

SASS provide Nesting feature, But be-aware that overly nested rules
  1. /* scss */
  2. $small: 12px;
  3. $font-color: #f00;
  4. #service {
  5. padding: 20px 10px;
  6. .h2{
  7. font-size: $small;
  8. color: $font-color;
  10. span{ font-weight: bold; }
  11. }
  12. }
  1. /* css */
  2. #service{
  3. padding: 20px 10px;}
  5. #service h2{
  6. font-size: 12px;
  7. color: #f00;}
  9. $service h2 span{
  10. font-weight: bold;}

Modules

You can split your code by using modules, modules use with the @use rule. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename.

  1. // _inner.scss
  2. $font-stack: Helvetica, sans-serif;
  3. $primary-color: #333;
  5. body {
  6. font: 100% $font-stack;
  7. color: $primary-color;
  8. }
  10. // styles.scss
  11. @use 'base';
  13. .inverse {
  14. background-color: base.$primary-color;
  15. color: white;
  16. }
  1. /* css */
  2. body {
  3. font: 100% Helvetica, sans-serif;
  4. color: #333;
  5. }
  7. .inverse {
  8. background-color: #333;
  9. color: white;
  10. }

Operators

Math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.
  1. /* sass */
  2. .container {
  3. width: 100%;
  4. }
  5. article[role="main"] {
  6. float: left;
  7. width: 600px / 960px * 100%;
  8. }
  9. aside[role="complementary"] {
  10. float: right;
  11. width: 300px / 960px * 100%;
  12. }
  1. /* css */
  2. .container {
  3. width: 100%;
  4. }
  5. article[role="main"] {
  6. float: left;
  7. width: 62.5%;
  8. }
  9. aside[role="complementary"] {
  10. float: right;
  11. width: 31.25%;
  12. }

Loops

Loops also a very time efficient, we can do some mathematical operation with loops create multiple dynamic classes
  • for loop
  • while loop
  • each loop
  1. // FOR loop Syntax
  2. @for $var from <start> through <end>
  3. // eg:
  4. @for $space from 1 through 12{
  5. .padding-top-#{$space}{
  7. }
  8. }
  1. //css
  2. .padding-top-1 {
  3. padding-top: 10px; }
  5. .padding-top-2 {
  6. padding-top: 20px; }
  8. .padding-top-3 {
  9. padding-top: 30px; }
  11. .padding-top-4 {
  12. padding-top: 40px; }
  14. .padding-top-5 {
  15. padding-top: 50px; }
  17. .padding-top-6 {
  18. padding-top: 60px; }
  20. .padding-top-7 {
  21. padding-top: 70px; }
  23. .padding-top-8 {
  24. padding-top: 80px; }
  26. .padding-top-9 {
  27. padding-top: 90px; }
  29. .padding-top-10 {
  30. padding-top: 100px; }
  32. .padding-top-11 {
  33. padding-top: 110px; }
  35. .padding-top-12 {
  36. padding-top: 120px; }
while loop example in sass
  1. // scss
  2. $num: 6;
  3. @while $num > 0
  4. {
  5. $width: percentage( 1 / $num );
  6. .column-#{$num}
  7. {
  8. width: $width;
  9. }
  10. $num: $num - 1;
  11. }
  1. // css
  2. .column-6 {
  3. width: 16.66667%; }
  5. .column-5 {
  6. width: 20%; }
  8. .column-4 {
  9. width: 25%; }
  11. .column-3 {
  12. width: 33.33333%; }
  14. .column-2 {
  15. width: 50%; }
  17. .column-1 {
  18. width: 100%; }
each loop in sass
  1. //scss
  2. @each key, value in array {}
  4. $white: #fff;
  5. $black: #000;
  6. $red: #f00;
  7. $green: #0f0;
  9. $colors: (
  10. 'white': $white,
  11. 'black': $black,
  12. 'red': $red,
  13. 'green': $green
  14. );
  15. @each $color, $hex in $colors{
  16. .text-#{$color}
  17. {
  18. color: $hex;
  19. }
  20. .bg-#{$color}
  21. {
  22. background-color: $hex;
  23. }
  25. }
  1. //css
  3. .text-white {
  4. color: #fff; }
  6. .bg-white {
  7. background-color: #fff; }
  9. .text-black {
  10. color: #000; }
  12. .bg-black {
  13. background-color: #000; }
  15. .text-red {
  16. color: #f00; }
  18. .bg-red {
  19. background-color: #f00; }
  21. .text-green {
  22. color: #0f0; }
  24. .bg-green {
  25. background-color: #0f0; }


Comments

Post a Comment