So to start off, let me introduce myself as a complete beginner. I want to get startet with scss, but I'm confused about how it works in regards to my css file. After having set of sass, and compiled my css to sass, should I then link my html to the sass file instead of to the css? And would I then delete my css file from the FTP and instead upload the sass file?
Thanks, Jonas the newbie.
scss or sass files are an improved syntax to write CSS, but remember that browsers can only understand CSS files. You can write a file with the sass or scss syntax, then compile it to a css file, and link this css file in your html file. So no, you will never upload anything else than the css file to your FTP.
Nope. Scss file is just for you to write code in more convenient style.
You should link html to main css file. And put on server only css file.
Good practice is break scss in small pieces and import to one scss file, which is transpiled to css.
F. ex. my main.scss file (transpiling to main.css linked to html site) looks like this:
// Layout
#import '_layout/_navbar';
#import '_layout/_main';
#import '_layout/_footer';
#import '_layout/_header';
#import '_layout/_blog';
#import '_layout/_aside';
// Components (you can replace the below ones to bootstrap or other framework's files just with components)
#import '_components/_blockquote';
....
This is the biggest asset of scss.
Related
Lets say for example that I have HTML file with , and , how can I split up my css file into multiple files with each file containing styling for each of the tags. In other words, can I have header.scss, main.scss and footer.scss files all transpiling to a styles.css file? How can I do that? I don't want to have a long styles.css file that may become very difficult to maintain in the future.
I have tried wrapping the styles for the and using the #use to bring it into the styles.scss file but it is not working
change your file names:_header.scss, _main.scss and _footer.scss
You can import them all in a style.scss:
#import './header';
#import './main';
#import './footer';
and compile that into a css file containing all the scss files in one
I've strcutured my web project with sass 7-1 pattern, like this in the picture below:
My question is that which css file/files should I import in each individual html file, or to be precise, what css file should i have for each html file.
for exmaple: todo-list.html, should I have an idividual app.scss file, which imports neccessary scss files for each html file and then have them transpiled to a css file which is to be imported in that current html file, or; should I have a main css file which holds all of the html files styles which this current project has (a css file which hold all of the styles for entire web project, including todo-list.html styles and index.html styles together)?
I have been looking into this subject for ages and cannot find anything about it. My question is:
How do I put SCSS into a normal HTML document with JavaScript in it as well.
Can I put the SCSS in a <style> tag or in an external stylesheet? If so (the stylesheet one) does it have to be like the following format: style.scss or style.css.
Thank you if you can help.
SCSS needs to be transformed into CSS before browsers can use it.
You could put SCSS inline in a <style type="text/scss">...</style> element and then use client-side JS to convert it to CSS and inject the resulting CSS into the DOM.
Likewise your build toolchain could parse the HTML, pluck out the SCSS, run it through a converted to get CSS and then inject that back into the page.
SCSS will not run in a browser without first being compiled to native CSS.
Webpack seems to be the build tool of choice for doing this during development.
well if your using VS CODE then there is a very simple way to add scss with html
(1) install the live sass compiler extention
Link : https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
(2) create a file (style.scss).
(3) after the installation.Write some SCSS code in the file and then you will find (watch sass button) on left bottom menu click on it and it will create 2 files (1)style.css and (2)style.map.css.
(4)now whatever you right in .scss file it will compile in style.css. Now connect your (style.css) with html and boom it will work......
I have a application which uses app.css in index.html. This app.css is the output css file from multiple SCSS files.
While inspecting an element to find css of that element, how can I know from which SCSS file is that style from?
You can use SASS Source Mapping. This will let you display the exact .scss file in your browser inspector.
Adding a flag to Sass's command line tool:
$ sass sass/screen.scss:stylesheets/screen.css --sourcemap
If you look in your output folder after running that command, you'll notice that a comment has been added to the end of the generated CSS file:
/*# sourceMappingURL=screen.css.map */
Hope this helps!
As you've shown no code, i'll assume... you're using compass to compile? In this case you can use the ruby to sourcemap your files for you.
This can be done like so:
# Enable CSS source maps for development
sourcemap = true
This can be added to your rubyfile.
If you're using gulp or grunt you can use:
https://www.npmjs.com/package/grunt-concat-sourcemap
or
https://www.npmjs.com/package/gulp-concat-sourcemap
or if you're using sass:
http://thesassway.com/intermediate/using-source-maps-with-sass
I am developing my own theme for wordpress, I'm also using SASS to write the CSS, and I want the final compiled CSS to be minified... my question is:
What would happen if I set SASS to compile the CSS in my style.css file (the one that is in the main folder of "themes"), would Wordpress be able to read it without problems?
Or should I leave style.css blank and compile the CSS in a file inside a CSS fodler, for example: css/main.css?
Or should I leave style.css blank and compile the CSS in a file inside
a CSS fodler, for example: css/main.css?
This is the best way to do it, and the way 99% of custom theme developers use. Just call main.css with #import and that's it
I would leave the style.css file alone and create another file like you stated. I'd also make sure to not include the default style.css and only the one you generated. If you look at great starter themes, that is what they do. For example, https://github.com/roots/roots.
I think it depends on how large your css file will be. For larger projects, I would split up my stylesheets into global.css, layout.css, mobile.css, tablet.css, put them in a subdirectory and #import them into the main style.css in the theme's root folder.
If it is a simple site that doesn't require structuring your css in such a way, you can have style.css and style.sass located in the same root folder of your theme.