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.
Related
I have no prior experience of scss and I am using a Portfolio Template for my portfolio website.
I added one more section to the website. If I am defining a style in any _file.scss file which was present priorly, it is working fine but when I create a new _filename.scss file for it. It is not detecting the style from that file.
Do I need to configure something before running npm start or npm install.
I think you have to Import the file in your main scss file.
ex.:
given:
_filename.scss
usage in the main scss file:
#import "filename";
Remember***
Dont write the underscore in there, the underscore means, that it is a (scss) file that is going to be imported.
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'm currently working on a large business website using Compass (the Bootstrap Fork). We are using many different scss files, all of them including base.scss, where our variables and mixins live. Now, we want to compile some optional css files from our scss files, that receive the variables from the base.scss files at compile time, but won't have the overhead of all the other rules defined in base included in the finished and compiled css file.
So basically, I'm looking for a way to reference the base file instead of including it. I just want $companyColor (etc...) to be replaced with the value of the corresponding variable in the base file.
Please note, that I cannot have those lose files #imported in my base file, because these files overwrite some of the base rules and are only loaded on certain pages of the website to provide an alternate theme.
Is this at all possible?
Thanks in advance!
Not sure I fully understood what you asked.
But if you want some variables from base.scss to be included in other scss files, you can split your base.scss in two files:
shared-vars.scss containing variables that will be included in
optional scss files
base.scss containg all other variables and mixins, and importing
shared-vars.scss
Now you can import base.scss in your main scss files and only import shared-vars.scss in your optional scss files
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.