Best practices for moving css styles into Sass files - css

Our current Angular 4 project currently uses pure Css, however I am recommending the use of SASS. I am going with the VSCode IDE and the Live-Sass-Compiler extension (so far working quite well), and webpack is used to bundle the current "..\src\styles.css" file.
I have moved some 800+ lines from styles.css into _base.scss (as is), and my new sass folder structure I've created is:
src
sass
_base.scss
_variables.scss
main.scss
Where main.scss looks like:
#import "_variables.scss";
#import "_base.scss";
My primary question is two-folder: what is the best practice for refactoring all of this styling into my new main.scss file ? And should I create new sass variables in _varialbes.scss and use them inside _base.scss ?
If my question is too broad, I will try and narrow it down.
regards.

You can use new variables on _base.scss if you "#import _variables.scss";.
And you don't need to use _ when you importing scss files _ just means partial.
you can import your scss files without _ this.
#import "variables.scss";
#import "base.scss";
Here is the some best practices link

Related

Laravel Mix import multiple globbed SCSS files into app.scss

I have a project structure where each component has its own SCSS file, and I would like to have all of these automatically imported into the project's main app.scss file, without having to list them all individually or update the list every time a new component is added. I know that merging a bunch of globbed CSS files could cause issues with selector order, but that is not a concern here.
I have tried this, with the components.scss file imported into app.scss:
mix.styles('resources/views/components/*.scss', 'resources/css/components.scss');
mix.sass('resources/css/app.scss', 'public/css');
And it basically works.
Except, mix.styles() runs after the Sass compilation, so you end up with the components.scss file from the previous execution being imported, rather than the current one.
Is there a way to solve this? Or is there another approach that would work?
As Sass #import does not support glob paths it's not possible to do something like this in app.scss as far as I am aware:
#import 'resources/views/components/*';
Discovered this can be done quite easily with node-sass-glob-importer, which is compatible with the Dart Sass implementation that Mix uses:
const sassGlobImporter = require('node-sass-glob-importer');
mix.sass('resources/css/app.scss', 'public/css', {
sassOptions: {
importer: sassGlobImporter(),
}
});
resources/css/app.scss
#import '../views/components/**/*.scss';

Import custom stylesheets into create-react-app's app.scss

I am new to styling using app.scss for a new create-react-app and would like to know the following:
Should i store all the .scss and .css files in the style folder?
If I would like to import all of them into the app.scss, how do I
go about doing that?
I noticed that app.scss does these:
#import '~bootstrap/scss/bootstrap'
$fa-font-path: '~#fortawesome/fontawesome-free/webfonts'
When i tried to do this: #import './myStyles.css' it does not get picked up. I am not sure what is going on.
The reason i am adament about putting it in the app.scss file is becauase i created a toggle that allows me to switch between dark and light theme. However, I am unable to add customed theme to the existing themes.
Hope my question is clear
Here is reply for you query-
1.Should i store all the .scss and .css files in the style folder? - for this you have to make two folder, one is css and another sass(better approach)
2.If I would like to import all of them into the app.scss, how do I go about doing that?-
"#import 'reset';" no need of scss extension
If you are working on big project then i would suggest you that better follow this structure.
inside sass or scss folder make subfolder for diffrent works like vendor, module,particles etc. like modules/_colors.scss and follow below structure
// Modules and Variables
#import "partials/base";
#import "partials/buttons";
I hope this will help.

Bundle sass files into single sass file

