sass preprocessor
TRANSCRIPT
![Page 1: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/1.jpg)
SASS(Syntactically Awesome Style Sheet)
![Page 2: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/2.jpg)
Introduction
● Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
● Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”). SCSS files use the extension .scss.
![Page 3: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/3.jpg)
Install Sass(Applications)
There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps.
CodeKit (Paid) Compass.app (Paid, Open Source) Hammer (Paid) Koala (Open Source) LiveReload (Paid, Open Source) Mixture (Free) Prepros (Paid) Scout (Open Source)
![Page 4: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/4.jpg)
Install Sass and Compass
•Sass and Compass get installed as Ruby gems so you'll need to have Ruby on your machine.
•If you're on Windows, you can run the Ruby Installer. On Linux, Rails Ready provides several Ruby essentials. On OS X, Ruby is already installed by default so Ruby just works.
![Page 5: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/5.jpg)
Install Sass
•Open up your Terminal.app and type:
•Windows: gem install compass
•Linux / OS X: sudo gem install compass
![Page 6: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/6.jpg)
Features
•Variables•Nesting•Partials•Import•Mixins•Extend/Inheritance•Operators
![Page 7: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/7.jpg)
Variables SASS SCSS
$font-stack: Helvetica, sans-serif $primary-color: #333
body font: 100% $font-stack
color : $primary-color
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
CSS
body { font: 100% Helvetica, sans-serif; color: #333; }
![Page 8: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/8.jpg)
Nesting SASS SCSS
nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
CSS
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
![Page 9: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/9.jpg)
Import SASS SCSS
// _reset.sass html, body, ul, ol margin: 0 padding: 0
// base.sass
@import reset
body font: 100% Helvetica, sans-serif background-color: #efefef
// _reset.scss html, body, ul, ol { margin: 0; padding: 0; }
/* base.scss */
@import 'reset';
body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
CSS
html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
![Page 10: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/10.jpg)
Mixins SASS SCSS
=border-radius($radius) -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius
.box +border-radius(10px)
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; }
.box { @include border-radius(10px); }
CSS
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
![Page 11: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/11.jpg)
Extend/Inheritance SASS SCSS
.message border: 1px solid #ccc padding: 10px color: #333
.success @extend .message border-color: green
.error @extend .message border-color: red
.warning @extend .message border-color: yellow
.message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; }
CSS
.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }
![Page 12: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/12.jpg)
Operators SASS SCSS
.container width: 100%
article float: left width: 600px / 960px * 100%
aside float: right width: 300px / 960px * 100%
.container { width: 100%; }
article { float: left; width: 600px / 960px * 100%; }
aside { float: right; width: 300px / 960px * 100%; }
CSS
.container { width: 100%; } article { float: left; width: 62.5%; }
aside { float: right; width: 31.25%; }
![Page 13: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/13.jpg)
Breakpoints
@mixin breakpoint($query) { @media #{$query} { @content; }}
$small-phone-and-down: "screen and (max-width: " + pxToEm(319) + ")";$large-phone-and-up: "screen and (min-width: " + pxToEm(400) + ")";$large-desktop-and-down: "screen and (max-width: #{$width-frame-max})";
body { @include breakpoint($large-phone-and-up) { font-size: 1.1em; }}@include breakpoint($small-phone-and-down) { .main-menu { background-color: $color-menu-background; a { color: $color-menu-link; } }}
![Page 14: SASS Preprocessor](https://reader038.vdocuments.us/reader038/viewer/2022100508/55ba240fbb61eb974c8b4800/html5/thumbnails/14.jpg)
Thank you!