I recently bought a template that uses sass with compass. I have been reading and mostly every blog says compass is deprecated. I am looking for a ways to replace or remove compass and use bourbon.
I have not been able to compile the sass with compass, everytime I run npm run dev it says there is a variable missing.
Is there any easy way to remove all the mixim call from compass and replace them with bourbon or any way to remove compass overall?
What I am doing right now is looking for any call to the mixins, and replacing them with pure sass or css. I feel like this might take a long time. The folder structure is the following:
scss
├── style.scss
├── compass
│ ├── css3
│ │ ├── _animation.scss
│ │ ├── _appearance.scss
│ │ ├── _background-clip.scss
│ │ ├── _border-radius.scss
│ │ ├── etc
│ ├── helper
│ │ ├── _header.scss
│ │ ├── _mixin.scss
│ │ ├── _responsive.scss
│ │ ├── etc
Take a look at your config.rb file, where your compass settings are stored, see if there are any links to files that you are currently using.
What you want to do next is remove compass completely by uninstalling it via ruby or deleting it manually.
gem uninstall compass in the console. Or, find the dir remove it, and then trace all of your used mixins so that you can remove them too (this is going to be a bit messy).
Bourbon does not support all of the functionality presented in Compass, but it sure is the most adequate mixin library to date.
Next, learn to use npm. This is the piece of software that will save you a lot of time and hassle.
npm install bourbon --save in the console, and that's it. You simply import it in your SCSS after.
Next, learn to use Gulp, so that you don't lose more time while developing.
Related
I want to use sass to write individual components, for example styling a chart. But I don't want to manually include every component, but rather have one scss file that includes all the components and then gets compiled to one .css file that I can include. I found this SO answer but it didn't work for me and according to SASS, you're not supposed to use #import anymore. This is the project structure:
src/
├─ about/
│ ├─ .../
│ ├─ scss/
│ │ ├─ chart.scss/
├─ app/
│ ├─ scss/
├─ build/
│ ├─ css/
| | ├─ styles.css
├─ base/
│ ├─ styles.scss
styles.scss should include all scss files from all projects in the src, and should be compiled on every .scss save. When I do it with this command though:
sass base/styles.scss:build/css/main.css --watch --style=compressed --no-source-map
it gives the error:
Error: Can't find stylesheet to import.
╷
1 │ #use "//about/scss/chart.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
base_templates\styles.scss 1:1 root stylesheet
The content of styles.scss is
#use "//about/scss/chart.scss";
and that of chart.scss:
h1 {
color: #fff;
}
(as a test). What am I doing wrong?
The path should be "/src/about/scss/chart.scss" for Sass if src is the source of the volume respectively partition. Sass never 'knows' anything about your domain or network, therefore you can't assume that you can use paths based on the webroot as absolute paths.
You can also consider using relative paths, then it would be '../about/scss/chart.scss'.
Let's assume a config group foo and config files organized in the following directory structure:
conf
├── foo
│ ├── bar
│ │ ├── a.yaml
│ │ ├── b.yaml
│ │ ├── c.yaml
│ └── baz
│ ├── d.yaml
│ ├── e.yaml
│ └── f.yaml
Each of the yaml files sets the package to foo using # #package foo. When running the corresponding application, I can simply override foo by specifying something like foo=bar/a or foo=baz/f. Thereby, the sub-directories bar and baz indicate a certain category withing a larger set of possible configurations.
While this works fine for standard use in hydra, some more advanced features of hydra appear to be not compatible with this structure. For instance, I would like to use glob in conjunction with the directory structure like this foo=glob(bar/*) to sweep over all configs of a certain category. However, this does not appear to work as glob does not find any configs in this example. Also if I assign an invalid config to foo and hydra lists the available options, the list is empty.
This makes me wonder if structuring within a config group is a generally supported feature in hydra, and just some corner cases are not covered yet, or if I am using hydra wrong and directories should not be used for organizing configs in a group?
This is not recommended, but not explicitly prohibited.
There are scenarios where this can help, but as you have discovered it does not play well with some other features. A config group contains other config groups/configs.
Hydra 1.1 is adding support for recursive default lists which will make this kind of scenario more common.
See The Defaults List documentation page:
├── server
│ ├── db
│ │ ├── mysql.yaml
│ │ └── sqlite.yaml
│ └── apache.yaml
└── config.yaml
In the scenario from the example there, the entities under server/db are different than the entities under server, so such globing would not make sense.
I'm having this rather annoying trouble that I'm having some issues understanding when my Sass compiles.
I have a SCSS folder that compiles to a CSS folder in the root of my site, but in my SCSS folder I have individual folders for layout, utilities, etc.
The issue I am having is within my SCSS structure I have a vendors folder that houses everything from Bootstrap Grid, Font Awesome, etc. To keep the structure of the vendors folder neat and tidy I like to keep each vendor add on in a seperate folder. I use the following watch command:
sass --watch scss:css
Here's the file structure where ... is the files within the folder.
project-name/
├── scss/
│ └── style.scss
└── vendors/
├── bootstrap-grid
│ └── ...
└── fontawesome
└── ...
The issue I have when compiling to the CSS folder, the vendors folder and its contents are being compiled to the CSS folder:
project-name/
├── css/
│ └── style.css
└── vendors/
├── bootstrap-grid
│ └── ...
└── fontawesome
└── ...
Thanks in advance :)
Try using this command:
sass --watch scss/style.scss:css/style.css
Sass updates my main stylesheet build.css when I save changes to build.scss, but will not update build.css when I save changes to any partials, for example _grid-settings.scss. I essentially have to manually re-save build.scss each time I make a change to a partial in order for Sass to detect a change.
From my terminal:
Justins-MacBook-Air:ageneralist justinbrown$ sass --watch stylesheets:stylesheets
>>> Sass is watching for changes. Press Ctrl-C to stop.
write stylesheets/build.css
[Listen warning]:
Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.
My directory is:
stylesheets/
├── base
│ └── _base.scss
├── build.css
├── build.scss
├── layout
│ └── _layout.scss
└── vendor
├── _grid-settings.scss
├── bourbon
├── highlight
└── neat
I'm using:
Sass 3.3.8.
Ruby 2.0.0-p353
OSX 10.9
I've looked through several SO posts on issues with sass --watch but none have helped yet to guide me to a solution.
EDIT: I'm adding my build.scss here just in case that's the issue:
#import "vendor/bourbon/bourbon";
#import "vendor/grid-settings";
#import "vendor/neat/neat";
#import "base/base";
#import "layout/layout";
I had the same issue.
I managed to fix it by deleting the SASS cache directory. I also ran sudo gem update to update all gems on my system.
I'm not sure which of these things fixed it or if it was a combination of the two.
I had also stuck to the problem of Sass seemed wasn`t watching all file changes correctly.
Sass can`t watch changes in files that are located by the path directing upwards the watching file. For example:
Variant A (Which I had)
scss/
├── base
│ └── controller1.scss
├── utils
│ └── utils.scss
└── app
└── app.scss
Where app.scss is:
#import '../base/container1'
#import '../utils/utils'
compiling
sass --watch app/app.scss:../css/styles.css
sass --watch app:../css
In both cases sass tracks only app.scss file changes, but not controller1.scss or utils.scss
Variant B (solution)
scss/
├── base
│ └── controller1.scss
├── utils
│ └── utils.scss
└── app.scss
Where app.scss:
#import 'base/container1'
#import 'utils/utils'
compiling
sass --watch app.scss:../css/styles.css
Variant C (solution) also works
scss/
├── base
│ └── controller1.scss
├── utils
│ └── utils.scss
└── app.scss
Where app.scss:
#import 'base/container1'
and controller1.scss:
#import '../utils/utils'
// ...
This isn't a satisfactory answer for me, but I ended up trying out another gem that would handle preprocessing, guard-livereload, and though it itself didn't work, when I came back to try sass --watch sass properly monitored my stylesheets directory for changes (partials included) and subsequently recompiled build.scss.
I'm not certain why it works now, but am guessing one of the gems installed along with guard or guard-livereload solved the issue. Perhaps listen or fssm?
interface FileImporter {
findFileUrl(
url: string,
options: {fromImport: boolean}
): FileImporterResult | null;
}
Hie everyone !
My Sass project looks like this :
Project
├── sass/
│ ├── bootstrap/
│ │ ├── ...
│ │ ├── _bootstrap.scss
│ ├── mymodule/
│ │ ├── submodules/
│ │ ├── _mymodule.scss /*with only #import from submodules/ */
| └── main.scss /* various styles & #import bootstrap, mymodule */
└── stylesheets/
└── main.css
I'm trying to watch every modifications:
in the whole mymodule folder
in main.scss
And alterate only stylesheets/main.css with modifications i made.
Every commands I wrote have generate mymodule.css or others scss files/folders.
What is the sass --watch for doing this please ?
Thanks a lot in advance !
Alexis
You should totally use Compass!
What Compass is
Compass is a must-have tool for every SASS coder. Compass consists of two parts:
a meta-framework for SASS;
a command line tool used for compiling Compass projects and doing other useful stuff.
The compass watch command is exactly what you're looking for. It will recompile the CSS whenever you save a change in any of the following:
every non-partial file inside the sass folder (in your case it's only main.scss);
every partial imported by one of the above (recursively).
Partials that are never imported are ignored.
Compass will create a separate CSS file for every non-partial file. As for partials, they do not appear as separate CSS files because are incorporated inside non-partials.
Ridiculously short installation guide
For the following to work, you must have Ruby and RubyGems. Probably you already have them.
To start using Compass, do:
Install Compass with RubyGems: gem install compass.
Create a compass.rb file in the root of your project (in your case it's Project/compass.rb).
Run compass watch and start coding.
Example of a config.rb file
Here's a minimal compass.rb that might work for you:
css_dir = "stylesheets"
sass_dir = "sass"