Sass keeps the CSS code DRY (Don’t Repeat Yourself). One way to write DRY code is to keep related code in separate files.
You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables, colors, fonts, font-sizes, etc. Continue reading Sass @import and Partials
Sass lets you nest CSS selectors in the same way as HTML.
Look at an example of some Sass code for a site’s navigation:
SCSS Syntax:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Variables are a way to store information that you can re-use later.
With Sass, you can store information in variables, like:
Sass uses the $ symbol, followed by a name, to declare variables:
Sass Variable Syntax:
$variablename: value;
The following example declares 4 variables named myFont, myColor, myFontSize, and myWidth. After the variables are declared, you can use the variables wherever you want:
SCSS Syntax:
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
Sass is a CSS pre-processor.
Sass reduces repetition of CSS and therefore saves time.
Our “Show Sass” tool makes it easy to learn Sass, it shows both the code and the result.
/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Use the variables */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
If the width property is set to 100%, the video player will be responsive and scale up and down:
video {
width: 100%;
height: auto;
}
If the width property is set to a percentage and the height property is set to “auto”, the image will be responsive and scale up and down:
img {
width: 100%;
height: auto;
}
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
If the browser window is 600px or smaller, the background color will be lightblue:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Many web pages are based on a grid-view, which means that the page is divided into rows and columns.
Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.
A responsive grid-view often has 6 or 12 columns, and will shrink and expand as you resize the browser window. Continue reading Responsive Web Design – Grid View
The viewport is the user’s visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
This was not perfect!! But a quick fix.
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
You should include the following <meta> viewport element in the <head> section of all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.