I'm working on a drupal project using SASS and Compass. I would like to use compass mixins like:
#include transition-property(width);
#include transition-duration(2s);
But when I try to #import 'compass/css3'; at the top of my scss file, it does not work. I guess this is because _css3.scss file is not in my drupal theme's scss folder. It's in systems (ubuntu) /var/lib/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass folder.
How should I include compass/css3?
Should I edit the config.rb file?
What will happen if another developer works on this project who has their compass _css3.scss file in a different location? Will they need to edit their local config.rb file or scss files?
Related
I have bit knowledge about how to compile scss file using npm run dev.
But now I have Bootstrap html theme folder where all assets files are included like scss and css . i am confused that is i have to #import all bootstrap theme folder scss files name in laravel app.scss file for compile or just copy Bootstrap theme folder scss files and paste on laravel assets/scss folder and run command npm run dev. please help thanks
In your resources/sass/app.scss file or any other file you want to have the theme files included, add the following line of code
#import '~bootstrap/scss/bootstrap';
This line of code includes all bootstrap scss files that can be found in the node_modules/bootstrap/scss/bootstrap folder. If you have a custom directory for your scss files you can include them like this
#import 'custom_folder/bootstrap-saa/assets/stylesheets/bootstrap";
Do not forget to add the entry into your webpack.mix.js file in your root folder.
mix.sass('resources/sass/app.scss', 'public/css');
We are using Gulp with Zurb Foundation SASS part of our front end development workflow. In our main.scss file, we are importing the _settings.scss file from Foundation to customize the variables. The main.scss file lives outside of the Foundation SASS directory forcing us to pull it in as follows:
#import '../../../../../frameworks/foundation/sg/scss/settings';
As you can see, we have to back out of the working directory (a Wordpress Theme directory), then back into the Foundation SASS directory.
How can we minimize that path either though Gulp or some other SASS configuration file? Is there a way to set base paths somehow, or is this the desired behavior for Gulp and SASS?
I've added a new .scss file to my components directory in Zen. Compass sees the file, because I get the message 'file modified' but I do not get a .css file generated
I'm new to compass and sass. Do I need to map files somewhere?
I found my answer. I needed to include the new scss in my styles.scss file.
I'm pretty new to SASS/SCSS and got a git project with CSS Files in the main directory which shall import partials from a subdirectory. I was wondering if it's possible to install sass on the server, create a compass project so that css files will be created automatically after a live edit of the scss files on the server? Or does it have to be local with a filewatcher? I already tried to set up a compass project on the server but no css files were created automatically. Was it because of wrong settings or is it just not possible this way?
If it's possible is there a good step by step tutorial? I already found this
Maybe the problem is the path. In my config.rb I changed the path without knowing what to write in the string if sass and css directory are the same as project path. Didn't work with "/" or an empty string.
Both Sass and Compass provide watch commands. You can use either:
sass --watch input.scss:output.css (options)
or, assuming you've got your Compass config file correctly setting your css_dir vairable:
compass watch
Either of those should recompile the css file upon changes. If you want this done live on the server, you'll need to execute the watch command on the server.
To add a point to #aerook's answer,
In your projects you may have multiple scss and css files. In which case you may use the following to watch the entire scss directory to make changes in the css directory
sass --watch scss:css
PS : scss and css are folder names in the same directory path.
I've got a compass project up and running with scss files in a src directory which are being compiled into a sttylesheets directory as css. This is all fine and I'm able to use the sass #import command no problem.
However, I'd like to bring a bit of organisation to my sass partials and place them into relevant folders within the src directory. However, when I try to do this the #import command fails.
Is there a way of doing this?
UPDATE: I found in the compass docs that I can add add_import_path to my configuration file, but I can't get this to work either. I've tried a full path to the directory and a path relative to the project but nothing is happening.
Someone please help, it can't be this hard!
If you placed partials, for example, in src/partials directory — just use #import "partials/name" in sass/scss files to import them.
I found that in a webby static project where I was using compass / sass I had to explcitly set the base sass path to be used in order for it to pick up sass imports (everything worked except for imports).
So I ended up doing something like this in the compass config block:
config.sass_dir = File.join('content', 'css')
I imagine this is because I'm using something other than the default sass paths, so when I #import it was looking within it's default path instead of the actual path.
Hope that helps.
So it turned out I was going about things the wrong way. I was trying to be efficient and organise my folder structure before doing anything with compass. I realised that I needed to set compass to watch the project first and then create a folder structure. That way the folder structure gets replicated in my stylesheets or CSS folder instead of just being in the source folder. Now everything is working as it should!
I had the same problem. Actually I was migrated from rails + sprockets project to standalone one.
I don't know why, but Compass doesn't work with sprockets-style filenames, like screen.css.scss. I renamed all my files just to screen.scss and all partials worked as expected.
I had a similar problem. It was very stupid of me - but then again, most problems in programming are. My problem was that, although I had everything setup correctly for standalone, according to:
https://github.com/twbs/bootstrap-sass
I was using a subfolder structure like this:
project
-- stylesheets
-- bootstrap
-- sass
---- main.scss
------- subfolder1
----------- partial.scss
------- subfolder2
----------- partial2.scss
And in my main.scss, I did use #import correctly, like:
#import "subfolder1/partial.scss"
The problem was this:
Compass only sees partials correctly if the filenames start with underscores!
Once I renamed the files to _partial1.scss and _partial2.scss, everything worked without a problem.