Tag: #SASS

Sass @extend/ Inheritance

Post author By Lena Stanley
Post date February 13, 2020

The @extend directive in Sass is a powerful directive that facilitates the sharing of rules and relationships between selectors.

The @extend directive lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.

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:

SCSS Syntax:

.button-basic  {
  border: none;
  padding: 15px 20px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: blue;
}

.button-submit  {
  @extend .button-basic;
  background-color: yellow;
  color: black;
}

After compilation, the CSS will look like this:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 20px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}

.button-report  {
  background-color: blue;
}

.button-submit  {
  background-color: yellow;
  color: black;
}

Enjoy coding!

Read also:

CSS Buttons

How to create an expanding grid with CSS & JavaScript?

CSS Background Stripes

Tags #@extend, #SASS, CSS

Web development

Sass @mixin and @include

Post author By Lena Stanley
Post date February 13, 2020

Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance, and others. 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.

Web developer — Do you like this gif? Check more gifs in the store.

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left and to distribute collections of styles in libraries.

A mixin is defined with the @mixin directive:

Sass @mixin Syntax:

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

The following example creates a mixin named “important-text”:

SCSS Syntax:

@mixin important-text {
  color: blue;
  font-size: 25px;
  font-weight: bold;
  border: 2px solid green;
}

The @include directive is used to include a mixin:

Sass @include mixin Syntax:

selector {
  @include mixin-name;
}

SCSS Syntax:

.read {
  @include important-text;
  background-color: pink;
}

Output:

A mixin can also include other mixins:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

Passing Variables to a Mixin

Mixins accept arguments. This way you can pass variables to a mixin.

Here is how to define a mixin with arguments:

@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(green, 2px);
}

.myNotes {
  @include bordered(blue, 2px);

Notice that the arguments are set as variables and then used as the values (color and width) of the border property.

Default Values for a Mixin

It is also possible to define default values for mixin variables:

SCSS Syntax:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

Then, you only need to specify the values that change when you include the mixin:

SCSS Syntax:

.myTips {
  @include bordered($color: orange);
}

Using a Mixin For Vendor Prefixes

Another good use of a mixin is for vendor prefixes.

SCSS Syntax:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

After compilation, the CSS will look like this:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

Enjoy coding!

Read also:

CSS Glowing Gradient Border

CSS Gradient Border

Tags #@include, #@mixin, #CSSAnimation, #SASS, CSS

Web development

Sass @import and Partials

Post author By Lena Stanley
Post date February 13, 2020

For sure you’ve noticed already that Sass makes CSS fun again. Today we’ll go a bit further with Sass Rules and we’ll go through the @import rule and Sass 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.

Sass Importing Files

Just like CSS, Sass also supports the @import directive.

Sass Import Syntax:

@import filename;

You can import as many files as you need in the main file:

@import "variables";
@import "colors";
@import "reset";

Example:

Let’s look at an example: You’ll need to create a reset file called “reset.scss”, that looks like this:

SCSS Syntax (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

and now we want to import the “reset.scss” file into another file which I called “test.scss”.

Here is how we do it: It is normal to add the @import directive at the top of a file; this way its content will have a global scope:

SCSS Syntax (test.scss):

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  color: green;
}

Output:

Sass Partials

By default, Sass transpiles all the .scss files directly. However, when you want to import a file, you do not need the file to be transpiled directly.

Sass has a mechanism for this: If you start the filename with an underscore, Sass will not transpile it. Files named this way are called partials in Sass.

So, a partial Sass file is named with a leading underscore:

Sass Partial Syntax:

_filename;

The following example shows a partial Sass file named “_colors.scss”. (This file will not be transpiled directly to “colors.css”):

Example:

“_colors.scss”:

$myRed: #DF361C;
$myBrown: #5B1D13;
$myBlue: #32C6D7;

Now, if you import the partial file, omit the underscore. Sass understands that it should import the file “_colors.scss”:

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  color: $myRed;
}

Enjoy coding!

Read also:

CSS Blurred Background Image

CSS Gradient Border

Tags #@import, #partials, #SASS, #webdeveloper, CSS

Web development

SASS Nested Rules

Post author By Lena Stanley
Post date February 12, 2020

Nesting is combining different logic structures. Using SASS, we can combine multiple CSS rules within one another. If you are using multiple selectors, then you can use one selector inside another to create compound selectors.

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: 8px 14px;
    text-decoration: none;
  }
}

Notice that in Sass, the **ul,** li and a selectors are nested inside the **nav** selector. While in CSS, the rules are defined one by one (not nested):

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

You can nest properties in Sass, it is cleaner and easier to read than standard CSS.

Sass Nested Properties

Many CSS properties have the same prefix, like font-family, font-size and font-weight or text-align, text-transform and text-overflow.

With Sass you can write them as nested properties:

SCSS Syntax:

font: {
  family: Helvetica, sans-serif;
  size: 20px;
  weight: bold;
}

text: {
  align: center;
  transform: uppercase;
  overflow: hidden;
}

The Sass transpiler will convert the above to normal CSS:

font-family: Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;

text-align: center;
text-transform: uppercase;
text-overflow: hidden;

Enjoy coding!

Read also:

CSS Conic-Gradient

CSS Pseudo-elements

HTML & CSS Range Sliders

Tags #nesting, #SASS, CSS

Web development

SASS Basics

Post author By Lena Stanley
Post date February 12, 2020

A CSS preprocessor is a program that lets you generate CSS from the pre-processors own unique syntax. There are many CSS preprocessors to choose to learn, however the most popular around right now the pre-processors is Sass.

Before you continue you should have a basic understanding of the following:

HTML
CSS

What is Sass?

Sass (short for syntactically awesome style sheets) is a style sheet language. Sass reduces the repetition of CSS and therefore saves time.

Why Use Sass?

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.

Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

How Does Sass Work?

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

Note: Sass files have the “.scss” file extension.

Sass Installation

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: https://sass-lang.com/install (I am working with the Koala app).

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 3 variables named myFont, myColor, and myFontSize. After the variables are declared, you can use the variables wherever you want:

Note: I am working with the Koala app, and Adobe Dreamweaver CC HTML Editor, however, you can use any app and any HTML editor and it will work fine too.

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SASS</title>
	<link rel="stylesheet" href="test.css">
</head>

<body>
	<h1>Hello!</h1>
	<p>How are you?</p>
</body>
</html>

SASS

$myColor: green;
$myFont: Helvetica, sans-serif;
$myFontSize: 20px;

body{
	font-family: $myFont;
	font-size: $myFontSize;
        color: $myColor;
}

Output:

CSS Output:

So, when the Sass file is transpiled, it takes the variables (myFont, myColor, etc.) and outputs normal CSS with the variable values placed in the CSS, like this (you don’t need to do anything in your CSS sheet):

body {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  color: green; }

Sass Variable Scope

Sass variables are only available at the level of nesting where they are defined.

SASS

$myColor: green;

h1 {
  $myColor: blue;
  color: $myColor;
}

p {
  color: $myColor;
}

The other definition, $myColor: blue; is inside the <h1> rule, and will only be available there.

Output:

Using Sass !global

The default behaviour for a variable scope can be overridden by using the !global switch.

!global indicates that a variable is global, which means that it is accessible on all levels.

Example:

SASS

$myColor: blue;

h1 {
  $myColor: red !global;
  color: $myColor;
}

p {
  color: $myColor;

Now the color of the text inside a <p> tag will be red.

Hope this helps!

CSS Advanced

CSS Grid

CSS Columns

Tags #preprocessor, #SASS, CSS