February 2025 – Page 14

Sass @extend and Inheritance

Sass @extend Directive

The @extend directive lets you share a set of CSS properties from one selector to another.

The @extend directive is useful if you have almost identically styled elements that only differ in some small details.

The following Sass example first creates a basic style for buttons (this style will be used for most buttons). Then, we create one style for a “Report” button and one style for a “Submit” button. Both “Report” and “Submit” button inherit all the CSS properties from the .button-basic class, through the @extend directive. In addition, they have their own colors defined : Continue reading Sass @extend and Inheritance

Sass @mixin and @include

Sass Mixins

The @mixin directive lets you create CSS code that is to be reused throughout the website.

The @include directive is created to let you use (include) the mixin.

Defining a Mixin

A mixin is defined with the @mixin directive.

Sass @mixin Syntax:

@mixin name {
  property: value;
  property: value;
  ...
}

Continue reading Sass @mixin and @include

Sass @import and Partials

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 Nested Rules and Properties

Sass Nested Rules

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:

Example

SCSS Syntax:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
  li {
    display: inline-block;
}
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}
}

Continue reading Sass Nested Rules and Properties

Sass Variables

Variables are a way to store information that you can re-use later.

With Sass, you can store information in variables, like:

strings
numbers
colors
booleans
lists
nulls

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;
}

Continue reading Sass Variables

Sass Installation

System Requirements for Sass

Operating system – Sass is platform independent
Browser support – Sass works in Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera
Programming language – Sass is based on Ruby

Continue reading Sass Installation

CSS Sass

Learn Sass

Sass is a CSS pre-processor.

Sass reduces repetition of CSS and therefore saves time.

Examples in Each Chapter

Our “Show Sass” tool makes it easy to learn Sass, it shows both the code and the result.

Sass Example

/* 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;
}

Continue reading CSS Sass

Responsive Web Design – Videos

Using The width Property

If the width property is set to 100%, the video player will be responsive and scale up and down:

Example

video {
  width: 100%;
  height: auto;
}

Continue reading Responsive Web Design – Videos

Responsive Web Design – Images

Using The width Property

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:

Example

img {
  width: 100%;
  height: auto;
}

Continue reading Responsive Web Design – Images

Responsive Web Design – Media Queries

What is a Media Query?

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.

Example

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;
}
}

Continue reading Responsive Web Design – Media Queries