Images in your templates are not supposed to be edited by editors. Put them in a separate folder and probably protect this folder by only making it accessible to administrators.
In the template code, use the
<we:img>-tag with the document ID of the image (the ID appears when hovering over the document in the document tree):
<we:img name="logo" id="1234" alt="Company logo"/>
But it's way more elegant to use the wE-tags
<we:js id="123" comment="main.js"/> <we:css id="456" comment="layout.css"/>
That way, you'll never have to worry about the files actual location. They're linked automatically, even when they are moved. Additionally, browser caches are automatically expired when the resources are updated (using the 'm'-parameter).
You can choose for CSS files to be parsed by less, scss or sass – just set the checkbox under "Properties" accordingly. They're saved with the according file extensions (.less, .scss, .sass), but using the
<we:css>-tag, the parsed CSS version is generated and linked automatically.