1 Comment

How to utilise the existing LESS variables in my new less file

Magento2 rewrite _prepareCollection method in wishlist returning blank page
Cancel removal process of block in layout.xml

As the title says, i want to use LESS variables that are already defined by Magento. for example,

there is variable called @color-white defined in following file.

ROOT/lib/web/css/source/lib/variables/_colors.less

and i want to use that in my own less file that located in my new theme. by doing this is to keep style in consistency. any idea on how to do this?

Related Posts

  • How to proper extend variables and override module style? (0)
    I am new to Magento and currently developing a child theme inherited from the Magento blank theme. I read the developer documentation and doing okay. I created my own style.less in my web directory and load it besides the style-l.less and style-m.less from the parent theme. I also […]
  • Confusion regarding Extending Magento 2 Theme files, _variable.less and _theme.less (0)
    I am working on Magento 2 Front end project and need to define lots of header , footer and homepage stylings , Magento's new theme architecture/structure is way confusing specially when things come on LESS, Luis Garcia has explained nicely about extending in this post Overriding […]
  • Magento 2: How to override adminhtml CSS? (1)
    I would like to implement a CSS file that contains only the styles that I'd like to override for the default admin theme. For example, let's say I want to change the textarea font to Consolas and my overriding CSS file is called custom.css, then in this file I would have the […]
  • Override @active__color in theme (1)
    I've defined _theme_extend.less and _extend.less. In _theme_extend.less I've had some success overriding values from the parent theme (in my case luma). I have not been able to affect deeper changes though. I think if I could change something like @active__color defined in […]
  • validation class not calling in system.xml if I defined type image (1)
    if I define 'type=file' than validation is calling but image icon is not displaying on screen. but if I define 'type=image' than validations not calling and image icon is displaying on screen. I want to call image validations & want to show image icon on screen using system.xml […]
  • Magento 2: How to show request variable in Layout file (0)
    http://localhost/magento2/module/List/Variable Here Variable is my dynamic value, which would like to show in Breadcrumb & Title via Layout File. appcodeCustomModuleviewfrontendlayoutmodule_list_index.xml <?xml version="1.0" encoding="UTF-8"?> <page […]
  • Show PHTML-file in CMS page is not working (1)
    I'm trying to call a phtml file in a CMS Page and I know that there are several question for exactly that question already on Stackexchange. The problem is: its not working. I can't get it to running so obviously I'm doing something wrong right now. This is my theme […]
  • Magento 2 Visual Swatches Configuration (1)
    I'm trying to locate where the dimensions for the Visual Swatches in Magento 2 are defined. Or if they are not longer configurable via the admin the block that defines them.
  • templates call other blocks method – Magento 2 (1)
    We can define templates and block in layout file, after that we can call block methods in that template file. My question is Is there any way to call other block methods in phtml file(template file)?
  • how to define your own two different .phtml frontend pages in custom layout file in Magento? (1)
    I have created a module in which i have created a custom template file which i have successfully called now. And I want to create another template file in same folder but how do I define it in layout xml file ?
Magento2 rewrite _prepareCollection method in wishlist returning blank page
Cancel removal process of block in layout.xml

1 Comment on this article

  • User November 12, 2016

    As you already figured out how to use the variables, I’ll briefly explain the 2 ways recommended by Magento to override or extend the styles from a parent theme:

    1. Simple way

    • Extend:

    In your theme directory, create a web/css/source sub-directory. (You’ve already done this part)
    Create a _extend.less file there.
    According to the documentation: “Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles.”

    • Override:

    Instead of creating the _extend.less file, you create a _theme.less file.
    In this case you need to copy all variables you need from the parent _theme.less, including those which will not be changed. Then make your changes.
    Drawback: “You need to monitor and manually update your files whenever the parent’s _theme.less is updated.”

    2. Structured way

    • Extend

    This method lets you organize your code in a better way. Your changes will be structured. Instead of using a single _extend.less file to include all your changes, you create a extend file for each component from the Magento UI library you want to change.

    Say you want to extend styles from button and navigation components.
    In your theme directory create 2 files:
    _buttons_extend.less and _navigation_extend.less, then add your changes for each component in the corresponding file.

    Then you create the _extend.less file adding this code:
    @import ‘_buttons_extend.less’;
    @import ‘_navigation_extend.less’;

    • Override:

    In your theme, create a copy of the file corresponding to the UI component you want to change (_buttons.less, _navigation.less, etc)
    This file will override the _buttons.less of the parent theme.

    It is important to notice the difference between override and extend.

    You can read more at:
    http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_approach.html

    Reply

Add a comment