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"
Related
I have built an Angular library containing a styles.css file with some custom CSS. When I include the library in a test application in the same repository it works fine:
library-repo/
├── projects/
│ ├── custom-library/
├── src/
│ ├── app/
│ ├── app.component.html
However, once I publish the library and import it in a separate application, the custom styles are not applied. How can I bundle the styles.css with the library so that the library components are styled consistently across all host application?
Put the styles you want in the styles file at this path
/src/styles.scss
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
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.
I really like eslint for es6 projects. Previously I've used it for new projects. Now I want to add it to a legacy project.
Fixing all pre-existing lint issues in one go is too much effort. Can I configure eslint (in .eslintrc.js) to only check files where I've explicitly enabled it with /* eslint-enable */ or similar?
ESLint has no default-disabled state that can be toggled by a file comment. You might be able to use .eslintignore for this purpose, however. You can ignore everything and then gradually whitelist files as you migrate them by using ! to un-ignore individual files. For example:
.
├── .eslintignore
├── .eslintrc.js
├── package.json
├── node_modules
│ └── ...
├── src
│ ├── index.js
│ └── module
│ └── foo.js
└── yarn.lock
Then your .eslintignore could look something like this:
# Start by ignoring everything by default
src/**/*.js
# Enable linting just for some files
!src/module/foo.js
In this case, src/index.js would be ignored, but it would lint src/module/foo.js.
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;
}