Im doing my web in Middleman (static Ruby web generator)
I have Foundation installed and working. Then in my styleshhets folder I have a _settings file where I should override foundation's settings.
But somehow it is not working...
My structure is this:
web
source
bower_components
foundation
components
_settings.scss
...
images
javascript
layouts
stylesheets
...
_settings.scss
...
Then In the _settings.scss on the stlesheets folder I want to override for example the body font color to red like this:
// We use these to control various global styles
// $body-bg: $white;
$body-font-color: red;
But is taking no effect.
Config.rb:
# Change Compass configuration
compass_config do |config|
config.output_style = :compact
config.add_import_path "bower_components/foundation/scss"
config.http_path = "/"
config.css_dir = "stylesheets"
config.sass_dir = "stylesheets"
config.images_dir = "images"
config.javascripts_dir = "javascripts"
end
after_configuration do
#bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))
sprockets.append_path File.join "#{root}", #bower_config["directory"]
end
Any ideas what i need to do to be able to override foundations styles via my _settings.scss on my stylesheets folder ?
Here is my web on github if you need to see the whole structure :
https://github.com/GiorgioMartini/Giorgio-Web
As long as _settings.scss is imported BEFORE foundation.scss it should work.
Your config.rb is correct. However, one thing to pay attention to is the line
#import 'foundation';
which will be treated differently than the line
#import 'foundation.scss';
Compass will first look to see if there is a foundation.scss file in the bower_components/foundation path. Since there is, it will use that one. Further, since all SASS variables have already resolved in foundation.css, importing _settings.scss beforehand will not change the default styles. Instead, make sure the top of your app.scss file looks like this:
#import 'foundation.scss';
#import 'settings';
Because bower_components/foundation/_settings.scss is fully commented out by default, it won't disrupt the new styles.
Related
I'm using Gulp as my build system.
I need to identify links pointing to external websites with the scss following rule:
// Links to external websites
a[href*='//']:not([href*='example.com']) {
&::after {
content: ' \e895';
font-family: 'Material Icons';
}
}
OR
$baseURL: 'localhost:3000'; // Set this variable based on environment
a[href*='//']:not([href*='#{$baseurl}']) {
...
}
When I'm running a development server the address I'm serving files from is localhost:3000, not example.com. The result is that every single link on the website (on the dev server) has a small icon indicating the link goes to an external website, which is really distracting.
What's the best way to set a scss variable based on an environment setting?
Edit:
This solution works, but it introduces a temporary file, which I'm not wild about. I moved my _variables.scss into the scss root, I process this file and output it into the base subdirectory where it is used to compile the scss. I would then add scss/base/_variables.scss to my .gitignore to avoid committing to version control.
_variables.scss
$baseURL: '/* #echo PATH */';
Gulpfile.js
// Set baseurl as Sass variable -- used to identify external links
gulp.task('sass-vars', function () {
var baseURL = (config.production) ? 'example.com' : 'localhost:3000';
return gulp.src('./scss/_variables.scss')
.pipe($.preprocess({context: {PATH: baseURL}}))
.pipe(gulp.dest('./scss/base'));
});
Yes, it is possible to do that.
To get environment variables there's a package: gulp-env
To remove these links from static files: gulp-preprocess
But it's also important to check these changed files, not to commit them as a development version. Hooks to your VCS is an option.
I'm new to SASS and CodeKit and am trying to compile a SASS file. The project is a Drupal Omega 4 subtheme. I'm running Mac OSX 10.10 with all the Ruby Gems installed and I'm trying to figure out where the hangup is that's not letting CodeKit compile the file. Any ideas would be much appreciated This is the error I get:
ArgumentError on line ["55"] of /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb: couldn't find HOME environment -- expanding `~'
Run with --trace to see the full backtrace
This is the config.rb file
require 'compass/import-once/activate'
# Require any additional compass plugins here.
require '~/.rbenv/versions/2.1.3/lib/ruby/gems/2.1.0/gems/'
# require '~/Library/Ruby/Gems/2.0.0/gems/'
# Set this to the root of your project when deployed:
http_path = ""
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
color_output = false
This is the SCSS file I'm trying to compile
// Import external libraries.
#import "compass";
#import "breakpoint";
#import "singularitygs";
#import "toolkit";
// Import variables, abstractions, base styles and components using globbing.
//
// Globbing will always import files alphabetically. Optimally, all your
// components should be self-contained and explicit enough to not have any
// contained styles leak into unrelated components: The import order should not
// affect the result.
//
// If there are variables, functions or mixins that depend on each other and
// therefore need to be imported in a specific order you can import them
// directly. Variables-, function- or mixin providing partials should never
// output any styles themselves: Importing them multiple times to resolve
// dependencies shouldn't be a problem.
#import "variables/**/*";
#import "abstractions/**/*";
#import "base/**/*";
#import "components/**/*";
Try set the HOME environment variable in your config.rb file.
ENV['HOME'] = "/Users/YOUR_OS_USER_NAME"
Having completely given up attempting to touch the command line for SASS compiling, I have installed Prepos which seems to have a decent interface, and at least seems to be able to do the basics like compile SASS.
This compiles nicely when I save the file:
$my_color: #BADA55;
nav {
a{
color: $my_color;
&:hover {
color: darken($my_color, 10%);
}
}
}
The problem arises when I try to import compass, eg. if I add
#import 'compass';
Then I get a 'compilation failed' error- with a big red sad face, but naturally, no elaboration as to what the problem is.
To be honest, I barely know where to start to fix this. I just about grasp the basics of what I'm dealing with, but that's about it. I have found the available online documentation surrounding getting started with SASS nothing short of atrocious, which is why I have (reluctantly) turned to using a GUI. From my understanding Prepros comes with everything out of the box- including ruby and compass. So I really have no idea why this isn't working, and would greatly appreciate any pointers. Thanks.
EDIT: I am using the free version of Prepros (will happily pay for the full version if it actually works) and have tried adding a custom config.rb file which sets some basic configuration options:
relative_assets = true
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
output_style = :expanded
line_comments = true
preferred_syntax = :scss
Doesn't work.
Sorry, adding the config.rb file (with the above content) DOES solve the issue (I'd just made an error in the path).
I don't know if I can explain the issue without pasting the whole code of all files but I'll try.
EDIT I've added the whole code to Github Account - My Sass structure
I use Windows 8.1 and Compass 0.12.6
In my public_html folder I have config.rb file and stylesheets folder. In stylesheets folder I have directory sass where I keep all sass files. CSS files are generated into stylesheets/preview folder (for development purposes) and into stylesheets folder (for production purposes).
I run compass watching running watch.bat script that I have in public_html folder
Content of watch.bat is:
START compass watch -c config.rb -e development
START compass watch -c config.rb -e production
EXIT
My config.rb file is:
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "../"
sass_dir = "stylesheets/sass"
images_dir = "img"
javascripts_dir = "js"
cache = false
relative_assets = true
add_import_path "stylesheets/sass"
if environment == :development
css_dir = "stylesheets/preview"
line_comments = true
output_style = :nested
end
if environment == :production
css_dir = "stylesheets"
line_comments = false
output_style = :compressed
end
In stylsheets/sass I have 4 files print.scss , medium.scss, small.scss and large.scss
Both medium.scss and large.scss begin with:
#import "base/_init";
This file import partial _init from base folder and this one loads another partials and other partials load another partials.
The problem is when I change something in partial Compass doesn't always compile all necessary output files. For example I've just changed something in _settings.scss partial and this one is finally loaded by medium.scss and large.scss (I remind that those 2 files have the same beginning so they both should be compiled). Somehow only medium.scss file is being in fact watched and large.scss file is not compiled as it should be in this case.
I have had such situation just before. I stoped 2 watchers (CTRL + C and Y) and then run again my watch.bat not changing anything in files - just after running I have info:
Change detected at 15:51:33 to: large.scss overwrite stylesheets/preview/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
and
Change detected at 15:51:33 to: large.scss overwrite stylesheets/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
So in fact there was change that should be watched but somehow compass/sass doesn't always catch it.
Sometimes neither of 2 watchers catch changes and I have to stop them and once again run watch.bat so it's not very convenient to work that way.
Sometimes even happen that watchers are stopped (as I presed CTRL +C + y) but I haven't pressed anything and in cmd there's no question about closing visible. They've just stopped
Question: What could be wrong and how to fix it?
I've cloned and checked your project structure, and your problem is simply the unnecessary use of the Import Once plugin. If you comment the first line of your config.rb (where this plugin is activated), your stylesheets will be compiled normally. Each main scss file you have (large.css, medium.css, small.css) is rendered to a separated css file, and you're not repeating your imports for each one of these files.
Below is the sequence of your imports with the Import Once plugin disabled:
I dont't know exactly how to solve your problem.
I think basically it's a bug or problem with two instances of compass running at the same time on the same folder.
But due to your environment, I have a suggestion that can do the trick for you.
Why, instead of having two folders with the assets, one for prod. and dev., you just keep one, for both dev. and prod.
What you can set on compass is to output css in the way you want for dev. and then pass that css through a yui filter (or whatever) for prod. This will minify all assets. If you are using symfony, you can use assetics, for instance.
That's the way we do and works perfect. We don't use assetics for compass... that's another topic :D
If you don't use any framework or extra filters, you can alway manually dump the assets when this ones are ready for production.
This way you avoid using two compass instances at the same time and also to compile manually for every deploy on production.
I really think it have to do with having two instances of compass running.
I'm trying to create a basic Compass extension, following the docs here:
http://compass-style.org/help/tutorials/extensions/
The problem I'm seeing is that I can't import files from my extension as expected, because the stylesheets directory, which the docs say will be automatically added onto the load path, isn't being added to the load path.
It gives me a command line error saying it can't find the file I tried to import, then lists out the load paths, verifying that my path is not on there.
One of the load paths is indeed /Users/myname/Sites/sitename/myextension_name, but I would expect there to also be /Users/myname/Sites/sitename/myextension_name/stylesheets
Anyone know why this wouldn't be happening as indicated in the docs?
UPDATE
Here's my config.rb as requested:
add_import_path '../../myextension'
# Require any additional compass plugins here.
require "susy"
require "sass-media_query_combiner"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "../../js"
# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded #or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
Ad hoc extensions need to be placed within the extensions_dir directory (which is set to extensions by default).
/path/to/config.rb
/path/to/sass/
/path/to/stylesheets/
/path/to/extensions/ <- extensions go here
Your myextension_name extension should live in /path/to/extensions/myextension_name/ and then follow the rest of the conventions for creating an extension. You may be able to assign extensions_dir to be the same as your sass_dir or your project's root, but I'm not sure that would be a wise idea.
If your extension is meant to be reused with other projects, it might be better to bundle it as a gem instead and use it the same way you're using Susy.