TL;DR: My question is how to bundle some of my sass files into single sass file?
I've been developing an Angular component library and I package it with ng-packagr. Let's call it #my-lib/ngx-components.
Consumers of my lib will import my components like #my-lib/ngx-components/navbar.
I decided to add theming support to components.
For example, I have a navbar component with default colors (background, text, hover etc.) I want consumers of my library to be able to override these colors with their own theme. That's why I've written a mixin which takes a $theme input and override some css rules as follows (this is a basic version of what I have)
_navbar-theme.sass
#mixin navbar-theme($theme)
$primary-color: map-get($theme, primary-color)
$secondary-color: map-get($theme, secondary-color)
$color: map-get($theme, color)
.navbar
background-color: $primary-color
color: $color
&:hover
background-color: $secondary-color
Each component has its own *-theme.sass file.
I also have global _theming.sass file which imports all of these as follows
_theming.sass
#import './components/navbar/navbar-theme'
#import './components/button/button-theme'
#import './components/dropdown/dropdown-theme'
I want to export this _theming.sass file from my lib, so people can import this file in their own sass file as #import '~#my-lib/ngx-components/theming' and start using all of the mixins available.
If they want to have custom navbar, button etc, they should be able to use those mixins with single import.
I tried to make it look like angular-material theming setup.
At first, I have tried node-sass which is already in my dependencies. But, it tries to build sass into css so it omits mixins in the output file.
Then, I looked at what angular-material has done. They use scss-bundle
I thought "this is exactly what I want." However, it requires scss files, not sass files. It cannot read sass files.
Then, I thought "Okay, I can give up on sass and start using scss. How do I convert all those files to scss without going through them by hand". Then, I found sass-convert. In this question it was said that I can use it within command line. However, when I install sass-convert with npm globally, it didn't give me a command line executable. I think I need Gulp to use it.
I've been avoding to use Gulp from the beginning, because it means another tool to learn and it adds complexity to codebase.
At this point, I feel like "Hal fixing light bulb"
TL;DR: My question is how to bundle some of my sass files into single sass file?
Also, If you can come up with a solution that requires webpack, that's fine too.
Let's through your opinion or questions:
I want to export this _theming.sass file from my lib, so people can
import this file in their own sass file as #import
'~#my-lib/ngx-components/theming' and start using all of the mixins
available. If they want to have custom navbar, button etc, they should
be able to use those mixins with single import.
You need to know, what is your target audience. Mostly people using angular cli for create their app like template scratch.
So you need provide css bundle (people just want import your css) and sass bundle (who want to use your object or your mixin).
I want to export this _theming.sass file from my lib, so people can
import this file in their own sass file as #import
'~#my-lib/ngx-components/theming' and start using all of the mixins
available. If they want to have custom navbar, button etc, they should
be able to use those mixins with single import.
I tried to make it look like angular-material theming setup.
Firstly, you need to know that #angular/material doesn't export sass (they use scss) but they export css thene compiled by scss-bundle (as you mention it) see their code and documentation theme.
I thought "this is exactly what I want." However, it requires scss
files, not sass files. It cannot read sass files.
I would like quote this answer:
Sass is a CSS pre-processor with syntax advancements. Style sheets in
the advanced syntax are processed by the program, and turned into
regular CSS style sheets. However, they do not extend the CSS standard
itself.
It is better you need transfer your code from sass to scss (by yourself), it would not much to do it (I think, I always write scss instead sass file).
Solution:
1. Provide css and sass (scss better)
When you deliver your component libs, You have to provide css and scss. Beacuse angular cli doesn't provide scss loader by default.
Don't use sass file, use scss file see my refer answer on top.
scss-bundle + webpack
Since you have to provide css, you can you webpack shell plugin to bundle scss. Scss have provide cli, if you want to use cli.
2. Structure your scss
Okay, let's take sample from bootstrap#4 module for this case. Bootstrap use structure like this (Documents):
scss
|-- _variables.scss
|-- _mixins.scss
|-- _functions.scss
|-- ...
|-- index.scss
inside index.scss will have like this:
#import 'variables'
#import 'mixins'
#import 'functions'
...
so, this scss you have to deliver beside css. Like bootstrap do, then mixin will available to consumer. Also this good approach when consumer to find scss file in scss folder (easy to pointing which is scss put in).
UPDATE
For bundle to single file you have to create task runner to do it. In your case you want to use webpack, you can create a plugin to do it.
Here example plugin:
scss-bundle-plugin.js
call to you config webpack:
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new SCSSBundlePlugin({
file: path.join(__dirname, 'src/index.scss')
})
],
To try playground, checkout hello-world-loader then:
# install dependency
npm install
# try play ground
npm run webpack
it will create file _theme.scss at ./dist.
My advice don't use webpack, use task runner instead (gulp or grunt) for this simple case. Webpack too advance and hard to write task.
There is also a widely used package, called scss-bundle.
It is quite simple to use, you just create a config file with all relevant configuration and then run scss-bundle.
This for example will use all scss files, imported in entry.scss and move it to out.scss. All imports will be resolved, except for angular themes in this example, like #import '~#angular/material/theming';.
scss-bundle.config.json:
{
"bundlerOptions": {
"entryFile": "my-project/src/entry.scss",
"outFile": "dist/out.scss",
"rootDir": "my-project/src",
"project": "../../",
"ignoreImports": [
"~#angular/.*"
],
"logLevel": "debug"
}
}
My solution for scss / sass files
I've used small module bundle-scss
It bundles files by file name mask. So you need to pass correct mask like ./src/**/*.theme.scss specify destination file and maybe your custom sort-order
You don't have to create one entry point file with all imports. bundle-scss will get all files by mask analyze all imports and include this files as well

import of SASS partials in Angular2 components

I am using SASS for designing my website and have developed some partials in separate file say _partials.scss. Now I want to use these variables and mixins in my scss files of various components. So I imported this scss to styles.scss file which is present inside the \src folder. But the mixins & variables are not available to each of the component level scss files.
So, next I import these partials to each of the component scss files. This works fine. But is this a good approach to import the partials in all the component stylesheets? What can be a better solution to this?
P.S. I am using Angular CLI and webpack. Angular 2 version 2.3.0
Thanks!
This is a good approach. Every .scss file in your project should know it's dependencies, that's why the #import is always good.
What you can improve is adding the partials to the includePaths (if you use node-sass), that you can directly use #import 'partials'; instead of #import '../../my/long/path/to/partials'; or do the styles as a single file (not component level styles).
in style.sass you can import css / scss link.

import less file to another less file but not include it's content

I have two less files. one named main.less which imports bootstrap.less (which includes bootstrap variables.. etc.) and dash.less which has just styles for my dashboard. These two files should generate two css files. main.css and dash.css.
I'm including the main.css in to all my pages and the dash.css in to just the dashboard.
What i'm trying to do is: compile the main.less with included bootstrap variables in to main.css. Then compile the dash.less using the bootstrap.less variables in to dash.css. However this will result the contents of bootstrap.less to be included again in the dash.css which i don't want because i'm already including the main.css in my html.
Has anyone ever came across this ?
After trying several methods my decision was to use a grunt task to remove the duplicate css blocks.
Found a way. I had to use import like this:
#import (reference) "bootstrap.less";
.myclass{color:#bootstrap-variable;}
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess}
Using "reference" will source the imported file but not include it.
Compiling all less files to one file will be good .But if you want to have variables of bootstrap.less in dash.less. Then there is one solution , if you see in bootstrap with less dump in bootstrap.less , component wise less files are included like -
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset
#import "normalize.less";
#import "print.less";
etc.so if you want to use variables you can import '#import "variables.less"' in your 'dash.less' thats it :)

Resources