While I was learning SASS, I have learned how to install SASS and dev-dependencies using npm package.
Now I want to work on my own project, so how should I work with SASS ?
Do I have to install SASS again ?
If not then how to use existing sass in my project and also the other dependencies like concatenation, auto pre-fixer. Especially when they are updated.
Related
I'm using Composer as a dependency manager for a WordPress project. I'm specifying plugins and WP-CLI as dependencies in composer.json like so:
"require": {
"johnpbloch/wordpress": "5.8.*",
"wp-cli/wp-cli-bundle": "*",
"wpackagist-plugin/akismet": "*"
}
Here's the documentation on installing WP CLI via Composer. This works great. However, I would also like to include the latest version of SASS this way, so that new people on the project can get that installed via Composer without having to do it manually.
I cannot count on everyone having npm, Chocolatey, or Homebrew, and I won't know what operating system they use.
Alternately, how could I install the latest version of SASS cross-OS via a script that Composer runs using post-install-cmd?
If there is no package for Sass (and it makes sense there wouldn't be, unless sass could be installed as a stand-alone binary or something like that), you cannot install Sass as a composer dependency
Which in any case wouldn't make much sense, since Sass cannot be a dependency for a PHP project, as it has nothing to do with PHP.
Alternately, how could I install the latest version of SASS cross-OS via a script that Composer runs using post-install-cmd?
The install instructions for Sass include no provisions for a "cross OS installer without using npm". So unles you write a script checking for the OS, what does it have installed, etc (which would be brittle and some serious overkill), you cannot automate this with a post-install-cmd.
Which again, wouldn't make a lot of sense in any case. If the package consumers need to use sass part of the project, it's a given they are developers and are capable of going through the sass requirements.
Point your package consumers to the appropriate documentation and be done.
I've been using Compass to compile Sass in my project, but it is now deprecated and no longer maintained so I want to move away from using Compass. The project uses PHP and Laravel, so I would like to use Laravel Elixir for compiling the Sass files instead.
Is there a way to transfer my .scss files from Compass to Elixir without going in and changing all the places in my Sass code that I use Compass helpers, or do I need to more or less re-write my Sass files? There are a ton of them, so I would love to avoid that.
On the suggestion of my co-worker, what I tried was to add the compass files to my resources/assets/sass directory (includes compass/css3, compass/layout, compass/reset, compass/typography, and compass/utilities, as well as several other .scss files included in Compass. The hope was that by including these files, the functions of Compass would still apply outside of it.
When I try to compile with gulp, the error I'm currently getting (although I'm guess I'll run into another one once this is fixed) is:
>> Sass Compilation Failed: resources/assets/sass/compass/_support.scss
Error: Undefined operation: "prefix-usage(browser-prefixes(browsers()), css-transitions, (full-support: true), (partial-support: true)) gt 0.1".
on line 324 of resources/assets/sass/compass/_support.scss
>> #if $usage > $threshold {
------^
My guess is that I will need to go ahead and remove the Compass stuff from the Sass code manually, but I'm hoping someone else has a better solution for me! Thanks.
ColorZilla's gradient editor says
// needs latest Compass, add '#import "compass"' to your scss
Well I've found that's not so easy. Obviously if you just throw #import "compass"; at the top of your .scss file, Sass won't compile because _compass.scss can't be found.
This is an asp.net project utilizing Sass. In addition, I have to use the sass ruby gem to compile, not compass's compiler.
I've installed the compass gem. I've followed the instructions on http://compass-style.org/install/. I've run compass init, compass create, compass install. None of them even give me compass's mixins.
I expected this to work like bourbon, though I know this isn't compass's primary goal.
What am I missing?
Install the library
bower install compass-sass-mixins
Import the compass into your SASS file
#import "bower_components/compass-sass-mixins/lib/compass"
Checkout SASS function list:
https://github.com/askucher/compass-sass-mixins
I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.
I wanted to use SASS on our company's web app but I can't install any programs on production machines. Everything I searched about SASS required you to run an installation program like gem and also required HAML.
I was hoping to find just a script that processes scss files without needing to install anything else.
Well... if you have Ruby available, you could checkout the Git repository of Sass (https://github.com/nex3/sass). Do so by either typing git clone https://github.com/nex3/sass.git or just downloading it.
Then you could use the interactive Ruby console by typing irb. Try to require 'sass/lib/sass' (this one here) and run Sass.compile_file 'my_styles.css'.
Otherwise... why are you trying to do that? You can also install sass locally, run sass --watch on your sass folder and it compiles your scss files automatically into css files - which you can deploy on your production environment.
If you can run java program in your build system, you could use JRuby for compiling sass. See this answer for more details
Here's a solution for using Sass without using the command line or installing dependencies. It works with Windows, OS X, and Linux. It has a graphical interface, and no installer, just unzip and double-click.
http://scout-app.io
You can also use the java library https://github.com/scireum/server-sass which can be embedded into any java based web-app. It will compile sass on the fly and return the resulting css. This is especially useful if the Sass sources change (i.e. for customizing reasons) and an ahead of time compilation is not possible. (Note: I'm the author of the project - and it is also not yet a complete implementation of the Sass standard).
Alternatively, what you could do is:
Install Ruby
Download the Sass Gem
Navigate to download location
Run: gem install sass-3.3.4.gem
Voila! Sass is installed.
Use the online Sass compiler SassMeister. You just have to paste your sass code on the left panel and get the css code on the right.