You get a bonus - 1 coin for daily activity. Now you have 1 coin

sass / scss

Lecture



  sass  scss

Sass (Syntactically Awesome Stylesheets) is a module included in Haml. Sass is a CSS-based metalanguage designed to increase the level of CSS code abstraction and simplify cascading style sheet files.

Sass has two syntaxes:

  • the old one - sass - is distinguished by the absence of curly brackets, in it nested elements are implemented using indents;
  • new - SCSS ( Sassy CSS ) - uses curly brackets, like CSS itself.

Content

  • 1 Nested rules
  • 2 Variables in CSS
  • 3 See also
  • 4 Literature
  • 5 References

Nested rules

One of the key features of Sass is the nested rules that facilitate the process of creating and editing nested selectors.

  #header
   background: #FFFFFF
 
   .error
     color: # FF0000
 
   a
     text-decoration: none
     &: hover
       text-decoration: underline

Will be compiled into:

  #header {
    background: #FFFF; 
 }
 #header .error {
    color: # FF0000; 
 }
 #header a {
    text-decoration: none; 
 }
 #header a: hover {
    text-decoration: underline; 
 }

CSS Variables

Sass adds constants and impurities to CSS. This makes it easier to maintain data integrity within a large set of styles. Constants allow you to set a value and use it inside styles, with the help of impurities the same can be done with a block of style attributes.

  $ linkColor: # 00F
 
 a
   color: $ linkColor

Will be compiled into:

  a {
    color: # 00F; 
 }

An example of the use of impurities, the similarity of functions:

  @mixin border-radius ($ radius, $ border, $ color) {
   -webkit-border-radius: $ radius;
      -moz-border-radius: $ radius;
       -ms-border-radius: $ radius;
           border-radius: $ radius;
     border: $ border solid $ color
 }
 .box {@include border-radius (10px, 1px, red);  }

Will be compiled:

  .box {
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    border-radius: 10px; 
    border: 1px solid red; 
 } 

Comments


To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Cascading CSS / CSS3 Style Sheets

Terms: Cascading CSS / CSS3 Style Sheets