Magento – Override link color in custom less file, Magento2

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

Base or main less files are located in /app/design/frontend/{vendor}/{theme}/web/css/, while custom less or "more specific" less files are usually located in /app/design/frontend/{vendor}/{theme}/web/css/source/

I'm not sure about where Ultimo theme points to _custom.less, but you are correct that it is imported from the "main" less files like styles-m.less and it "chain-imports" the "more-specific" less files.

Also I noticed that in your comment you said that the styles-m.less is located in `/app/design/frontend/{vendor}/{theme}/base/web/css/.

If it imports from there, then I presume that the _custom.less should also be located in .../base/web/css or .../base/web/css/source - depending on the import syntax (@import '_custom.less' or @import 'source/_custom.less')

When changing less files, you need to clear static files and cache to see the effect on your site.

If you're in developer mode, just use the Admin Cache Management buttons Clear Static Files Cache and Flush Magento Cache.