avatarRajdeep Singh

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

1844

Abstract

tainer</span>-bg:white;</span></pre></div><div id="43a9"><pre><span class="hljs-selector-tag">body</span> <span class="hljs-attribute">font</span>: <span class="hljs-number">100%</span> font-stack; <span class="hljs-attribute">color</span>: primary-color; <span class="hljs-selector-class">.container</span> <span class="hljs-attribute">background-color</span>: container-bg; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#000</span>; <span class="hljs-attribute">display</span>: flex; <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>; <span class="hljs-attribute">justify-content</span>: space-between; <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto; <span class="hljs-attribute">padding</span>: <span class="hljs-number">1em</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">50%</span>; &amp;<span class="hljs-selector-pseudo">:hover</span> <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#d9534f</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#fcfcfc</span>;</pre></div><h1 id="e4c5">scss code:</h1><div id="4027"><pre><span class="hljs-meta"><span class="hljs-keyword">font</span>-stack: Helvetica, sans-serif;</span> <span class="hljs-meta"><span class="hljs-keyword">primary</span>-color: #333;</span> <span class="hljs-meta"><span class="hljs-keyword">container</span>-bg:white;</span></pre></div><div id="26c5"><pre><span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">font</span>: <span class="hljs-number">100%</span> $font-stack; <span class=

Options

"hljs-attribute">color</span>: primary-color; <span class="hljs-selector-class">.container</span> { <span class="hljs-attribute">background-color</span>: container-bg; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#000</span>; <span class="hljs-attribute">display</span>: flex; <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>; <span class="hljs-attribute">justify-content</span>: space-between; <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto; <span class="hljs-attribute">padding</span>: <span class="hljs-number">1em</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">50%</span>; &<span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#d9534f</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#fcfcfc</span>; }</pre></div><div id="a8e5"><pre> } }</pre></div><h1 id="b762">Reference</h1><ul><li><a href="https://en.wikipedia.org/wiki/Sass_(stylesheet_language)">https://en.wikipedia.org/wiki/Sass_(stylesheet_language)</a></li><li><a href="https://sass-lang.com/">https://sass-lang.com/</a></li><li><a href="https://scotch.io/tutorials/aesthetic-sass-1-architecture-and-style-organization">https://scotch.io/tutorials/aesthetic-sass-1-architecture-and-style-organization</a></li><li><a href="https://www.w3schools.com/sass/">https://www.w3schools.com/sass/</a></li></ul><h1 id="934b">Conclusion</h1><p id="1854">I hope you understand how to use scss. Please tell me in the comment box if you have any queries, mistakes, or suggestions.</p></article></body>

SCSS and SASS

Basic Infomation about sass/scss

Basic info about scss/sass

Introduction:

According to Wikipedia, sass is a preprocessor scripting language interpreted or compiled into Cascading Style Sheets (CSS).

What is it mean?

The basic meaning is that sass is CSS. Sass is a style sheet language.

Who person designs and develops sass?

Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum.

Scss files provide two traditionally extensions for us .sass and .scss

  • SASS (.sass) Syntactically Awesome Style Sheets.
  • SCSS (.scss) Sassy Cascading Style Sheets.

Note Sass or Scss are both the same.

What is different between sass or scss?

The primary difference is that when writing code in sass or scss. Sass provides two file extensions. So that is why we confuse scss and sass, but this is not a big problem.

The sass language has two variants. The sass variants help to write code fastly.

Variants

  1. Sass
  2. Scss

We do not use curly bracket {} when writing code in sass. But when you write scss code. Then you use a curly bracket.

Sass code:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
$container-bg:white;
body 
  font: 100% $font-stack;
  color: $primary-color;
    .container 
           background-color: $container-bg;
           border: 1px solid #000;
           display: flex;
           height: 500px;
           justify-content: space-between;
           margin: 0 auto;
           padding: 1em;
           width: 50%;
        &:hover 
           background-color: #d9534f;
           color: #fcfcfc;

scss code:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
$container-bg:white;
body {
  font: 100% $font-stack;
  color: $primary-color;
    .container {
           background-color: $container-bg;
           border: 1px solid #000;
           display: flex;
           height: 500px;
           justify-content: space-between;
           margin: 0 auto;
           padding: 1em;
           width: 50%;
&:hover {
        background-color: #d9534f;
        color: #fcfcfc;
    }
  }
}

Reference

Conclusion

I hope you understand how to use scss. Please tell me in the comment box if you have any queries, mistakes, or suggestions.

CSS
Scss
Sass
Cascading Style Sheets
Recommended from ReadMedium