Bootstrap makes a great deal of how they fully switch to SASS from version 4. However, when I browsed my node_modules, I realized that everything there is still in SCSS.
I know that the difference isn't that big but I do like the absence of curlies and I'd prefer to see SASS-like SASS-ing.
Where can I find the ortodox SASS source code? Or am I missing something profound and am simply reasoning mistakenly?
Related
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.
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">
I'm developing a rails application and I've issue when run site on IE9. All of sass files not working on IE. If I want the site run on IE9, I've sort sass files in application.scss.
I don't know why. I have been work with other rails applications in the past, this is the first time sass files require sorted.
So, is there anyone like me? Please help me.
Detail about my application:
Rails 4
Sass 3.2
Foundation framework latest version 5.2
Slim template
Ps: I've added respond.js and html5shiv.js into layout/application.
It not SASS that is not working in IE but rather the rules that you created through it. You should check for what CSS rules are supportet by IE. A good source is http://caniuse.com/
IE9 still has CSS limits. If your application.css has more than 31 import links or more than 4095 rules, that's probably why you're experiencing this. If that's the case, you should definitely refactor your stylesheets.
You do have gems like CSS Splitter to deal with this, but honestly if you're running into those limits it's probably a good time to reorganize your assets.
As #Severin has suggested, SASS isn't the problem - it's your CSS:
Sass is completely compatible with all versions of CSS. We take this
compatibility seriously, so that you can seamlessly use any available
CSS libraries
SASS is basically another way to write CSS - it's precompiled on deploy and basically renders "pure" CSS for use in the browser
Your case with IE is not likely to do with your SASS - it's probably an issue with your CSS. Can you post your application.css?
I've been having a good time working with Bootstrap 3 rc1, but now the stable release is out and it's even BETTER. I tried swapping out the files but many things break. I read the summary of changes here but it's a bit vague and a lot seems to have changed between rc1 and rc2. I'm wondering if anyone knows of a straight-forward guide to making that transition.
There doesn't seem to be a definitive answer for this, so here's a collection of what I encountered...
All .col-* classes need to be replaced with .col-sm-* (they also added .col-md-*).
If you're using glyphicons, they're font files now, so you'll need to make sure those files are in the right place.
In previous version, I had .row classes wrapped around things which behaved weirdly when I upgraded. I ended up stripping out and .row classes that aren't parents of .col-*-*s.
navbar component was completely redone, so if you use that you'll have to just redo it.
These 4 things, covered just about everything I encountered, but I'm still working on this so I'll update later if I run into more stuff big stuff.
SASS has Compass (a community maintained library of sass mixins/methods).
Does LESS have any supporting libraries that can compare to Compass? Listing anything would be helpful!
Another great mini-library...
Bootstrap
by Mark Otto, Designer at Twitter
Bootstrap is a super awesome pack of
mixins and variables to be used in
conjunction with LESS, a CSS
preprocessor for faster and easier web
development.
Demo/Site: http://getbootstrap.com/
Mixins: https://github.com/twbs/bootstrap/tree/master/less/mixins
Github/Source: https://github.com/twbs/bootstrap
There are less elements, but it's hardly a collection. I agree it would be nice to have something like this.
Take a look at my compless repo. There I try to implement some features of Compass using less. Mixins are divided into categories in a way how it done in Compass' reference. Patches are welcome! :)
Here are another couple of choices: lesshat and clearless
Also, this blog post compares 3 less libraries: less elements vs bootstrap vs lesshat.
From the post, it seems like both bootstrap and lesshat beat less elements,
however depending what you need you would choose between bootstrap and lesshat.
Bottom line, if you’re looking to completely redefine and systematize
the way that you build websites, check out Bootstrap. However, if
you’re just a LESS user looking for some mixins, I definitely
recommend checking out LESS Hat.
PS:
If you're just look looking for some basic mixins, and for you - a whole library is overkill - then maybe this post from css-ticks is more for you.
I just launched {lessins}, it is a library of common mixins, similar to bootstrap.less or less elements, but with a focus exclusively on mixins (the others include some unecessary variables, that seem remnants of other projects.)
I have also organized the mixins into bundles. Check it out: https://github.com/jdmiller82/-lessins-
Old question, but right now Lots of Love for Less (3L) is far more complete and generic than Preboot née Bootstrap!
Try Preboot. It is a pretty cool LESS library from a member of Bootstrap team.
This is an old question but let me share this recently made Bootstrap3-LESSHAT Boilerplate.
The Boilerplate has the LESS Hat Mixin Library (counterpart of Compass) set up as well as the Font Awesome Iconset.
There's a new library called more-or-less which is similar lesshat but a lot faster since it does not use inline-javascript.
Just like lesshat it allows to use endless layers for e.g box-shadow or background-image.
It basically has all of the lesshat mixins plus a few other helpful functions.
.for()
.find()
.in()
.join()
.repeat()
requires Less 1.7.0 or later