<!DOCTYPE html>
<html>
<head>
<link rel="StyleSheet" href="style.css" type="text/css">
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li>|</li>
<li><a href='#'>My Blog</a></li>
</ul>
</nav>
<div id="main">
<h1>The quick brown fox jumps over the lazy dog</h1>
<h2>The quick brown fox jumps over the lazy dog</h2>
<h3>The quick brown fox jumps over the lazy dog</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<p class="success">SUCCESS</p>
<p class="error">ERROR</p>
<p class="warning">WARNING</p>
<button class="submit-buttton">Button</button>
</div>
</body>
</html>
Agenda
SASS / SCSS
- What is SASS?
- Variables
- Nesting
- Operators
- Extending / Inheritance
- Imports
- Mixins
What is SASS?
Dynamic Style Sheet Language
- Syntactically Awesome Style Sheets
- “Compiles” to CSS
- Introduces programming features to CSS
SASS has two syntaxes.
The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of
CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS by Simply changing the extension
from .css to .scss.
The second, older syntax is known as the indented syntax (or just “.sass”). it's intended for people who
prefer conciseness over similarity to CSS. Instead of brackets and semicolons,
it uses the indentation of lines to specify blocks. Although no longer the primary syntax,
the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
/* SASS */
$baseFontSize:14px
#main h1
font-size: $baseFontSize
/* SCSS */
$baseFontSize: 14px;
#main {
h1 {
font-‐size: $baseFontSize;
}
}
----------------------------------------
Variables - as a way to store information that you want to reuse throughout your stylesheet.
$mainColor: #000;
$fontFamily: Arial, san-serif;
$fontSizeH1: 50px;
$color: green;
----------------------------------------
Nesting - When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
----------------------------------------
Operators - Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %
font-size: 4px + 4; //8px
width: ( 100% / 2) + 25% //75;
----------------------------------------
@import - CSS has an import option that lets you split your CSS into smaller, more maintainable portions.
@import "foo.css"; /* Emits CSS Import*/
/* @import url(foo.css);*/
@import "foo.scss"; /*Embeds in result*/
@import "foo"; /*Also Embeds*/
----------------------------------------
Extend/Inheritance
@extend - Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY (Don't repeat yourself ).
.button {
color: Black;
}
.submit-buttton {
@extend .button;
border: 1px Black solid;
}
Multiple inheritance
.message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend .message-shared;
}
.success {
@extend .message-shared;
border-color: green;
}
.error {
@extend .message-shared;
border-color: red;
}
.warning {
@extend .message-shared;
border-color: yellow;
}
----------------------------------------
@mixin - A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.
You can even pass in values to make your mixin more flexible.
@mixin font-large {
font: {
size:14px;
family: san‐serif;
weight:bold;
}
#form{
@include font-large;
}
-----------------------
Summary - Staying SASSy
- SASS allows you to bring your developer head to design
- SASS improves reuse and readability
- SASS allows you to structure and modularize your designs
- SASS enables control flow, templating and more to your styling.
@import "colors.scss";
@import "nav.scss";
/* Basics - Applied Sass
http://css2sass.herokuapp.com/ - css to sass converter
https://www.sassmeister.com/ -- sass to css converter
*/
/* Variables */
$fontFamily: Arial;
$fontSizeH1: 50px;
$fontSizeH2: 40px;
$fontSizeH3: 30px;
html {
// Operations
font-size: 10px + 4; //8px
width: ( 100% / 2) + 25% //75;
}
body{
font-family: $fontFamily;
background: $backgroundColor;
}
h1{
font-size: $fontSizeH1;
color: $colorGreen;
}
h2{
font-size: $fontSizeH2;
color: $colorBlue;
}
h3{
font-size: $fontSizeH3;
color: $colorYellow;
}
#main {
background: $mainColor;
padding: 60px;
}
// @extend
.button {
color: $colorYellow;
width: 200px;
height: 40px;
background: $backgroundColor;
}
.submit-buttton {
@extend .button;
border: 1px Black solid;
}
// Multiple inheritance
.message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend .message-shared;
}
.success {
@extend .message-shared;
border-color: green;
}
.error {
@extend .message-shared;
border-color: red;
}
.warning {
@extend .message-shared;
border-color: yellow;
}
/* Basic CSS
html {
font-size: 8px;
width: 75%;
}
body {
font-family: Arial;
background: Red;
}
nav {
font-size: 14px;
font-font-weight: bold;
float: left;
}
nav ul {
list-style-type: none;
}
nav ul li {
float: left;
margin: 2px;
}
nav ul li a {
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
h1 {
font-size: 50px;
color: green;
}
h2 {
font-size: 40px;
color: blue;
}
h3 {
font-size: 30px;
color: yellow;
}
#main {
background: White;
padding: 60px;
font-size: 20px;
}
.button, .submit-buttton {
color: yellow;
width: 200px;
height: 40px;
background: Red;
}
.submit-buttton {
border: 1px Black solid;
}
.message-shared, .message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
*/
$backgroundColor: Red;
$mainColor: White;
$colorGreen: green;
$colorBlue: blue;
$colorYellow: yellow;
/* Nesting */
/* SCSS */
nav {
font: {
size: 14px;
font-weight: bold;
}
float: left;
ul {
list-style-type: none;
li {
float: left;
margin: 2px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
/* CSS */
/*
nav ul {
list-style-type: none;
}
nav ul li {
float: right;
margin: 2px;
}
nav ul li a {
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
*/