CSS¶

Recommendations for LESS¶

• Use LESS functionality only in special cases:

  • styles/data/style_name.less—using LESS functions and assigning them to LESS variables;

  • css/tygh/less_functions.less—assigning previously obtained LESS variables to CSS variables for further use of LESS in other cases. You can also use mixins here.

    Example

    // styles/data/Nova_theme.less
    @menu: #fff;
    @menu_hover: darken(@menu, 5%);
    
    // css/tygh/less_functions.less
    :root {
        --cs-menu: @menu;
        --cs-menu-hover: @menu_hover;
    }
    
    // css/blocks/topmenu_dropdown.less
    .ty-menu__items {
    background: var(--cs-menu);
    }
    
    .ty-menu__item-active .ty-menu__item-link {
    background: var(--cs-menu-hover);
    }
    

• Consider the following usage examples:

  • design/themes/nova_theme/styles/data/Nova_theme.less—using LESS functions
  • design/themes/nova_theme/css/tygh/less_functions.less—assigning to CSS variables
  • design/themes/nova_theme/css/blocks/topmenu_dropdown.less—using CSS variables

In the next section we describe how to switch from LESS to native CSS.

Variables¶

This functionality allows creating variables and using them to define property values in several places.

Example:

@price: #343434;

LESS variables in CS-Cart are related to the Styles concept (see the Styles and Theme Editor section further in this guide).

In the design/themes/THEME_NAME/styles/data directory of your CS-Cart installation there are the .less files that contain the LESS variables related to the Theme Editor (where THEME_NAME is the name of your theme).

These values can be edited in a file or received with the Theme Editor after saving a style.

Values of the variables in the .less file of this directory can be edited only in the given file. For example, if the @price variable is defined in the styles.less file as well, this value will not work, because the variables values of the .../styles/data/.less file are included in the last turn.

Switching to CSS

Assign LESS variables to CSS variables and use them:

:root {
    --cs-menu: @menu;
}

Mixins¶

Mixins allow to include all the class properties in another class just including the class name as one of the properties value. This is like using variables but in regard to whole classes.

Mixins can behave like functions and take arguments as shown in the following example:

rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

The set of mixins from Bootstrap 2.3 is used in CS-Cart. They are stored in the mixins.less file that you can find in the design/themes/responsive/css/tygh directory. In this file there are the utility mixins and component mixins.

• Utility mixins—simple mixins for specific usage.
• Component mixins—complex mixins that are used to form the grid.

Mixins allow to write less rules and are used for properties that have prefixs in browsers.

Switching to CSS

• Before:

  .my-class-rounded() when (@rounded_corners = true) {
      .my-class {
          border-radius: var(--cs-base-border-radius);
      }
  }
  
  .my-class-rounded();
  

• After:

  // css/tygh/less_functions.less
  .roundedCornersRadiusMixin() when (@rounded_corners = true) {
      --cs-base-rounded-corners-radius: var(--cs-base-border-radius);
  }
  
  .roundedCornersRadiusMixin() when (@rounded_corners = false) {
      --cs-base-rounded-corners-radius: 0;
  }
  
  :root {
      .roundedCornersRadiusMixin();
  }
  

  .my-class {
      border-radius: var(--cs-base-rounded-corners-radius);
  }
  

Operations¶

This functionality allows using mathematical operations in rules: summation, subtraction, multiplication, and division.

Example:

width: (900 / @columns)px;

Switching to CSS

Take good care when writing math operations in .less files.

Here is a common mistake. If you write:

.my-class {
    width: calc(50% - 10px);
}

then the final CSS will have the following unexpected result:

.my-class {
    width: calc(40%);
}

To avoid this mistake, escape math operations, e.g.:

.my-class {
    width: ~"calc(50% - 10px)";
}

The result is as follows:

.my-class {
    width: calc(50% - 10px);
}

If you want the source LESS code to be CSS-valid, use the following LESS hacks:

1. Operations, consisting of two elements, one of which is a variable, do not result in an error.

   .my-class {
       width: calc(var(--foo) * 2);
   }
   

2. Make your expression simple in advance.

   • Before:

     .my-class {
         width: calc(var(--foo) + 10px + 20px);
     }
     

   • After:

     .my-class {
         width: calc(var(--foo) + 30px);
     }
     

3. Assign a value of a different type to a variable.

   • Before:

     .my-class {
         width: calc(50% + 10px);
     }
     

   • After:

     .my-class {
         --my-class-percent: 50%;
     
         width: calc(var(--my-class-percent) + 10px);
     }
     

4. Split one expression into several ones.

   • Before:

     .my-class {
         width: calc(var(--foo) + var(--bar) + 10px);
     }
     

   • After:

     .my-class {
         --my-class-part-1: var(--foo) + var(--bar);
         --my-class-part-2: 10px;
     
         width: calc(var(--my-class-part-1) + var(--my-class-part-2));
     }
     

Check your final CSS to ensure its correct behaviour.

Functions¶

LESS contains a set of functions for working with color, mathematical functions, functions for working with strings.

Operations that are used in CS-Cart:

• lighten(@color, 10%)—returns the color that is 10% lighter than the current color.
• darken(@color, 10%)—returns the color that is 10% darker than the current color.

These operations are related to Styles and Theme Editor. With one base color it is possible to change colors of other elements by making base color lighter or darker.

• percentage(0.5)—converts value to percents. Used while creating grid and columns.

Switching to CSS

• Before:

  .my-class {
      background: darken(@menu, 5%);
  }
  

• After:

  // styles/data/Nova_theme.less
  @menu_hover: darken(@menu, 5%);
  

  // css/tygh/less_functions.less
  :root {
      --cs-menu-hover: @menu_hover;
  }
  

  .my-class {
      background: var(--cs-menu-hover);
  }
  

Nested rules¶

This functionality allows inclosing one rules in another. Nested rules are not often used in CS-Cart, as it complicates the rule working with developer tools in browsers. When looking for nested rules copied from developer tools, it is necessary to take into account a parent rule.

Switching to CSS

Do not use nested rules. Instead of the following:

#header {
    color: black;
    .navigation {
        font-size: 12px;
    }
    .logo {
        width: 300px;
    }
}

write a normal CSS:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

Learn more about other LESS opportunities at the official LESS website.

Please note that not all of them work in CS-Cart.