So I have this unusual situation, may be it's not Sassy way OR the right way and that's why I am asking it.
I have a main.scss which basically imports all other partials and frameworks say bootstrap. It works perfectly if all I needed was one single global CSS but I require different css files for various components and pages. One option could have been to include variables and mixins in every SASS file and compile different SASS files. Following are the reasons I didn't venture this path-
This somehow doesn't seem right, may be there is much efficient and automated way.
Not everything is coded by me or I may not have options to arrange variables and mixins locations. E.g. variables and mixins are not declared in separate files and I might not have option to re-factor.
One option which I am using is to split final compiled css using grunt and placing them in different folders but then changing images and font path is turning out to be a big trouble. I am not sure how do I use imgmin or such utilities to solve my problem neither that I am using the most efficient way to achieve what I want. I also want to avoid much complications in workflow.
Looking for some advice or tip which may help me out.
I'm not sure why you would say that compiling multiple SASS files doesn't seem right. That's how I'd approach it.
If you have a lot of variables and mixins, put the shared ones into a single file.
_shared.scsc:
$blue: #3b97c6;
$grey: #e6e6e6;
#mixin my_mixin {
// ...
}
Then just have your multiple SASS files (without the underscore so that they get compiled individually).
sass1.scss
#import "_shared";
// stuff only for sass-1
sass2.scss
#import "_shared";
// stuff only for sass-2
sass3.scss
#import "_shared";
// stuff only for sass-3
Am I misunderstanding something?
Related
Is there a way to use just one file with variables and use it within a sass and a less CSS-framework?
In my react project I use semantic UI (less) and kendo react (sass). For comfortability reasons, I want to write only one file including variables like colors, paddings, gaps ...
in kendo theming is pretty easy.
I've found a way to use variables / theming within semantic too.
Here is the link
but now I can't get both frameworks working with just a single var file together as one is using sass and one less.
could find any solution online too.
// semantic site.variables
#fontName: 'Lato';
//kendo variables.scss
$niceBgColor: pink;
#width: 10px;//less
$theme1-PEOGCS:#615149;//SASS dark grey
They have different way of declaring variables and you should
completely separate LESS From SASS, for best practice.
It is bad practice to use both on the same project unless you really
have to do so.
SASS and LESS have a slightly different syntax, you would end up
having to maintain each separately.
Good practice would be for example:
Add Main Folder to project name it: SASS
File: main.scss
inside of SASS create Helper Folder name it: Helper
inside of it add these Files:
_mixins.scss,_variables.scss,_placeholder.scss
To make the code easy to maintain and reuse. Same with less(similar)
If there is a way to do what you want I don't recommend doing it, that's IF. Good luck
How many variables do you have?
The potential problems with this will be much bigger than manually maintaining two files with a dozen of variables in each.
Kendo has older, less-based themes, although of inferior quality. Semantic UI has a sass port. Even converting Semantic UI's less files yourself will be better than mixing less and sass.
I'm a full stack developer that uses sass (.scss) for styling. However, my backend crew, when they have to make front end changes, use css because they are comfortable with it.
I have to convert the css to scss every time manually or else I will overwrite their changes. Is there a way to update my scss file to pull in css changes automatically?
My IDE is PhpStorm (if that helps anybody)
SASS version 3.4.24
I don't see a plugin for PHPStorm to do that; you might have to make one yourself. But even if you do, the SCSS it'd produce probably wouldn't be much better than the CSS you already have. It's silly to convert to SCSS only to compile back to CSS. The whole point of SCSS is so that you don't have to write CSS.
You could convert the CSS to SCSS with sites like this one. Again, results will probably not be much better than if you just kept it CSS.
My solution would be to split the CSS file. One part would be for the stubborn devs, while the other one is the CSS compiled from the SCSS you like to use. So, they can work in CSS, and you can work in SCSS.
You probably need a workplace solution before a technical one.
I've discovered that #import has performance implications. However all of my sass files #import a global-constants.scss at the top of the file to reuse several variables for colour and other properties, so that I can change the main colour etc from one place.
Is there a more performant way to reuse variables in sass?
EDIT: upon pondering this further, I notice that my css file that is generated from my sass file after compilation, has no import statement, and all of the variables are rendered as proper css values. So I'm probably not going to get any performance issues anyway, is my guess.
When you are using #import inside the SCSS, it will try to include the whole file and send it to the browser, (it is better, if you have configured it to return only one single CSS file or minified). That way, it is clean and better:
No #import in the output.
Source code is split using #import, keeping the modularity.
Summary: No performance issues because of #import.
We currently use SASS to pre-compile CSS which consists of various SCSS files.
How does one remove the implementation of SASS so that CSS files are managed directly?
As a side question, is using SASS just personal preference or is it best practice for smallish projects? Why would I want to work in several files when I can just work out of one in a syntax that I'm familiar with?
Cheers
Just remove the sourceMappingURL in your main css will do.
You can also, should you wish, reconstruct traditional CSS by looking at what was being accomplished in the SASS files and rebuilding from scratch. This is cleaner than beginning with the compiled CSS ... but it is not for the faint-hearted: it's kind of like picking out stitches. But if the number of SASS files is few, you'll be better off.
CSS preprocessors (sass/less) were always a solution in search of a problem, in my opinion. They were likely designed by developers who were given sloppy CSS from designers who may not have had good coding practices - but in general, there is very little reason for them, and they add one more bit of unnecessary tooling. I've used them, don't like them, and will never use them again. Totally unnecessary. Good structure in one's CSS will always win.
Using sass helps you organize your code in a better way. And ease the development by using nested selectors and using mixins,variables and much more which you code once and re-use many times.
One will simply go to concerned file and change the contents easily if it divided to multiple meaningful files.
And coming to your question, you can move away from sass very simply. Generate a css file once and from next time onwards start coding in your css local copy rather than extending your sass files again . :)
If you just want to move away from SASS to return to the pure CSS, you have to use the compiled stylesheet. If you compile it via command line, then you would have got the compiled CSS. Anyway, you can use an online tool to compile it, such as this.
Once a time you have the compiled CSS, you just have to import that rather than the SASS stylesheet you've been including in the HTML previously. Just insert this in your <head>.
<link rel="stylesheet" type="text/css" href="Your pure CSS stylesheet URL">
We have a hundreds of .less files in production, but would like to start incorporating .scss files as well.
Would I need to make my own file type in order to compile mutliple types of CSS preprocessor files or is there already a way to do something like this:
#import 'less-styles.less';
#import 'scss-styles.scss';
#import 'stylus-styles.styl'; //potentially
whereby it produces a single CSS file in that order.
Because of valid CSS code is also valid Less code, you could compile your SCSS and stylus files first to CSS and import that.
sass scss-styles.scss scss-styles.css
Than in your Less code:
#import (less) scss-styles.css
The less keyword above does:
less: treat the file as a Less file, no matter what the file extension
The above means that you can extend and mixin the CSS selectors from the scss-styles.css file in your Less code.
Notice that variables and mixins from the from the scss-styles.css file are not available for (re)use in Less.
If you need the variables and mixins too, the only solution seems to convert your SCSS to Less. See also: https://github.com/bassjobsen/grunt-scss2less
You should be able to do the same for your stylus (.styl) files.
So far I have not seen any tools that would allow developers to cross-reference LESS mixins from Sass, or versa-vice.
That doesn't mean that you can't use multiple preprocessors in the same site, it just means that you will be limited in how they can interact. With concatenation and minification tools you could certainly build LESS and Sass separately and then merge them into a single file that gets minified.
With all of that said, I highly discourage that approach. Pick a technology for the project, and stick with it. That way you can make the most of the tools at hand, and only have to worry about a single technology lifecycle (updates, API changes, etc).