set • neither will be deprecated • SCSS is not a successor to Sass • each make different people happy • some people like both Sass and SCSS Two delicous flavors…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax • no curly braces or semicolons SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax • no curly braces or semicolons • white-space aware SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax • no curly braces or semicolons • white-space aware • shortcuts for @mixin and @include SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax • no curly braces or semicolons • white-space aware • shortcuts for @mixin and @include • more scannable SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax • no curly braces or semicolons • white-space aware • shortcuts for @mixin and @include • more scannable • more concise, better for teams SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax • no curly braces or semicolons • white-space aware • shortcuts for @mixin and @include • more scannable • more concise, better for teams • enforces one declaration per line SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax • no curly braces or semicolons • white-space aware • shortcuts for @mixin and @include • more scannable • more concise, better for teams • enforces one declaration per line • cleaner merges SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax • no curly braces or semicolons • white-space aware • shortcuts for @mixin and @include • more scannable • more concise, better for teams • enforces one declaration per line • cleaner merges • DRY, arguably more so SCSS Sass Advantages of each…
• very similar to CSS • low barrier to entry • allows for single-line rules • more flexible for expression • compatible with many CSS parsers • easy to integrate with existing CSS • DRY • the “original” syntax • no curly braces or semicolons • white-space aware • shortcuts for @mixin and @include • more scannable • more concise, better for teams • enforces one declaration per line • cleaner merges • DRY, arguably more so SCSS Sass Try both …you may want to use both. Advantages of each…
</div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pazazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div> Our content…
</div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pazazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div> Our content… info
</div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pazazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div> Our content… success
</div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pazazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div> Our content… error
img{border:none} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d isplay:block} reset.css Eric Meyer’s Reset • Browsers have a default style sheet
img{border:none} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d isplay:block} reset.css Eric Meyer’s Reset • Browsers have a default style sheet • Browser style sheets are different
img{border:none} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d isplay:block} reset.css Eric Meyer’s Reset • Browsers have a default style sheet • Browser style sheets are different • A reset style sheet overrides default browser styles
• when compiling Sass to CSS • organize your styles into logical partials • combine many files into one • serve fewer css files per request @import (in Sass)
of values • Five value types in Sass: • numbers: 5, 8.2, 99%, 20px • text strings: foo bar, “baz qux” • colors: #38e1b2, rgba(0, 128, 255, 0.3) $variables
of values • Five value types in Sass: • numbers: 5, 8.2, 99%, 20px • text strings: foo bar, “baz qux” • colors: #38e1b2, rgba(0, 128, 255, 0.3) • booleans: true or false $variables
of values • Five value types in Sass: • numbers: 5, 8.2, 99%, 20px • text strings: foo bar, “baz qux” • colors: #38e1b2, rgba(0, 128, 255, 0.3) • booleans: true or false • lists: 2px 10px 15px or Arial, Helvetica, Courier $variables
mail.</p> </div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pizazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div>
mail.</p> </div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pizazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div>
class="flash-success"> <div class="icon-success"></div> <p>Settings updated!</p> </div> <div class="flash-error"> <div class="icon-error"></div> <p>Please fix the following errors:</p> <ul> <li>Username requires more pizazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div>
class="flash-success"> <div class="icon-success"></div> <p>Settings updated!</p> </div> <div class="flash-error"> <div class="icon-error"></div> <p>Please fix the following errors:</p> <ul> <li>Username requires more pizazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div>