I am using less.js to compile less on the fly. Here's a sample of my markup:
<html>
<head>
<link rel="stylesheet/less" href="sample.less" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>
</head>
<body>
<div class="box">
abcd
</div>
</body>
</html>
It is not compiling less into CSS:
In order to compile LESS to CSS, you should use lessc command in terminal if you're not using any task managers.
Navigate to your directory on terminal and type this command.
$ lessc path/styles.less > path/styles.css
Once this is run, refresh your browser. LESS should be converted to CSS.
Please follow http://lesscss.org/ under using "Using LESS"
There are two ways to fix this
1] Use Firefox instead of chrome as this is a known issue for chrome.
2]Run your files on any server like Apache,IIS.
Related
I create a simple website project with simple HTML and SCSS.
the HTML file seems like this:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="../../node_modules/bulma/bulma.sass">
<link rel="stylesheet" href="../../node_modules/bulma/css/bulma.css">
<link rel="stylesheet/scss" type="text/css" href="./header.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<div class="header">
<div class="columns header-contents">
<div class="column is-four-fifths">
<div class="header-logo">
hier ist logo
</div>
<div class="header-title"> Title</div>
<div class="title-content">content</div>
</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
</div>
</body>
</html>
and I want to now import SCSS file into this HTML file, but it was not working.
Does anybody some solutions?
If you use VSCode you can install "Live SASS Compiler"
Then you can create a .scss file and click on "Watch Sass" on bottom-right
And it's going to compile your .scss file into a .css file that you can import into your HTML document.
Browsers do not automatically understand the SCSS files, you need to compile such files first into CSS. If you are a Node.js user, you may install the SASS compiler by running the command:
npm install -g sass
Then compile your SCSS file by running the command:
sass input.scss output.css
Now you can link output.css in your HTML file.
In codepen.io you can also work live with SCCS code. This is how:
In the CSS window pain, click on the little Settings icon on top right of the pane.
Then from the drop list for CSS Preprocessor choose SCCS.
I'm creating 3D text with it and it worked great. Now I have to compile that SCCS code to turn it into CSS. I will post it here after I figure out how to show you how cool it is or how badly things went.
This is my first time working with SCCS.
You can only "import" css files. SCSS and co are preprocessors which take their custom syntax and transform it into CSS. So you have to convert your SCSS into CSS and then <link> it in your HTML like regular CSS (bc. thats what it is.)
you can't import directly scss file in html , because html just read css file and you need to comple sass file to css by gulp or webpack
You can not "import" a SASS/SCSS file to an HTML document.
SASS/SCSS is a CSS preprocessor that runs on the server and compiles to CSS code that your browser understands.
Please use this link for compile sass/scss file.
https://thecoderain.blogspot.com/2019/12/run-and-compile-sass-scss-file-to-css.html
You don't import a SASS/SCSS file directly into an HTML file. Your SCSS will be compiled into a .css file, and you include that css file instead.
I would recommend looking up some tutorials on SCSS.
In Visual studio code, you can compile scss live. below are the steps
one time
npm i -g sass
To compile
sass --watch scss/index.scss css/index.css
In HTML
<link rel="stylesheet" href="css/index.css">
You don't import a SASS/SCSS file directly into an HTML file. Follow below steps
Type in terminal (if you have package.json in your project, you don't need this step) > npm init
Type in terminal> npm i sass --save
Add to package.json: "scripts": {"sass": "sass --watch sass/style.scss:css/style.css",},
Add 2 folders (sass & css) and add a file in sass (style.scss)
Type in terminal > npm run sass
Try using less:
<link rel="stylesheet/less" type="text/css" href="x.scss" />
<script src="https://cdn.jsdelivr.net/npm/less#4.1.1"></script>
I have a processing program which I want to display on a browser in an html file. I found an instruction on https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/. It still does not show up in my webpage. I also tried it with the same code from the instruction and it still does not show up. I am using chrome and my html code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Bitmap?</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<h1>Text</h1>
/* #pjs preload="Karte_schweiz_zentriert.jpg","bitmap_zentriert.jpg"; */
<canvas data-processing-sources="bitmap_map_comparison.pde"></canvas>
</body>
</html>
I have the .html file, processing.js, the two .jpg pictures and the bitmap_map_comparison.pde processing code in one folder called bitmap_map_comparison.
Does anyone know where the problem is?
You are using src incorrectly. Unless you have ProcessingJS in the exact same folder as the program, it will not import as it does not exist. Use this instead:
<script src="https://cdn.jsdelivr.net/processing.js/1.6.6/processing.min.js"></script>
Edit: I'm just now realizing that I'm 3 years late and this probably won't help anyone.
I know that it is best practice to have separate files for CSS and JS so that this:
<head>
<style>
<!--CSS code -->
<!--CSS code -->
</style>
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script>
<!--JS code -->
<!--JS code -->
</script>
</body>
becomes this:
<head>
<link rel="stylesheet" type="text/css" href="my-blackjack-file.css">
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script src="my-javascript-file.js"></script>
</body>
But is there an equally simple way to do this for the html portion of the code for the sake of better organization? I have seen some suggestions online for including html pages, but they seem to be talking about iframes and use some fairly complex (for me) javascript. Is there something more akin to
<body>
<link rel="stylesheet" type="html" href="my-html-file.html">
</body>
in order to separate a long document into several files that run as if they were on the same page?
This is work in progress and may (or may not) be supported in the next version.
Until then, unless you output the HTML through some server-side technology such as JSPs or Velocity, which support templating, you can only use iframes or AJAX as a workaround for including HTML.
Depending on the development environment you can use partial views.
<body>
#Html.RenderPartial("descriptiveNameHere.html");
<script src="my-javascript-file.js"></script>
</body>
Or something to that effect. There is additional syntax of course, but maybe this will put you on the track you're looking for.
Ultimately you will still have an html file with your "HTML Code". But if you're looking to reduce the complexity of a large file by moving chunks into external files, partial views are a way to do so.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>JavaScript Basics</h1>
</div>
</body>
</html>
h1{
color: green;
}
Here are both my HTML and CSS. I am using the ATOM text editor on my Mac. Whenever I preview HTML it shows JavaScript Basics in the default black color,not in green from my css.
Try this one dude!
`<link href='style.css' rel='stylesheet' type='text/css'>
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
If you have access to a back-end language like PHP, you can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
I am using the elm-live dev server but I do not know how to use an external CSS file. According to documentation, I can use the following code below, but where do use that snippet of code? If i use it in the index.html it still gets overwritten on when i save my *.elm files.
Thanks
elm-live states:
$ cat <<——— > index.html
<!doctype html>
<link rel="stylesheet" href="style.css" />
<body>
<div></div>
<script src="elm.js"></script>
<script>Elm.Main.embed(document.querySelector("div"));</script>
</body>
———
$ elm-live Main.elm --output=elm.js --open