O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Deep dive into sass

1.038 visualizações

Publicada em

Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.

Publicada em: Design
  • Seja o primeiro a comentar

Deep dive into sass

  1. 1. Nikhil Kumar | Software Consultant KnÓldus Software LLP Nikhil Kumar | Software Consultant KnÓldus Software LLP
  2. 2. ● Sass ● Sass Syntaxes: code example ● Benefits of using Sass ● Sass Vs Css : code example ● Variables ● Nested Syntax ● Mixins [ @include ] ● Inheritance : @extends ● Functions ● Looping ● Joining Files ● _Partials ● Interactive Shell Interaction ● Output styles: 4
  3. 3. Sass (syntactically awesome style-sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie. Sass (syntactically awesome style-sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie. Sass Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). Sass-script is the scripting language itself. Sass-Script Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). Sass-script is the scripting language itself. Sass-Script Some Theory The official implementation of Sass is open-source and coded in Ruby; however, other implementations exist, including PHP, and a high-performance implementation in C called libSass. There's also a Java implementation called Jsass, there are much more. here Some Theory The official implementation of Sass is open-source and coded in Ruby; however, other implementations exist, including PHP, and a high-performance implementation in C called libSass. There's also a Java implementation called Jsass, there are much more. here
  4. 4. Syntax- typesSyntax- types Sass consists of two syntaxes The original syntax, called "the indented syntax", uses a syntax similar to Haml & Jade etc, another one is like traditional .css syntax. Type s .sass .scss A valid CSS is valid SCSS with the same semantics.
  5. 5. Scss vs SassScss vs Sass • HAML-style indentation • No brackets or semi- colons, based on indentation • Less characters to type • Enforced conventions/neatness • Semi-colon and bracket syntax • Superset of normal CSS • Normal CSS is also valid SCSS • Newer and recommended SCSS SASS
  6. 6. Damn!! Is it really magical ??
  7. 7. Syntax Example Sass Scss $txt-size: 10px $txt-color: blue $link-color: red #main font-size: $txt-size color: $txt-color a color: $link-color $txt-size: 10px; $txt-color: blue; $link-color: red; #main{ font-size: $txt-size; color: $txt-color; a{ color: $link-color; } }
  8. 8. Reasons to go with sass: Benefits & Features ● Ability to define variables ● Nested syntax ● Ability to define mixins ● Mathematical functions ● Looping Css: @for, @each and @while, ● Operational functions (such as “lighten” and “darken”) ● Joining of multiple files SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance.
  9. 9. Variables- $ Types of Variables in Sass ● Numbers ● String ● Boolean ● Color ● lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif) ● maps from one value to another (e.g. (key1: value1, key2: value2)) Variable names can use hyphens and underscores interchangeably. $main-width, you can access it as $main_width, and vice versa.
  10. 10. Variables $primary-color: #3bbfce; $margin: 16px; .content-navigation { border-color: $primary-color; color: darken($primary-color, 10%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $primary-color; } Scss Compiled Css .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } Global Variable: $width: 5em !global;
  11. 11. Nested Syntax table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.3em; } } Scss Compiled Css table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif; font-weight: bold; font-size: 1.3em; }
  12. 12. Nested Syntax: Referencing Parent Selectors: & #main { color: black; a { font-weight: bold; &:hover { color: red; } } } Scss Compiled Css #main { color: black; } #main a { font-weight: bold; } #main a:hover { color: red; } You might want to have special styles for when that selector is hovered over or for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the & character.
  13. 13. Nested Syntax: Properties .funky { font: { family: fantasy; size: 30em; weight: bold; } } Scss Compiled Css .funky { font-family: fantasy; font-size: 30em; font-weight: bold; } In Css: If you want to set a bunch of properties in the same name-space, you have to type it out each time.
  14. 14. Mixins: @mixin, @include @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } Create mixin .page-title { @include large-text; padding: 4px; margin-top: 10px; } Mixins allow you to define styles that can be re-used throughout the style-sheet. They can even take arguments which allows you to produce a wide variety of styles with very few mixins. Using created mixin .page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; } Compiled to
  15. 15. Mixins: Arguments @mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; } } p { border-color: blue; border-width: 1in; border-style: dashed; } Mixins can take SassScript values as arguments, When defining a mixin, the arguments are written as variable names separated by commas, all in parentheses after the name. Create p { @include sexy-border(blue, 1in); }Usage Compiled to Default values for their arguments @mixin sexy-border($color, $width: 1px) {
  16. 16. Mixins: Variable Arguments @mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; } Sometimes it makes sense for a mixin or function to take an unknown number of arguments. For example: box-shadow Create .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); } Usage Compiled to
  17. 17. Looping Css: @while $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } Sass allows for iterating over variables using @for, @each and @while, which can be used to apply different styles to elements with similar classes or ids. Create .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; } Compiled to
  18. 18. Looping Css: @each @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } The @each directive usually has the form @each $var in <list or map>. $var can be any variable name, like $length or $name, and <list or map> is a SassScript expression that returns a list or a map. Create Compiled To .puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); }
  19. 19. Looping Css: @if - @else $type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } The @if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null: Create Compiled To p { color: green; }
  20. 20. Looping Css: @for @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from <start> through <end> and @for $var from <start> to <end>. Create Compiled To .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
  21. 21. _Partials For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do @import "colors"; If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
  22. 22. _Partials For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do @import "colors"; //other css goes here If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
  23. 23. Output Style Although the default CSS style that Sass outputs is very nice and reflects the structure of the document, tastes and needs vary and so Sass supports several other styles. ● Nested ● Expanded ● Compact ● Compressed Nested #main { color: #fff; background-color: #000; } #main p { width: 10em; } Expanded #main { color: #fff; background-color: #000; } #main p { width: 10em; } Nested #main { color: #fff; background-color: #000; } #main p { width: 10em; } Compact #main { color: #fff; background-color: #000; } #main p { width: 10em; } #main{color:#fff;background-color:#000}#main p{width:10em}Compressed
  24. 24. References Sass-lang : Official Site Sass-lang : Github
  25. 25. Presenter nikhil@knoldus.com Presenter nikhil@knoldus.com Organizer @Knolspeak http://www.knoldus.com http://blog.knoldus.com Organizer @Knolspeak http://www.knoldus.com http://blog.knoldus.com Thanks

×