I compiling my less files to one css file. But i saw on http://lesscss.org/ that you can include the less file instant on your webpage.
Client-side is the easiest way to get started and good for developing
with Less, but in production, when performance and reliability is
important, we recommend pre-compiling using node.js or one of the many
third party tools available.
To start off, link your .less stylesheets with the rel attribute set
to "stylesheet/less":
Next, download less.js and include it in a tag in
the element of your page:
What is the diffrents between compiling to css or just jusing the less file?
Compiling to CSS
Here compiling means to use a program to turn a .less file into a .css file.
For example, a less file:
.outerDiv {
.innerDiv {
color:green;
}
}
when you use a compiler on it that will generate a css file like:
.outerDiv .innerDiv {
color:green;
}
I use koala. It does not overwrite your file, it just generates a css file alongside it.
All you need to do is reference that css file in your head part, then upload to the server.
Advantages over less.js method
This is lighter (less data for the client to load) than sending over the less file (especially if you minify the css file, which koala will do for you too).
It also makes for faster loading without any "jump" for the user.
If instead you use the less.js method, then:
page loads and renders without your lovely .less styling
less.js then kicks in and restyles your page with you .less rules
If the user is on a slow connection they may see the old unstyled version for a second, then the page will suddenly reformat itself.
Related
I've got the below setup:
Brackets IDE
CodeKit for compiling SASS/SCSS into CSS
CloudMounter to mount a live copy of a Wordpress site via FTP (it also auto updates the server's files with any changes I make to the mounted version).
Here's how it works:
Add SCSS styling into .SCSS file
Save SCSS file
CodeKit auto compiles into CSS file, and stores on Local/mounted drive.
CloudMounter picks up the change and auto uploads it to server where Wordpress site is hosted.
Probably not the most efficient workflow but I'm quite impressed with what I've managed to pull off.
My question is: What happens if one of the other people in my office directly FTPs onto the server and makes an edit to the .CSS file instead of using the above method to add SCSS instead?
Will this break the compiler? When I update the SCSS file in the future, will this overwrite/ignore the new custom CSS?
I'd rather like to keep myself as the only developer who uses SCSS instead of having to train the other people in the office.
DON'T! It will be very hard to maintain what you edited and when you reload the Wordpress site you will lose the edits to the compiled CSS file (pure assumption). If you ABSOLUTELY have to just put the extra CSS you want to add or want your coworkers to add in separate CSS files that AREN'T SCSS/SASS.
SCSS compiles to CSS, that would be like writing software in C++ and then editing the compiled object files or writing software in Java and then editing the byte code. It is just very backwards and not ideal.
By doing what you said you wanted to do you are doing something that is not not advised. SCSS is neat because it allows you to short hand a bunch of stuff and saves you typing and annoying syntax and lets you use variables which plain CSS doesn't allow. Adding plain CSS to a mainly SCSS styled app isn't bad, but I suggest you put all your additional CSS in a separate file so that it is clear what the compiled CSS from SCSS is and what the new CSS you used is.
For the most part SCSS can almost be used Exactly like CSS as far as I know and its worth learning.
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
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.
I am building a tool to minify and compile CSS files on-demand. The files can be in different folders, and I need them to be called from their original folder if they are referring to an external file (image, other css, font maybe?).
I wonder which strings I should look for. I only see url( and #import, but am pretty sure I am missing some.
I can think of proprietary CSS: behavior which loads .htc (.js on some servers) for that browser. Also exists as -ms-behavior.
EDIT: oops, behavior will use url() too, not behavior() as I previously wrote... My mistake. Ex:
.ie67 * {
behavior: url('htc/boxsizing.htc');
}
I don't think that filter / -ms-filter can load an external resource; it'll rather apply to images and such (somebody correct me if I'm wrong).
In CSS2.1, external resources are URIs so except #import (that must appear before anything else), I think your list is complete.
I am building a set of Sass stylesheets using Compass.
I also have a minified copy of bootstrap.css that I would like to include in my deployed site. However, I'm not sure where to keep it or what to do with it.
If I rename it to bootstrap.scss then Compass will pick it up and compile it. This takes a few seconds and I really don't need to add to the build time.
If I leave it named as bootstrap.css then it gets ignored.
Ideally there would be a flag, or some way of telling compass to simply copy that file across rather than attempt to compile it. Does that exist?
If your CSS file should not be compiled into your finished CSS file, then it should be placed wherever your compiled CSS files go. However, this is generally not the desired behavior: a vanilla CSS #import generates extra HTTP requests.
There isn't really a down side to having your CSS file compiled by Sass, as the compilation of that file should be cached (unless you're deleting your .sass-cache files?). Sass should only recompile a file if it or something it depends on changes.