I am currently restructuring my project using the 7-1 architecture as proposed in https://sass-guidelin.es/#architecture.
Now, i am using flaticons in my project. Where in the structure should i put the folder and scss file provided by flaticon, and where should i import it?
The 7-1 pattern lists the following sub-directories along with main.scss:
./
base/
components/
layout/
pages/
themes/
abstracts/
vendors/
main.scss
Where to place external library/framework scss
The vendors folder is meant for SCSS of external libraries/frameworks like _flaticons.scss
If flaticons is a directory with many things rather than a single file, then you can just place the whole flaticons directory in the vendor's folder.
Import
In main.scss in the sass-root directory: #import 'vendors/flaticons';
or the following if your stuff is in a directory: #import 'vendors/flaticons-directory/flaticons-main-file'
Be mindful of the ordering of imports in main.scss because it's possible to define general variables and mixins in one file, and refer to them in other files, so the files that define them must be imported before the files that use them.
Additionally, the SASS will be compiled to CSS rules in the same order that they are imported, so the normal inheritance / cascading will apply to the compiled CSS rules.
Related
My team is making a project using Vue 3 with SASS. There were 3 ways to organize the folders:
1- each view page is inside a separate folder inside views folder. Each of these folder has a .vue file and a .scss file. The .scss file is using #import from a main .scss file inside assets/scss folder.
2- view pages are not on separate folders, and instead they're importing .css files for each one, which are on assets/css folder.
3- use inline .scss coding on each .vue file.
We opted for the first option, but then I noticed I couldn't use #use with this method or the vue project won't compile. Since there's a recommendation to use #use instead of #import for SASS, should we use the second method (import .css files instead) or the 3rd?
Thanks!
i'm using grunt-sass/node-sass for compiling my scss files.
i have a lot of scss-files like btn.scss, panel.scss etc. component like.
i'm NOT mergin all scss files in one big css file (styles.css) - instead I compile like all separated css files (btn.css, panel.css etc.)
because I have globals scss files like variables.scss, mixins.scss etc. I have to import these files in every single scss file. for example in btn.scss I need to write everytime the #import directive (ex. #import 'variables, #import mixing etc.'). of course I could merge all globals files in one file and the just import that file.
is there a more elegant way to precomile or to inject these global files before or while compiling with grunt-sass?
thx!
I have this template - web template - editorial when I added it to my existing Meteor app it does not load the scss files, only the css file which is in the client directory. Though I put the scss files in the public folder. What best way can I add this? because I could not get it to work i decided to compile the scss to css.
sass_folder
scss_subfolder
----base_scss_subfoler
_partial1.scss
_partial2.scss
----components_scss_subfoler
_buttons.scss
_textbox.scss
----layouts_scss_subfoler
_pages.scss
_footer.scss
----libs_scss_subfoler
_functions
_vars
_skels
_mixins
main.scss
ie8.scss
ie9.scss
css_output_folder
I have tried to compile the files by doing thus on the cmd: sass --update scss:css it only compiled the main.scss, ie8.scss, ie9.scss to the css folder, other are not compiled. How do I compile all at once and maintain the same sub-directory folder in the css folder. Why and how do I do this?
If other files name start with _ character then these files are partials meaning they get no compiled and their content can only used with import.
Read the official doc about partials.
The files with names starting with underscore are considered as partials and not compiled to css files. That is why you are not seeing those in your output css.
Please navigate to section with heading 'Partials' in this document ... and read the next 2 sections.
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the #import directive.
I have a _common.scss file which I import to various page.scss files:
page.scss:
#import "common";
#page {
...
}
_common.scss:
#import "partials/all";
#import "components/all";
...
But the problem is, since all my pages import _common.scss, the way I have things structured, if I make any changes inside _common.scss (or any of the files it imports), sass has to rebuild all the page css files. But if I just make _common.scss its own file and call it with a <link> tag (<link href="common.css">), then the page.scss file has errors, because it is trying to use variables and mixins defined in _common.scss and its imports.
Is it possible to structure my project so that the page.scss files can use all the mixins and variables in _common, but so that sass doesn't have to rebuild each page.css file each time I make a change to the common file? i.e. - make it so that sass only builds the common file when a change is made in common, and only builds the page file when a change is made in page?
I would say it is not possible, since the aim is to have one css for each page at the end. This said it HAS to be rebuild if something is changed in common.
This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 7 years ago.
I am trying to find out if Compass can merge .css files rather than using a third party tool to merge the .css files after Compass has compiled the .scss files. I have looked around the web and on here but nothing so far. I thought the config.rb may have an option for this but all I found is compress feature.
Anyone tried this or have a found a third party tool that works well with compass?
I'd wanted to do this same thing for quite some time. I finally settled on the following solution.
Take the following structure (i.e. with your modules in a sub-folder of sass)
project
sass
modules
header.scss
blog-posts.scss
footer.scss
something-else.scss
main.scss
stylesheets
Update main.scss to contain:
#import 'modules/header.scss';
#import 'modules/blog-posts.scss';
#import 'modules/footer.scss';
#import 'modules/something-else.scss';
Run the following command (from the project folder) in order to build
compass compile . sass/main.scss -s compressed
This just compiles main.scss, which inturn goes and imports each of your modules. Additionally the compressed style option minifies the output.
It's not compression, but you can exclude files from being copied to the output directory by prepending an underscore to their names. For example:
scss/
_core.scss // will not be copied
theme.scss // #import 'core';
css/
compass compile
create ../css/theme.css
css/
theme.css