Today I discovered less stylesheet and egor to learn it.
But i am confuses it is showing inside inspect element Internel Server error 500 in linking less.
I first install it via command in nuget console
ie
PM -> install-package dotless
and then relate the stylesheet in my header content like
<link rel="stylesheet" type="text/less"
href="Content/style.less" />
Is this correct way? If not help required.
The style you used is only recommended for debugging. You need to add the style.js script to your site, like below. You may also need to make sure your server is configured to serve .less files by adding the MIME type to your site configuration.
<script src="less.js" type="text/javascript"></script>
But no, that is not the correct way for production use. Your browser has no idea what LESS is. Your browser understands CSS only. For test purposes, less.js is able to convert .less files into a usable form, but it's not recommended for production use.
Instead, the point of LESS is that it compiles to CSS. Then you provide that CSS as your stylesheet in the traditional way. The LESS documentation should help you out. As a quick example, here's how you'd compile LESS to CSS.
lessc styles.less > styles.css
In the above command, lessc is the compiler program. styles.less is your LESS sheet being passed to the compiler. The output would normally go to STD OUT and you'd see it in the console, but since we included > styles.css we're redirecting that STD OUT into a text file called styles.css.
Related
Disclaimer: This is my first ever website project, in order to learn about html, css etc. I probably need a 'for idiots' guide'
I have a jekyll/github pages site here. I have read the jekyll documentation here, which suggests all you need to do is stick the liquid tag in. Which I have, for example here.
Further research has pointed out I need to set up my config file, like this which I have here. I also have a .css I copied from a site called sciviews which is here and I've made a link into the .css to call it here.
However, my page still displays in black on white in code blocks. What have I missed?
EDIT: I believe I've made another error, the source of my syntac .css was (i think) here. Is .scss maybe not compatible with this process as I've implemented it?
In your html ( inside the head tag ), you are referencing an incorrect path to "syntax.css"
Change:
<link rel="stylesheet" href="/css/syntax.css" type="text/css">
To:
<link rel="stylesheet" href="/Pokemon_FieldStudies/css/syntax.css" type="text/css">
Edit
Following your edit, it seems the code inside syntax.css is a raw scss file. Such files need to be processed before they could be served to the client.
I suggest you read about SCSS and how to compile it ( A simple google search will yield more than enough tutorials ).
In case you're interested in a shortcut, you can use an online compiler such as http://www.sassmeister.com/ but that will require you to define a value for some of the missing variables defined in the scss file.
I use Less with my site. Let say the code look like below.
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
</head>
<body>
...
</body>
</html>
When I updated the styles.less file, and refresh the page, Less.js will compile the less file and apply to the page. But I just wonder where is the compiled CSS file stored? Does less.js call lessc to compile the less file?
In the setup you gave (the HTML page), you are letting the client to worry about interpreting the Less file.
To be exact, Browser loads the JavaScript library you link to, and then this JavaScript interprets the styles.less file.
The actual css file is not stored on the server, as it is all the browser-sided work, and I doubt the browser stores it somewhere except RAM.
This does not sound like a good approach though. We, generous site owners with high-end servers love to lift the computational bit off the clients as much as possible. We do not want to upset an iPhone user running low on battery without neccessity.
Alternatively, you run lessc styles.less > styles.css on your styles file after you finished editting. And then use styles.css in HTML directly, also remove the less.js from HTML.
Question you might want to ask: How do I make compiling to css automatic then?
There are several solutions:
Automate the compilation of less file on it being changed, using some software to watch a file or directory.
The Editor you are using might have compile less feature, or be added as an extension.
You might want to consider strat using a web framework. It is an overkill for just compiling less, but if you get other advnatages from web framework or are already using it - that is a good option. An example of using Less middleware with Express framework.
there are 3 files, less.js, style.less and style.css. I so far don't understand what the less.js do. Do I need to include it in somewhere? and for style.less, I know I should write less in it and it compile to my style.css, but should I included it in my index.html?
I don't understand the guide in less.org.
First off you don't need to use less in order to use Twitter Bootstrap. The idea behind less to have smaller style sheet files. And Being that Bootstraps css is so large, less helps mitigate that issue. Now about the files you mentioned.
Browsers don't understand *.less files. less.js, in this context, serves as the "compiler"
for the *.less files
Start from the website:
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Then download less.js from the top of the page, and include it in the element of your page, like so:
<script src="less.js" type="text/javascript"></script>
End from the website
They mention compiling the *.less into a proper css. What they should have elaborated somewhere on the site is "Why compile less?"
Like all code, less will require debugging
Running it through a command line compiler can find errors that less.js can't
less.js is an additional file and processing load that is put on the browser. Hence compiling *.less into *.css can make for a faster browsing experience
The Bootstrap gives you the option of choosing either css or less
I've been meaning to get into/start using less/sass but am having a major hurdle.
I normally edit my css using cssedit/espresso 3 which is basically like firefox's firebug.
After goofing around with codekit etc, it just seems really cumbersome process in terms of being able to see css changes live and being able to experiment.
Is there a similar solution (to css edit/espresso Live preview) of being able to edit styleshees live in less/sass approach?
I can only answer you question for LESS. Personally i think grunt(tool) are great compile your source for production or syntax checking in collaboration projects.
The best tool for "live" testing and editing your LESS code seems your browser in combination with a preferred text/css editor.
See also: http://lesscss.org/#usage "Client-side usage" here you will find everything you need. Also they will give you the same message:
Client-side is the easiest way to get started and good for developing
your LESS. For production and especially if performance is important,
we recommend pre-compiling using node or one of the many third party
tools.
You will have the opportunity to setup a global javascript object with settings. The most important setting in this case seems env set it to development this will prevent caching of your LESS files and show compile error direct in your browser:
To start add something like this to the head of a html file:
<link rel="stylesheet/less" href="test.less">
<script type="text/javascript">less = { env: 'development', poll: 5000 };</script>
<script src="less.js" type="text/javascript"></script>
If you saved the above in less.html call in your browser http://localhost/less.html#!watch now edit your LESS files (test.less in this example). After saving your LESS file the browser will show you your results "live" (within 5 seconds).
You can use #import in test.less and also the imported files are under watch.
I've got a normal website of files on my local machine and would like to use Sass. In the <head> of my index page I have:
<link rel="stylesheet" type="text/css" href="stylesheets/style.scss" />
Though when I run this in Chrome I get an error in the console:
Resource interpreted as Stylesheet but transferred with MIME type text/plain coming from the link tag in index.
How can I change the meme type so Chrome renders my Sass styles?
text/x-sass and text/x-scss, according to https://github.com/janlelis/rubybuntu-mime/blob/master/sass.xml
Know that this will not make a web browser compile it to CSS for you as they do not contain a SASS parser/compiler. The only use case for this would be a template that is intended to be transformed via a configured HTML parser.
Don't think you can insert SASS right into your web page. There must be some SASS preprocessor first. That gives you a normal CSS file.
Are you sure you want to use plain Scss as a stylesheet, without any compilation, in your page?
Tell your http server to use "text/css" as the content-type for your *.scss files (see related Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives?)
In your particular case the issue is that you are linking a scss file in your html and chrome can not interpret scss.
What you needs to do is use the pre processor in sass to turn the files from sass to css. You can do the following open your terminal and open the directory where your scss is stored and run the sass --watch main.scss main.css this will process your scss to the css you need and keep checking for changes. In this case my sass file is name main.scss and it will turn my sass to css in the main.css file.
After this is done what you need to do is link the css file in your html and it should work make sure you point to the correct file.