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
Related
I want to have 2 pages with their own style using sass. now I have a main.scss file and all styles will be compiled in style.css with this command in package.json "watch:sass": "node-sass sass/main.scss css/style.css", if I want to have another page I can still use this main.scss file but when I load this page all style of the first page will be come with style.css. may I have two separate main.scss file for each page? if yes how should I change "watch":sass "node-sass sass/main.scss css/style.css",
my second question is how can I use common styles like for header and footer which are in both pages?
UPDATE
I created 2 main.scss file. and 2 separated style.css and put them beside each other . and I modified my watch script like this:
"watch:sass": "node-sass --watch sass/main.scss:css/style.css sass/main2.scss:css/style2.css"
my first main.scss and style.scss works but the second main.scss and style2.css does not work
If you are not using a framework such as Angular, which allows you to have both global and local styling out of the box, you can simply create your own separate .scss file for each page, and import them into their respective .html files. You can then use the !important flag to override global styling.
You cannot simply import .scss into HTML files though, you would need to use something like LESS CSS. You can find more here [https://stackoverflow.com/questions/19215517/attaching-a-scss-to-html-docs]
For the common styles, you can simply use the global classes defined in main.scss.
Hope this helps.
Yes, you can have separate main Sass files for each page. Instead of having a single main.scss file, you can create separate Sass files for each page and import them into a main Sass file that serves as the entry point for your Sass build process.
For example, let's say you have two pages, page1.html and page2.html, and you want to have separate Sass files for each page. You can create the following Sass files:
page1.scss
page2.scss
main.scss
In the main.scss file, you can import the page1.scss and page2.scss files using the #import directive:
#import 'page1';
#import 'page2';
Then, you can update the "watch:sass" script in your package.json file to use the main.scss file as the entry point for your Sass build process:
"watch:sass": "node-sass sass/main.scss css/style.css"
This way, when you run the "watch:sass" script, the main.scss file will be compiled and all the styles from the page1.scss and page2.scss files will be included in the resulting style.css file.
To use common styles for the header and footer that are shared between pages, you can create a separate Sass file for the common styles and import it into both page1.scss and page2.scss. For example, you can create a _common.scss file with the styles for the header and footer, and then import it into page1.scss and page2.scss:
// common.scss
.
I created another main.scss file called it main2.scss . I modified the watch script like this :
"watch:sass": "sass --watch sass/main2.scss:css/style2.css sass/main.scss:css/style.css",
now Ican use style2.css for page 2 and in this way for page 2 I will load only relevant css style for only page 2.
Dont forget to stop npm start and re run it again
I read somewhere that its good to have only one css for all pages in sake of browser cache and etc... but in this way I have separated css for each page. Please comment your opinion about it.
In one of my css files there is this entry
#import url('bootstrap.min.css');
What does this do, does it get it from the internet or local pc.
if you use import rule in your css file , in fact you export all things in bootstrap file in you own css file. just this.
read this article : https://www.w3schools.com/cssref/pr_import_rule.asp
Importing css means to import the file of css from inside the directory or project.
e.g. in REACTJS we don't provide the link of our css file inside our view file, we only import it. And its not only in CSS case, it also occurs in various other files like JS or image etc.
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 was wondering if there's a generator to put a .CSS file into a .HTML file so it's only in one file. The CSS would now be in the <style> tag instead of a separate file. Is there any generators to do this?
you can minify the CSS using a minifier like this one https://cssminifier.com
and then you can take the output and put it in the <style> tag in your HTML
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.