How to name a Sass file containing only #import statements - css

How should one name a Sass file that has the sole purpose of importing other Sass files?
Are there any rules or general "industry standards" that apply to this?
Let's suppose we have the following file structure:
sass/
|-- global/
| `-- file.sass
`-- vendor/
`-- bootstrap/
|-- variables.sass
`-- mixins.sass
and file.sass under global/ contains only
#import "../vendor/bootstrap/variables";
#import "../vendor/bootstrap/mixins";
How should file.sass be named?
Is it bootstrap.sass or bootstrap-loader.sass? Or something else?
I couldn't find any relevant post or documentation that addresses this matter except this Stack Overflow thread:
Sass #Import rules and naming which is somewhat similar but it doesn't cover my question.
Please support your answer with arguments / examples if possible.

The primary CSS/Sass file is usually called main.scss/main.css or style.scss/style.css.
Citing thesassyway.com here's how the structure looks like:
stylesheets/
|
|-- modules/ # Common modules
| |-- _all.scss # Include to get all modules
| |-- _utility.scss # Module name
| |-- _colors.scss # Etc...
| ...
|
|-- partials/ # Partials
| |-- _base.sass # imports for all mixins + global project variables
| |-- _buttons.scss # buttons
| |-- _figures.scss # figures
| |-- _grids.scss # grids
| |-- _typography.scss # typography
| |-- _reset.scss # reset
| ...
|
|-- vendor/ # CSS or Sass from other projects
| |-- _colorpicker.scss
| |-- _jquery.ui.core.scss
| ...
|
`-- main.scss # primary Sass file
In an enterprise-level project where multiple sub-projects are bundled you can name and divide your primary file into different files and name them after each project.
stylesheets/
|
|-- admin/ # Admin sub-project
| |-- modules/
| |-- partials/
| `-- _base.scss
|
|-- account/ # Account sub-project
| |-- modules/
| |-- partials/
| `-- _base.scss
|
|-- site/ # Site sub-project
| |-- modules/
| |-- partials/
| `-- _base.scss
|
|-- vendor/ # CSS or Sass from other projects
| |-- _colorpicker-1.1.scss
| |-- _jquery.ui.core-1.9.1.scss
| ...
|
|-- admin.scss # Primary stylesheets for each project
|-- account.scss
`-- site.scss

It would all depend on how you intend to compile your scss in the project, and how the workflow of the project works.
Typically you would use "Partial" scss files for anything that you don't want compiling separately.
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. Source: https://sass-lang.com/guide
A basic typical workflow inside a project may look like the follow.. (Depending on how much scope the project has):
Src (Folder)
-- JS (Folder)
--Scss (Folder)
-- Components (Folder)
-- _button.scss
-- _animation.scss
-- Pages Folder
-- cms (Folder)
-- _about.scss
-- _contact.scss
-- _components.scss
-- _source.scss
-- default.scss
Inside _source.scss:
Import all cms page partials/other..
#import
'pages/cms/button',
'pages/cms/animation';
Note: You do not need to use an underscore before the file names in this import.
Inside _components.scss:
Import all partial component files.. (Same as source)
You would then import these into a file which you want to be compiled.. (No underscore file name):
default.scss:
#import
'components';
#import
'source';
I hope this answers your question.

Related

How do I iterate over subfolders for SCSS files to compile?

I need to iterate over a subfolder for SCSS files in a variety of locations to compile in CSS (obviously). However, I have no idea how to do this, not being skilled in that area. I am also hampered by the fact I have to try to do this using NPM, and SASS (not node-sass).
Could someone give me a whistle-stop tour on how to achieve what I want?
It might also be worth pointing out that the SCSS files may reside in the SRC folder on the odd occasion, and I need to create the CSS files in the folder the SCSS was found in :(
As an example my folder structure looks a little like this;
Root
|
|- Components
| |- src
| |- styles
| |- buttons.scss
|
|- package.json
The end result would look like this
Root
|
|- Components
| |- src
| |- styles
| |- buttons.scss
| |- buttons.css
|
|- package.json
Any help would be greatly appreciated as I would like to learn how to do this once and for all ;)

CSS relative path broken when deploying to github pages, build process issue?

I built a very simple static page deployed to Github Pages.
I noticed quickly that most of the css background images failed to load.
After doing some digging around I found that the culprit is my SCSS/CSS.
In VSCode, my relative path for an image looks something like this:
#media (min-resolution: 192dpi) and (min-width: 37.5em),
(-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
(min-width: 125em) {
background-image: linear-gradient(
to right bottom,
rgba($color-primary-light, 0.801),
rgba($color-primary-dark, 0.801)
),
url(../../img/apple-mountains_1920.jpg);
However, this was causing the URL to become clipped, stepping backward out of the repository.
What it should be:
https://name.gethub.io/repositoryname/img/apple-mountains_1920.jpg
What I was getting:
https://name.gethub.io/img/apple-mountains_1920.jpg
To fix this, I simply needed to go through and remove one period from all of my background-image paths:
url(../../img/apple-mountains_1920.jpg);
Becomes:
url(./../img/apple-mountains_1920.jpg);
One thing that is interesting, is that in VSCode on my machine, if I don't use the format (../../img...) the file isn't found.
What am I doing wrong? I'm fairly new to deployment, is this going to be a problem with any webhost I use or is it something unique to Github pages?
Better yet, is there a way I can automate fix this in my build process?
Right now I just run my SCSS through this series:
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b \"last 5 versions\" css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/main.css --output-style compressed",
EDIT:
My File tree structure is:
Project Folder
|- index.html
|- [css folder]
|- [img folder]
|- [js folder]
|- [sass folder]
| |- main.scss
| |- [abstracts]
| | |-_functions.scss
| | |-_mixins.scss
| | |-_variables.scss
| |- [base]
| | |-_base.scss
| | |-_typography.scss
| | |-_utilities.scss
| |- [components]
| | |-_buttons.scss
| | |-_form.scss
| | |-_cards.scss
| |- [layout]
| | |-_footer.scss
| | |-_header.scss
| | |-_navigation.scss
| |- [pages]
| | |-_home.scss
My development machine is Windows 10, if that makes a difference.
Thanks!
Try that '../img/apple-mountains_1920.jpg'
If your file-tree look like
somefolder
index.html
img
thisImage
But what would be better - add your file-tree to question
After digging around, it seems that the problem is due to me attempting to use a 7-1 style folder structure where the source SASS isn't in the same or similar structure to the CSS.
Seems that I might need to take advantage of a package like resolve-url-loader in order to fix the relative paths automatically.

Compiling watch SCSS Many-to-One CSS

I'm trying to find a way to compile my multiple scss files into one css file.
scripts are in package.json using node-sass
The best I've found for the moment is : sass --watch .assets/css/scss/:assets/css
The problem is it creates one css file for each scss file plus a css map file.
I was previously working without watch node-sass --include-path scss .assets/css/scss/style.scss assets/css/style.css but had to run the command at each save.
Using sass --watch .assets/css/scss/style.scss:assets/css/style.css with style.scss like this :
#import 'test1.scss';
#import 'test2.scss'
is not working but console say :
Compiled style.scss to style.css.
Compiled test1.scss to test1.css
Am i missing something?
EDIT : for some reasons, running only sass without node on a subsystem linux is causing some blue screen. Using node-sass --watch ./assets/css/scss/style.scss:assets/css/style.css or node-sass --watch ./assets/css/scss:assets/css return a npm error : code ELIFECYCLE errno 1
I've tried different solutions and the one that worked for what i wanted was that one : Using node sass watch with npm
Had the remove the dependencies and the directory bacause i have to write on only one file.
have to run this one to make it work
"css-watch: node-sass --include-path scss ./assets/css/scss/style.scss -w /assets/css/style.css"
including files in the style.scss without _ in the name is working fine with a simple import and detect all updates in the imported files.
Given the following directory structure
root
|- src
| |- collect
| | |-collect.scss
| |- pack-a
| | |-a.scss
| |- pack-b
| | |-b.scss
|- build (generated)
| |- collect
| | |-collect.css
| |- pack-a
| | |-a.css
| |- pack-b
| | |-b.css
and collect.css with the following content
// ./src/collect/collect.scss
#import "../pack-a/a.scss";
#import "../pack-b/b.scss";
(i) run sass ./src/collect:./bld/collect to generate ./bld/collect/collect.css
(ii) run sass ./src:./bld to generate all
All your SASS partials should be renamed to begin with an underscore character: _.
From the SASS Basics guide:
A partial is 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.
You can continue to import the partial files into your main styles.scss file the same way, using their normal names and omitting the underscore character. You can also omit the '.scss' if you'd like. To follow the new SASS syntax version you should be using #use to import partial SASS files as a module, rather than #import.
Then you just transpile that main build file and it should work fine.

Stylus, right order of subdirectory import

everybody.
I have a problem with stylus import.
In my project I'am using such methode of import:
#import "project/**/*.styl"
And also i have this bem folder structure:
Project/
|- Project.styl
|- Block1/
| |- Block1.styl
| |- _Element1/
| | |- _Element1.styl
| | |- __Modificator1/
| | | |- __Modificator1.styl
|- Block2/
|- Block3/
In general, the problem is that when bundle.css is ready, styles in it goes in wrong way. First in it goes modificators, then elements and only then blocks, so modificator always overwrites by elements, and finnaly they don't work ... that how looks my code:
HTML:
<div class="block1_element1 block1_element1__modificator1"></div>
CSS:
.block1_element1__modificator1{font-size: 14px}
.block1_element1{font-size: 16px}
In result will be 16px font size ...
If someone know how to change order from end of branch to the start, please give me advice how to make it.s
The Problem
Wrong order of Stylus imported files.
The Reason
When using File Globing in Stylus i.e. **/* Stylus engine orders files by names so the order of imported files becomes __Modificator(n).styl then _Element(n).styl then Block(n).styl and that of course what is causing wrong CSS styles.
Possible Solution
Use index.styl file in each directory/subdirectory, inside each index.styl file import all the files in the current directory then all index.styl files of all subdirectories.
Example
The project structure should be like below:
Project/
|- Project.styl
|- Block1/
| |- index.styl
| |- Block1.styl
| |- _Element1/
| | |- index.styl
| | |- _Element1.styl
| | |- __Modificator1/
| | | |- index.styl
| | | |- __Modificator1.styl
|- Block2/
|- Block3/
And here what should be inside the index.styl files
inside Project.styl
#import "Block1"
#import "Block2"
...
inside any Block directory index.styl file
#import "_Element1"
#import "_Element2"
#import "Block1.styl" // current parent block
...
inside any Element directory index.styl file
#import "__Modificator1"
#import "__Modificator2"
#import "_Element1.styl" // current parent Element
...

How do I compile sass code into a css file in another directory?

I want to incorporate the SMACSS architecture into a site that I am building.
On my desktop I have a folder named after the site which I am building. Containing my css,js images and sass folders.
All the contents of the sass folders are partials which I import into a main.scss file(contained within the sass directory).
Here is my sass directory:
sass/
|
base
| _ file.scss
| _ file1.scss
|
layout
| _ file.scss
| _ file1.scss
|
module
| _ file.scss
| _ file1.scss
|
state
| _ file.scss
| _ file1.scss
|
theme
| _ file.scss
| _ file1.scss
I want to compile my main.scss file into a file called stylesheet.css which should be inside the css folder.
I have tried:
sass --watch main.scss:stylesheet.css
With no luck.
You are executing sass relatively to current directory, so keep it in mind, and enter path to your files according to it:
sass --watch main.scss:../css/stylesheet.css
Or call sass from the root of your project:
sass --watch sass/main.scss:css/stylesheet.css

Resources