so I'm new to SASS and coding in general so please don't be too harsh. I'm self taught.
Anyway, I keep getting this error after using Codekit to compile my html, css, and sass files.
Libsass: Error: Invalid CSS after "...blic domain) */": expected 1 selector or at-rule, was "*/ {}"
on line 3 of Users/MargaretBowen/Desktop/Code/better code/_reset.sass
>> License: none (public domain) */
-----------------------------------^
I've been following this tutorial (https://www.youtube.com/watch?v=gDsPH0Zt8Qw#t=3.356712) to help me out. I also tried to use this reset code (https://gist.github.com/hcatlin/1027867) in order to prevent errors from Codekit!
Obviously something isn't going right. Below is what is within my sass file and my _reset.sass file has only the github code in it. Restarting the server within Codekit didn't do anything.
// Imports
#import reset
I figured it out!! My issue was simply that my file _reset.sass was a Sass file instead of a scss file! Silly error.
Related
I have 2 websites that have very similar styling, only difference is color schemes and some other minor things.
To make things organized, using Sass I have 1 master style sheet , 2 style sheets that hold variables such as the different colors for each site, and also 2 "entry point" files which are the base files which get compiled, 2 entry point files because 1 for each site.
the 2 entry points include the 1 master style sheet + the site's variable sheet so 5 files in total
I have been using #import and it has been working well.
However import is being deprecated.
I tried to use # use and #forward but with no luck
When I use USE and FORWARD it gives me "This variable is not defined" error
#import 'variablesheet'
#import 'masterstyles'
This works
But use and forward dont
#use 'variablesheet' as *
#use 'masterstyles' as *
How do I do this without import as that is being deprecated?
You can try using each stylesheet with it's own namespace. Then you should be able to use the variables from each scss file. If this doesn't work, then you need to provide more details in your question.
#use 'variablesheet' as v;
#use 'masterstyles' as m;
.class {
padding: m.$padding; /*m. is to reference masterstyles*/
}
I'm referred to this thread : all is done.
But I got this bellow the table. It seems that the tag ng-template is not working correctly.
The problem was a css issue. I got as warning:
the stylesheet could not be loaded.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/less/normalize.less
Also after clicking on the start date input text: I am getting this error:
ERROR DOMException: CSSStyleSheet.cssRules getter: Not allowed to
access cross-origin stylesheet
I can't figure it out. I don't now what I missed.
Could you please help me solving that issue?.
Thanks in advance.
it seems that you have to add the import #import '../node_modules/flatpickr/dist/flatpickr.min.css'; to your css file.
HTH.
VScode error screenshotI generated a new component(bmi calc) in my angular app, then downloaded a html/css template of bmi calculator functionality and pasted the html and css content of the template into the bmicalc.component.html & bmicalc.component.css file in my app, but the app is not running?
This is my error(the image of my error)
As code given in your github files , below is working piece of code. I just updated your code.
You can check the updated code here on StackBlitz(Working) -
You can check demo here
Note : =I have just updated your code to make it work only as you got
those Uncaught error of compute function. Not sure about correct
calculation so you need to look on that part.
Just few suggestions
Add code snippet when you ask this type of question
Use appropriate names to variable, Avoid use i, ii, fv, kv type of variables.
.ts file is there to write presentation logic whatever you want to apply on the form.
Your code should be well-formatted. Clean html.
Avoid using inline css, Use .css file for it.
I am simply trying to further compress a css file. And I am getting an error which is peculiar. I wondered why I would get a ReferenceError: Can't find variable: jQuery for just a task which solely encompasses selectors from HTML & CSS? Unless it's reading the script tags in my HTML which have selectors?
UPDATE I forgot to mention the task is not spitting out, a new CSS file!
Also I noticed many gulp tasks have ./ preceding the directory, What is the purpose of that?
Anyway, see below:
This is my Gulp file, figured I include it...
gulp.task('uncss', function() {
return gulp.src('site/assets/stylesheets/style.min.81113a5b.css')
.pipe(uncss({
html: [
'site/**/*.html'
]
}))
.pipe(gulp.dest('./out'));
});
This is the error I am getting.
ReferenceError: Can't find variable: jQuery
file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:12
file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:43
/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:43
fn = function () { throw arg; };
^
Error: uncss/node_modules/css: unable to parse undefined:
missing '}' near line 1:46497
1: -> ebkit-min-device-pixel-ratio:0){#media{.
at error (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:57:15)
at declarations (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:224:26)
at rule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:481:21)
at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:56)
at atmedia (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:345:35)
at atrule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:457:10)
at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:44)
at stylesheet (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:73:16)
at Object.module.exports [as parse] (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:485:10)
at process (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/src/uncss.js:158:22)
at tryCatcher (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/util.js:26:23)
at Promise._settlePromiseFromHandler (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:501:31)
at Promise._settlePromiseAt (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:577:18)
at Promise._settlePromises (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:693:14)
at Async._drainQueue (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:123:16)
at Async._drainQueues (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:133:10)
Taken from the UnCSS documentation:
How?
The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
...
This means that your page will be loaded in a headless browser, so that library is able to find which selectors are really used.
I never used UnCSS, but what it seems to me is that:
it will throw JS errors in case they happen;
it will complain in case your CSS is not error-free.
That's why you're getting those errors.
Sounds similar to Issue 157. The solution - try using paths like /site/**/*.html instead of site/**/*.html.
Next thing to try is setting a higher value for the timeout option to give jQuery more time to load.
When push clear button in Firefox Dust-me an error appears whit this content:
Cannot process stylesheet [Content-type is not CSS]
note:
1-It show unused and used css correctly. I cant remove it.
2-when i test it for some other pages it work true.
3-My html file and css atached
see codes too :
My html File: http://www.4shared.com/document/TfMTKYvyba/arminshop_home.html
Mys CSS File:http://www.4shared.com/document/me6CJNbOce/new.html
Is the website hosted in a server? otherwise it won't work. I had the same problem.