I am new to sass/scss and want to know how I can use sass file in my HTML project?
Do I have to first compile it into CSS with command line or anything else that compiles scss/sass runtime into css file at a time when webpage loads into browser?
So any help?
There are many options to create a Project working with SASS, but the most common is using Compass, I see you're new to it, I strongly recommend you read a Tutorial about Compass, after understanding this you should look others options to use the same SASS like working with gulp, gulp-sass, node-sass, browser-sync, and many other options to use the same Tool.
Related
I am creating a website using Drupal 8 and I found a free theme online which I have installed on my site. The theme consists of multiple folders of CSS files. I would like to use SASS to extend and modify this theme. If I want to do this, is it as simple as renaming all the files to SCSS files and compile using Gulp or Compass? Or is there a better practice to follow? Any guidance would be appreciated. Thanks!
There's no need to make any kind of conversion.
You can just change the file extension if you need to.
The SCSS syntax uses the file extension .scss. With a few small
exceptions, it’s a superset of CSS, which means essentially all valid
CSS is valid SCSS as well. Because of its similarity to CSS, it’s the
easiest syntax to get used to and the most popular.
From https://sass-lang.com/documentation/syntax
When I was studying Multimedia I got a free copy of PhpStorm.
Using PhpStorm I managed to some techincal magic using Ruby(I can't exactly remember how it worked) to write code in SCSS and phpstorm would automatically create a new file and compile all my code to usable CSS code.
I believe I remember something about a 'filewatcher' but im not sure.
Is there any way to do the same in Brackets?
maybe an addon to Brackets or something?
Thanks
I think you're talking about compilers that translate SCSS into CSS (and their integration in PhpStorm).
So maybe you will be interested in Brackets-SASS Plugin.
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
I've done everything said here and here.
I've changed the file extension to .sass, but my browser doesn't load the styles. Did I miss something?
Sass is a CSS pre-processor, and it seems you're using it without understanding it. Web browsers can't understand SASS code, and they won't. You need to "ask" Sass to generate the CSS browsers will use.
When Ruby and Sass are are installed, you need to:
Have a .sass file with your SASS code
Run the command sass input.sass:output.css (with some options if you want) to compile the SASS code and get a generated CSS code
Link your generated CSS file in your HTML
I am starting to learn JSF/PrimeFacess.
I am playing around and trying to figure out the best way to use sass instead of writing pure css for the project.
I have looked at gulp and the possibilities to automate workflows such as compiling sass files to css
Now my question is where the best place to put the sass files in the jsf/primeface project directory tree?
My though is to create a sub-folder in src named sass and use gulp.js to watch the folder and compile all changes to the sass files an puth them in the resources/css folder in `web/WEB-INF/css.
Does this make sense?
Rather than keeping the folder structure resources/css, it will be better if the folder structure would be something like includes/public/resources/common/css, or something module specific, or generic like includes/public/resources/MODULE_NAME/css to align in a better project structure.
Hope this helps!