What is CSS in Magento 2?

The major benefit of CSS is that it creates a uniform look of several or even all pages of the website. Instead of manually defining styles for each element, a developer specifies all the visual configurations in a single CSS document. It allows saving a great amount of time and effort. Moreover, any alterations in the style are automatically applied to all the pages it was utilized for. Besides, CSS is compatible with multiple devices and browsers, which means no sophisticated optimization is required.

Due to all these benefits, CSS have become an important aspect of Magento frontend development. If you strive to be a good Magento developer, CSS knowledge and skills are a must.

What is LESS in Magento 2?

Magento ecommerce platform natively incorporates a preprocessor named LESS. LESS simplifies the process of working with CSS and extends its capabilities. It provides access to a wide range of variables, functions, nestled rules, operations and mixins, that bring the process of writing styles to the next level. Moreover, changes to input files are immediately available with LESS. Besides, LESS supports lazy loading, or dynamic function loading that gives the developer the freedom to define and use variables whenever and wherever they wish.

LESS is a relatively recent introduction to Magento functionality – it was introduced to the Magento 2 version in 2015. Before that Magento 1 utilized the other CSS preprocessor – SaSS – by default. You can still use it as your preprocessor, if needed. Both solutions have a number of similarities, from syntaxis to functionality. So, why not SaSS? LESS is more reliable. Magento developers wanted to use a technology with a stable PHP implementation, and LESS had it. LESS still remains the native Magento processor proving that it does its job effectively.

Magento Development

Let us build a stunning online store from scratch for you

Visit the page

What is the difference between LESS and CSS?

File structure

LESS files have the .less extension. Browsers do not recognize files with the .less extension and cannot apply styles from them to the site pages. Thus, all .less files must be precompiled into familiar .css files. For that we use so called compilers. For example, Magento has built-in compilers for these purposes, which allow you to compile LESS files into CSS files both on the server and client side (more information about it you can find here). Magento also allows compiling LESS into CSS using Grunt. How to do it, you can find here.

Syntax

LESS is a CSS addon. So, all the rules and syntax from a .css file work in a .less file. In other words, if we write a CSS code in a .less file, it will work without any issues after compiling LESS into CSS. At the same time, LESS has additional features that CSS lacks, such as variables, logic, calculation operations, reusable pieces of code, and others. These additional features have their own syntax, different from the CSS syntax.

There is an example of the code in CSS:

.example-1 a {
	color: green;
}
.example-1 p {
	background: grey;
}
.example-1 .error span {
	color: red;
	border: 1px solid red;
}

.example-1 a {

color: green;

}

.example-1 p {

background: grey;

}

.example-1 .error span {

color: red;

border: 1px solid red;

}

You can compose it more compactly in the LESS file (it is called nesting code formatting):

.example-1 {
        a {
               color: green;
           }
           p {
               background: grey;
           }
           .error {
                   span {
                          color: red;
                          border: 1px solid red;
                  }
          }
}

