I finally figured out how to prepare and run the "node compile.js" file from the claro theme folder, so that it compiles each *.less file into its associated *.css file, but the old claro.css file is left as is.
Is that intended? If so, then what is the process for updating the claro.css file to reflect all the changes to the individual *.css files? Up to now I've always had the claro.css file imported into my jsp file like so:
<link rel="stylesheet" type="text/css" href="/CompassThemesURS/themes/html/commonurs/dojo/1.9.1/dijit/themes/claro/claro.css" />
Am I missing something? Using the node tool (and the provided "compile.js" file in the claro theme directory) to generate a custom theme based on the claro theme is great, but what about the step to update the large claro.css file? Please tell me I'm missing something to complete this customization process.
Thank you in advance,
Gregor
Due to the way Dijit themes are traditionally structured, yes, this is intended. claro.css doesn't contain any styles of its own, it simply contains #imports to each individual file which is being compiled by compile.js.
Dojo's build system is already capable of flattening CSS imports, so that is the point at which claro.css ordinarily becomes a flattened file with all of the rules from the individual widgets' CSS files.
Related
A person directly edited the css output file. Am I in trouble here? He made edits all throughout the file and if I'm understanding correctly, my changes will overwrite his when I recompile. Is there anyway to keep everything but still work in my scss files? Could I take the entire css file and try the reverse css to scss path to get everything together?
One option would be to save the edited CSS file and then compare it to your compiled CSS file, allowing you to determine what the changes are and add them to your Sass file.
Save the edited CSS file as FileA.css.
Recompile your Sass file into FileB.css
Load files FileA.css and FileB.css into a diff viewer, something like DiffChecker or a desktop app like Kaleidoscope.
Determine the changes and add the appropriate Sass to your original .sass file.
I'm creating a site based on AdminLTE (v 2.3.0), a open source control panel template that uses bootstrap (v 3.3.5).
When I load my page in Google Chrome (v 48.0.2564.97 m) and use the developer tool (F12) in sources I notice that my content folder has a subfolder called less.
It is like:
Content/
├──less/
| ├──...
| ├──table.less
| └──...
The "..." means other files.
But here's the deal: I don't have any those files in my server and this table.less is generating problem to me.
So I did a test. One by one I remove the js and css files that I had referenced.
I discovered that when I add the bootstrap.css file this folder with all files appears.
Now my questions are:
Why this is happened?
How can I avoid it?
And if I can't how can I make my css file has priority above the less files?
PS:
I asked the 3rd question because normally the last css file to be add has priority when some property is overloaded. But in my case my last file is site.css, this file has definitions for tables, but when I open the page the properties of table.less has priority above my file and this is causing me problems.
You probably have a file called bootstrap.min.css.map or bootstrap.css.map next to the bootstrap css file. It's function is to reference the original source files and line numbers in your browser's developer tool section for each directive coming from your css file. If it were not there, you would always see bootstrap.css line 1 next to each css directive, which would not be very informative, this way you see the actual source structure that generated the css. It's all virtual, the less files are not there.
please excuse my inexperience with, and lack of understanding of, Sass.
Basically I was assigned to do some edits on a site which has a main css page and a few scss subpages, all organized through an ftp directory.
I'm just confused how the index knows where to pull the scss pages in the ftp directory? I've looked through the code for the index page, as well as the linked css and js pages, and can't find any part that references the scss pages. Yet they still load within the original css? Am I missing something?
Thanks for the clarification.
SCSS is a preprocessor language. That means it will be converted to CSS. The SCSS files do not get loaded by the website. Instead you will have to make your changes to the SCSS files and then convert them to CSS. It is likely that there is a system in place which takes care of that for you. Take a look around and find out whether there is a gulpfile or a gruntfile hanging out somewhere.
The main.scss file gets compiled to the main.css file. The output produced by the sass compiler replaces the main.css file. There is no link. You need to compile your main.scss file using sass.
Apart from that, you use 'CSS file' rather than 'CSS page' as CSS is an acronym for cascading style sheet which is definitely not page in itself.
Web browsers don't know what a SCSS or SASS file is. They only load CSS.
Your site could have a build tool (grunt, gulp, rake etc) to compile your .scss source files into .css files, which is then published to your web site.
Sometimes your application server will know how to do the translation on the fly and you can just edit the .scss file.
A lot of the time many .scss files will be combined into one .css file so you are often editing a different file to what you would expect when you look at what .css is loaded the browser.
Can PhpStorm hide generated CSS files under the LESS file?
Here is a screenshot of a WordPress theme:
I've found myself opening the .css file instead of the .less one on numerous occasions. Is there some way to group these files together so I never see the .css file? A bit like a closed folder, have to click the arrow to view generated file?
(I remember seeing a similar feature somewhere, not sure if it was in PhpStorm or another editor)
I did have LESS files in their own folder, but I still found myself opening the .css file from time to time by accident. It would be good to hide them completely.
Thanks!
Never mind, it seems to be (kinda?) working:
style.less nests style.css correctly, not sure why the others are not showing.
It is called File Nesting and it’s available from the gear icon in the Project browser.
I am planning on dividing up my LESS CSS into multiple files to modularize my CSS and make it easier to manage and maintain. Ultimately I will be using #import to import all of my modular CSS files into one file that will get enqueued in WordPress.
Is #import a bad idea for performance?
Yes, using multiple imports will incurr equivalent number of file requests the browser has to make.
As long as you compile the LESS source into a CSS file and include that CSS file as the stylesheet for your site, performance will not be an issue.
For example when you make a Wordpress theme you can make a folder for your CSS and then compile it using for example simpLESS (if you are on Windows)
Sample template directory structure:
-themes/
-your-theme/
-less/
-main.less
-import.less
-etc.
-style.css <- this is the target file you would compile into
-index.php
-etc.
You can setup the target file to compile into easily. Also, simpLESS will keep the first top comment in the resulting file so that you can put your theme information in it.