The days we all are dependent on the designer and developer, help to create and update our websites. Nowadays, with the use of CSS and SCSS available, the website development process has become more smooth and easier with less effort. So by using CSS and SCSS it is extremely easier and hassle-free to create or design any website .

What is CSS

Cascading Style Sheet (CSS) is a language used to define great looking and better visual appearance and formatting of HTML.
This blog will clarify what CSS is, the manner by which the program transforms HTML into a Document Object Model, how CSS is connected to parts of the DOM, some extremely fundamental linguistic structure precedents, and what code is utilized to really incorporate our CSS in our site page.

body {
font-size:14px;
color: #444;
background-color:#FFFFFF;
}

Advantages

  • Saves Time
  • Help to Make sudden and Consistent Changes
  • Improves Page Loading Speed
  • Device Compatibility
  • Ability to Re-Position
  • Makes the Search Engine Better Crawl Your Web Pages

Disadvantages

  • Cross-Browser Issues
  • Confusion Due to Its Many Levels

What is SCSS?

Scss is Sassy Cascading Style Sheets.

Sass is a style sheet language at first designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files.

SASS/SCSS is a CSS preprocessor that runs on the server and compiles to CSS code that your browser understands. There are client-side alternatives to SASS that can be compiled in the browser using javascript such as LESS CSS, though I advise you compile to CSS for production use.

$primaryColor: #eeccff;

body {
$primaryColor: #ccc;
background: $primaryColor;
}

p {
color: $primaryColor;
}

Advantages

  • Sass helps you to write clean, easy and less CSS in a programming construct.
  • It contains fewer codes so you can write CSS quicker.
  • It is more stable, powerful because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.
  • It is compatible with all versions of CSS. So, you can use any available CSS libraries.
  • It provides nesting so you can use nested syntax and useful functions like color tricking, math functions and other values.

Disadvantages

  • The developer must have enough time to learn new features present in this preprocessor before using it.
  • Using Sass may cause losing benefits of browser’s built-in element inspector.

Why we use SCSS?

  • Sass is a pre-processing language and it has its own set of rules for forming language for CSS.
  • It is easy, short and clean in a programming construct.
  • It has some features that are used for creating awesome style sheets and helps writing code easier
    to maintain and efficient.
  • It contains all the features of CSS along with some advanced features.
  • It helps reusability methods, logic statements and some of the built-in functions like color manipulation, mathematics, and parameter lists.
  • It helps you to keep your responsive design project more organized.
  • You don’t need to repeat almost the same CSS again and again in your project.

Integration of SASS

Add this to your composer.json, please note that this is a require-dev, not a normal require. This divides real dependency from ones you only need for local development.

"require-dev": {
"panique/laravel-sass": "dev-master"
}

Then edit your index.php (in folder “public”) and put this line right before $app->run().
SassCompiler::run(“scss/”, “css/”);
// some people said this does not work in their installation, so if you have trouble, try these paths:
// SassCompiler::run(“public/scss/”, “public/css/”);
The first parameter (okay okay it’s called argument, not parameter 🙂 ) is the folder where your SASS files are, the second one if the folder where your CSS are or should be. If you don’t have these folders, create them. Also make sure PHP has write-rights to the css folder, so do a
sudo chmod -R 777 public/css
while being in var/www. Please note that this is just for development, on a production server we don’t need the css folder to be writeable in any way.
Now install the Composer dependencies via
composer install
or
composer update

Difference between CSS & SCSS

CSS

In CSS we write code as shown bellow, in full length.

body{ width: 800px; color: #ffffff; } body content{ width:750px; background:#ffffff; }

SCSS

In SCSS we can shorten this code using a @mixin so we don’t need to compose shading and widthproperties over and over. We can describe this through a capacity, comparably to PHP or different versions of a language.
$color: #ffffff; $width: 800px; @mixin body{ width: $width; color: $color; content{ width: $width; background:$color; } }

How to implement SCSS using SASS Compiler

Sass is a CSS preprocessor. This is a piece of software that adds a new feature-set to CSS like variables, nesting and mixins. You write in a slightly changed CSS-like syntax which is then processed into plain-ol’-CSS. This processing can either happen on your development environment as you’re coding or as a part of your deployment process.

There are many ways to compile Sass:

  • The original Ruby Sass binary. Install it with gem install sass, and compile it by running sassc myfile.scss myfile.css.
  • A GUI app such as Hammer, CodeKit, or Compass.
  • My personal favorite libsass, which is a blazing fast Sass compiler written in C. You can also install libsass via NPM with node-sass (npm install node-sass).

krunal sojitra

Giving up is always an option, but it's never MY CHOICE.

Want to work with us? We're hiring!