.example-1 {

a {

color: green;

}

p {

background: grey;

}

.error {

span {

color: red;

border: 1px solid red;

}

After compiling the .less file into a .css file, the code will look like the CSS code.

Here is another example. LESS has an interesting thing – & (Ampersand). It is used to refer to the current selector. This can be useful for setting styles for various element states, for its pseudoelements, the next element in a row, and others. Let’s view it on the example:

.example-1 {
       color: red;

       &:hover{
              color: green;
       }
       &:before {
                content: "!!!";
                display: inline-block;
       }
       & + * {
                background: grey;
       }
       &.disabled {
                opacity: 0.5;
       }
       &_modify {
                font-size: 2rem;
       }
}

.example-1 {

color: red;

&:hover{

color: green;

}

&:before {

content: "!!!";

display: inline-block;

}

& + * {

background: grey;

}

&.disabled {

opacity: 0.5;

}

&_modify {

font-size: 2rem;

}

As a result, after compiling the .less file into a .css file, we get the following:

.example-1 {
          color: red;
}
.example-1:hover {
          color: green;
}
.example-1:before {
          content: "!!!";
          display: inline-block;
}
.example-1 + * {
          background: grey;
}
.example-1.disabled {
          opacity: 0.5;
}
.example-1_modify {
          font-size: 2rem;
}

.example-1 {

color: red;

}

.example-1:hover {

color: green;

}

.example-1:before {

content: "!!!";

display: inline-block;

}

.example-1 + * {

background: grey;

}

.example-1.disabled {

opacity: 0.5;

}

.example-1_modify {

font-size: 2rem;

}

We have provided just a few examples of the new syntax in LESS.

LESS provides an opportunity to use variables, functions and mixins

Let’s consider the following additional LESS features such as variables, mixins, and functions in detail.

Variables

Variables in LESS have similar functionality with those in programming. They are used to preserve some value and apply it later in other places.

The variable name begins with the @ icon, for example:

@example-variable

How to use variable, for example:

@color-example: #222222;
a {
       color:@color-example;
}

@color-example: #222222;

a {

color:@color-example;

}

In the example above, we set the #222222 value to the variable @color-example. After compiling the .less file into a .css file, there will be the following rule:

a {
      color:#222222;
}

a {

color:#222222;

}

The next thing you need to know is the variable scope.

In the example above, you saw variables that are declared globally – they are available anywhere in the .less file. However, if you declare a variable inside the CSS rule, it is visible only inside this CSS rule. When you try to access this variable outside this rule, there is a compilation error.

For example:

.example-1 {
  @color-example: yellow;
  color:@color-example;
}
.example-2 {
  color:@color-example;
}

.example-1 {

@color-example: yellow;

color:@color-example;

}

.example-2 {

color:@color-example;

}

As a result, the file is not compiled.

You can change the global variable value inside the CSS rule. This will not affect the variable value outside this rule.

You can also assign a variable the value of another variable as follows:

@color-example-1: yellow;
@color-example-2: @color-example-1;

1 2	@color-example-1: yellow; @color-example-2: @color-example-1;

When you change the value of the variable @color-example-1, the value of the variable @color-example-2 changes automatically.

Mixins

Mixins are needed to reuse pieces of code.

For example, many elements on the page will have similar animations. So, you can create a .animation-1 mixin with a set of animation properties:

.animation-1() {
       transition: 300ms ease-in-out;
       -moz-transition: 300ms ease-in-out;
       -webkit-transition: 300ms ease-in-out;
       -o-transition: 300ms ease-in-out;
}

.animation-1() {

transition: 300ms ease-in-out;

-moz-transition: 300ms ease-in-out;

-webkit-transition: 300ms ease-in-out;

-o-transition: 300ms ease-in-out;

}

Then you can use the mixin anywhere, where it’s needed:

.example-1 {
       .animation-1;
       width: 100%;
}

.example-1 {

.animation-1;

width: 100%;

}

As a result, after compiling the .less file into a .css file, the .example-1 element has the following:

.animation-1 {
          transition: 300ms ease-in-out;
          -moz-transition: 300ms ease-in-out;
          -webkit-transition: 300ms ease-in-out;
          -o-transition: 300ms ease-in-out;
}
.example-1 {
          transition: 300ms ease-in-out;
          -moz-transition: 300ms ease-in-out;
          -webkit-transition: 300ms ease-in-out;
          -o-transition: 300ms ease-in-out;
          width: 100%;
}

.animation-1 {

transition: 300ms ease-in-out;

-moz-transition: 300ms ease-in-out;

-webkit-transition: 300ms ease-in-out;

-o-transition: 300ms ease-in-out;

}

.example-1 {

transition: 300ms ease-in-out;

-moz-transition: 300ms ease-in-out;

-webkit-transition: 300ms ease-in-out;

-o-transition: 300ms ease-in-out;

width: 100%;

}

There are also mixins with parameters. When these mixins are called, we pass them parameter values. When creating such a mixin, it is recommended to set default parameter values (or there might occur problems when calling the mixin without specifying the parameter value). Let’s make a mixin with parameters from the example above and see how to call it:

.animation-1 (
        @animation-speed: 300ms,
        @animation-type: ease-in-out
) {
        transition: @animation-speed @animation-type;
        -moz-transition: @animation-speed @animation-type;
        -webkit-transition: @animation-speed @animation-type;
        -o-transition: @animation-speed @animation-type;
}
.example-1 {
      .animation-1(
            @animation-speed: 1500ms
       );
}

.animation-1 (

@animation-speed: 300ms,

@animation-type: ease-in-out

) {

transition: @animation-speed @animation-type;

-moz-transition: @animation-speed @animation-type;

-webkit-transition: @animation-speed @animation-type;

-o-transition: @animation-speed @animation-type;

}

.example-1 {

.animation-1(

@animation-speed: 1500ms

);

}

We set mixin parameters in parentheses (there can be one or several) with default values (default values are set after a colon).

When a mixin is called in parentheses, we indicate the values of those mixin parameters that will differ from the default ones. If we don’t specify a single parameter adding the mixin like this – .animation-1, the mixin will be added with standard parameter values.

As a result, after compiling the .less file into a .css file, the .example-1 element looks as follows:

.example-1 {
        transition: 1500ms ease-in-out;
        -moz-transition: 1500ms ease-in-out;
        -webkit-transition: 1500ms ease-in-out;
        -o-transition: 1500ms ease-in-out;
}

.example-1 {

transition: 1500ms ease-in-out;

-moz-transition: 1500ms ease-in-out;

-webkit-transition: 1500ms ease-in-out;

-o-transition: 1500ms ease-in-out;

}

Magento requires to name mixin parameters with using @_ instead of @. So, the @animation-speed parameter from the example above would be named @_animation-speed.

Magento 2 Development

Start your online business with Magento 2

Visit the page

Functions

LESS has arithmetic operations (addition, subtraction and others.) with properties.

For example:

.example-1 {
       @unit: 3px;
       border:@unit solid #ddd;
       padding: @unit * 3;
       margin: 20px + 30px;
}

.example-1 {

@unit: 3px;

border:@unit solid #ddd;

padding: @unit * 3;

margin: 20px + 30px;

}

As a result, after compiling the .less file into a .css file, we get the following:

.example-1 {
        border: 3px solid #dddddd;
        padding: 9px;
        margin: 50px;
}

.example-1 {

border: 3px solid #dddddd;

padding: 9px;

margin: 50px;

}

LESS also has other mathematical functions, such as round (), ceil (), floor () and percentage ().

LESS makes it easier to manipulate colors

LESS also provides the opportunities to make various manipulations with colors.

For example, we can combine or subtract 2 colors to get the new one.

.example-1 {
	color: #222 + #333;
}

.example-1 {

color: #222 + #333;

}

The result after compilation:

.example-1 {
	color: #555;
}

.example-1 {

color: #555;

}

There are also color functions to make the color lighter, darker, brighter, dimmer and others. So, we need the following functions: lighten (), darken (), desaturate () and others..

If you want to make the color, for example, 20% darker, do as follows:

.example-1 {
	color: darken(#ccc, 20%);
}

.example-1 {

color: darken(#ccc, 20%);

}

Where are CSS files located in Magento 2?

After the compilation, all the resulting CSS files will be located at the following path:

pub/static/frontend/<Vendor_Name>/<Theme_name>/<locale>

where

<Vendor_Name> – name of the vendor folder that contains your theme,
<Theme_name> – name of your theme,
<locale> – name of the current site location (for instance, en_US).

These files are formed based on the LESS and CSS original files, located in various places in Magento. In order to fully understand this system, let’s have a look at the core Magento style files:

The style files have the following structure:

/<Namespace>_<Module>/web/css is the location of style files for different modules;
/web/css is the location of core style files.

The list of the core theme files, located in the /web/css theme folder:

styles-m.less contains the core website and mobile devices styles. This file contains other files, for instance, _styles.less.
styles-l.less contains styles for desktop devices. It also contains other files, for example, _styles.less.
_styles.less is a compound file that contains other style files. According to Magento file naming standards, the underscore symbol (“_”) signifies that the file is not used separately, but is a part of other files.
/source is the folder that contains configuration files that call Magento UI library mixins.
/source/_theme.less is the file that contains new values for standard variables.
print.less – styles for the printed website version.
/source/_variables.less is the file where the user variables are commonly placed.

Apart from core style files, you can connect additional files to your theme. As a rule, they will be located in your theme folder at the /web/css path.

If you want to change style files, we recommend doing it in the source files. We also strongly discourage you from changing the resulting files. The changes will be overridden in case of the further compilation.

What are Magento parent theme and child theme CSS?

As a rule, a custom theme is inherited from another theme. In this case, the custom theme is a child one, while the theme it is inherited from – the parent one.

The child theme will have the same styles as the parent one by default. If a certain website element has a CSS rule value from a parent theme, it will differ from the child theme (for example, text color) and the child theme will have priority. Also, if the child theme contains a CSS file with the same name and the same path, as the parent, the child theme file will completely override the corresponding parent theme file during the final CSS compilation.

How to add custom CSS files in Magento 2

Where to change styles in Magento 2? You can change them either in the added LESS or CSS files or in the Magento module files. If you want to add your own styles for a specific module, you can use 2 files in the module folder in your theme:

_module.less contains the basic styles for the module in which it is located. As a rule, we create this file in the theme when we want to change the styles of this module significantly.

_extend.less contains additional styles for the module in which it is located. As a rule, we create this file to add minor changes to the module or styles for new elements that have not been stylized in the current module before. If we don’t want to rewrite existing module styles, creating such a file will be the best way.

How to add custom LESS files in Magento 2

Apart from native files, you can also utilize custom style files, for instance, files of third-party libraries, custom style files and so on.

As a rule, such files are connected in the following file:

<your_theme_dir>/Magento_Theme/layout/default_head_blocks.xml

For connection, add to <head/> tag at default_head_blocks.xml file the <css/> or <link/>. The first tag is used specifically for style files, while the second can connect both style files and JavaScript. Since these tags have similar syntax, we will take the <css/> tag as an example:

<css src=”<path>/<file>” media=”print|<option>”/>

Where

<path> is the path to the file relative to <your_theme_dir>/web. If you want to add a link to the file, situated in your theme’s module folder, use <Namespace>_<Module>::<path_to_file> (for instance, if you add Magento_Theme::, the path will begin relative to <your_theme_dir>Magento_Theme/web/).
<file> is the name of the connected file in .css format.
media is the attribute used to determine additional parameters of file attachment. For instance, a file with media=”print” parameter will be utilized for the printed version of the webpage, while the file with media=”screen and (min-width: 768px)” file will be applied solely for devices with screen dimensions of 786 pixels and more.
src_type=”url” is an additional attribute, denoting that the file connects from another server and the “src” path will be specified absolutely, not relatively to the theme. Therefore, use this attribute to connect styles from other websites.

<head>
<link src="Magento_Catalog::css/source/lib/test.less" />
</head>

<head>

</head>

As a result, the following file will be added:

<your_theme_dir>Magento_Catalog/web/css/source/lib/test.css

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.

Talk to Vlad

How to edit CSS in the admin panel in Magento 2

Let’s consider how to add CSS to CMS page and CMS blocks in Magento 2. CMS pages have an option to include style files in the Layout Update XML field on the Design tab. How to add style files in XML files you can find above.

CSS in Magento 1 vs Magento 2 Comparison

Generally, Magento 2 has an improved process of working with CSS files, compared to Magento 1. Apart from this, Magento 2 has not only standard CSS files, but also the following items:

built-in LESS compiler allows you to work with LESS files by compiling these files into final CSS files. Using LESS greatly simplifies and speeds up the process of creating styles for a site since we get additional LESS functionality (in short, these are variables, mixins, nesting code formatting and others).
UI library uses the LESS preprocessor and consists of LESS files, which use sets of mixins and variables to style all the main site elements (such as buttons, forms, navigation and others). The UI library allows you to significantly simplify the process of site styling. For example, you can change several UI library variables and get a significantly transformed website.

Another difference is the location of the CSS theme files. In Magento 1, they were situated at the following path:
/ skin / frontend / <Vendor_Name> / <Theme_name> / css.

While theme style files in Magento 2 are more structured and divided into common style files (<Theme_folder> / web / css) and module style files (<Theme_folder> / <Namespace> _ <Module> / web / css), to which they apply.

Wrapping it up

We hope that you got a comprehensive guide of CSS in Magento 2 and understand how to use it in your website. Moreover, we tried to share all our LESS knowledge and explain how to apply it in Magento. If you have any questions or comments, feel free to leave them down below.

Looking for an experienced Magento development team? Turn to BelVG for custom solutions.

Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Vlad

Tags:

What is CSS in Magento 2?

Get interesting stuff and updates to your email inbox