cancel
Showing results for 
Search instead for 
Did you mean: 

Magento 2: can i skip using less css and use pure css?

Magento 2: can i skip using less css and use pure css?

Hello,

1) I am not aware of less.css therefore my question is can i use pure css in magento 2?

2) Is it ok if i am directly making changes in css which is placed in pub static folder?

 

Please revert me ASAP.

 

Regards

Mukesh

4 REPLIES

Re: Magento 2: can i skip using less css and use pure css?

1) Less is a superset of CSS, so you can use CSS in a Less file.

2) No, pub/static content is autogenerated and you changes will be loss

Re: Magento 2: can i skip using less css and use pure css?

Thanks for the reply.

Can you guide me in using less css? I have number of queries in handling less files. I have read few posts about handling less but i am still in doubt to use less.

 

1) I have created a new theme so i how i will handle less files?

2) How to understand less structure?

3) How variables are used in handling different css properties?

4) can i directly add pure css in to less css?

 

It would be a great help to understand less structure.

 

Regards

Mukesh

Re: Magento 2: can i skip using less css and use pure css?

Any updates???

Re: Magento 2: can i skip using less css and use pure css?

In app/design/frontened/Custom/Theme create a directory called Magento_Theme and in Magento_Theme add another directory called layout. In the end, it'll look like app/design/frontend/Custom/Theme/Magento_Theme/layout/. Custom/Theme is whatever you call your theme.

 

In the layout directory, create a file called default.xml and add this:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
       <css src="css/custom.css" />
    </head>
</page>

In your theme root, create two new directories web/css and add custom.css in that folder. The full path is app/design/frontend/Custom/Theme/web/css/custom.css. You can now use the custom.css file to add plain CSS, although I do recommend you eventually learn LESS as it makes managing CSS a lot easier for bigger projects.

 

Hope that helps!