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.
Related
Im trying to learn sass and JavaScript using VS Code. I created an app folder that holds my js folder which contains my script.js and scss folder that contains my _globals.scss. _header.scss, _variables.scss, and style.scss. I created a dist folder that contains my style.css and style.css.map. I have my html linked to my dist/style.css but I cannot get any of my pages to connect to my html page. I have the #import variables, globals, and header set in my style.scss page but the only styles I can add to my webpage is from the html document itself.
I’ve tried very little because I’m new to web development. Working from a MacBook, I downloaded homebrew, git, and a couple other apps I saw on YouTube. I tried changing my #imports to #use and adding them directly to the style.css but that did not help.
I was expecting by downloading any of those files would get my pages to communicate with each other.
Are you trying to import the .scss files on your styles.css? If so, this is not the right way to work with sass.
To be able to "transform" the .scss files into .css, you have to compile these files using the CLI (command-line/terminal).
This video shows how to do this procedure.
It the above is not the case, could you please send us screenshots of what you're trying to do, it will be really helpful to help you to fix this issue.
Create a new file in CSS(type),
then link that file using the <link> tag in your HTML page using the address of the newly created .css file.
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.
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......
Okay so let's assume, for simplicity's sake that my folder structure looks like this:
project
- index.html
- css
- style.css
- scss
- style.scss
- img
- image.jpg
I want to use my image.jpg as a background for a div. I am working from style.scss and then monitoring the scss to css in style.css. If I use the path ../../img/image.jpg it will be displayed as correct in style.scss, but since I am monitoring this to style.css, the image will not be displayed because the path to the image from style.css is ../img/image.jpg. This goes both ways, If I use the path ../img/image.jpg the image should not be displayed because the path is incorrect for style.scss. How can I make this work?
I'd personnally set the images url to fit the style.css needs.
In my point of view, style.scss is here only to provide more flexibility during the coding of your design. This way, i never use .scss files inside my HTML.
Taking the in mind that i always compile the .scss into .css, that makes no sense to me to set the path from the .scss file.
By the way, i know there are tools allowing to auto-compile .scss files before returning them compile from the server, but i'm not pretty fan of this solution, because more than requesting a file in HTTP GET, you'll need your server to compile code before returning it, so it'll obviously take a bit more time...
One of the possible solutions for that to use absolute path to your images, I mean, like:
/img/image.jpg
therefore you will still have autocomplete in IDE
and css will be transpiled correctly
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.