I don't understand what this compile error is describing because I do define the SASS variable:
Dart Sass failed with this error: Undefined variable.
╷
64 │ color: $sc-blue-light;
│ ^^^^^^^^^^^^^^
╵
_partials/navigation/_search.scss 64:12 #use
style.scss 65:1 root stylesheet
_utilities.scss
$sc-blue-light: #5BC2E7;
_search.scss
.search {
color: $sc-blue-light;
}
_style.scss (the main stylesheet)
#use '_partials/base/_utilities';
#use '_partials/navigation/_search';
The utilities are being loaded first, which is what I've read in other answers but it's not applying here. The file paths are correct.
All my other styles compile okay. It's just when I started using variables that this error comes up.
Any thoughts?
TL;DR
Add #use rule at top of the file in _search.scss too.
With namespace
#use '_partials/base/_utilities';
.search {
color: utilities.$sc-blue-light;
}
or without namespace
#use '_partials/base/_utilities' as *;
.search {
color: $sc-blue-light;
}
Quote from official sass
Members (variables, functions, and mixins) loaded with #use are only
visible in the stylesheet that loads them. Other stylesheets will need
to write their own #use rules if they also want to access them.
and
The simplest #use rule is written #use "", which loads the module
at the given URL. Any styles loaded this way will be included exactly
once in the compiled CSS output, no matter how many times those styles
are loaded.
Read about sass #use members
Read about sass #use namespace
Related
I'm trying to use Dart Sass' #use to customize Bulma, but as far as I understand it, when I do e.g.
#use "utilities/_all" with (
$blue: #0f52ba,
//etc
);
I can't then use e.g.
#use 'layout/hero';
Because the hero sass file expects a global $colors which would be redefined here as _all.$colors.
I also tried to load the utilities/_all without namespace like this
#use 'utilities/_all' as * whith (
//etc
);
To no avail… When debugging, I indeed see as set respectively _all.$colors and $colors but the hero files always throw this error:
Error: Undefined variable.
╷
14 │ #each $name, $pair in $colors
│ ^^^^^^^
╵
layout/hero.sass 14:25 #use
I am trying to add a custom compass function using ruby.
Here is my code. But finding hard to pick that function.
My folder structure
resources
-- css
-- extensions
----- extension_name
---------- stylesheets
-------------- _extension_name.scss
---------- templates
---------- compass_init.rb
-- icons
-- images
-- sass
----- something.scss
In compass_init.rb
require 'sass'
module WikiaFunctions
def get_command_line_param(param_name, default_result='')
result = ARGV.find {|arg| arg =~ /^#{param_name}=/} || default_result
Sass::Script::String.new result.split(/=/).last
end
end
module Sass::Script::Functions
include WikiaFunctionss
end
In my own Scss file something.scss
.test {
display: block;
background-color: get_command_line_param("logoColor", "white");
}
But the out put of something.css is
.test {
display: block;
background-color: get_command_line_param("logoColor", "white");
}
What am i doing wrong here?
Please guide me in getting this solved. Basically my compass version is in 0.12.7 and str_index, str_length and str_slice is not supported to make custom str_replace. So I wanted to build my own string functions.
I can't upgrade to compass version 1 or higher as my sencha touch application doesn't support it.
So I am planning to write my own ruby function but failing to do so.
I'm setting up first ruby site in production, everything works ok, but when I run
rake assets:precompile
It adds the css/js in "public/assets/" directory ok, but they have paths and line numbers in the files? So was just wondering how to get it all on one line and without line numbers/comments? Have I missed a setting or anything for this? Here is an example of how my application-428d86248ca363.css comes out:
/* line 1, /home/joe/myapp/app/assets/stylesheets/main.scss */
body {
background: #ccc;
}
/* line 6, /home/joe/myapp/app/assets/stylesheets/main.scss */
#head {
background: #666;
}
/* line 4, /home/joe/myapp/app/assets/stylesheets/welcome.css.scss */
.block {
color: #1e1e1e;
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*/
Also you can see it includes the big comment at end. How do I get it to go all on one line with no comments?
SCSS
they have paths and line numbers in the files
That's a problem with SCSS which should resolve if you use rake assets:precompile RAILS_ENV=production
Fix
Whilst looking for a reference, I found this answer and this github:
Just to update previous answer, by Chase T.
For me this is not working anymore.
#config/compass.rb
line_comments = false
should become
line_comments = 0
Considering the resource uses compass.rb, I looked to see how to do it in a standard Rails app. I found the way to do it is to use a system, and looks like you can use this command:
#config/application.rb
config.sass.line_comments = false
This is confirmed with this information:
Using Rails 4.1 and after looking and looking (and possibly misreading
the documentation) I got this to work by adding the following to
/config/environments/development.rd & production.rb
config.sass.preferred_syntax = :scss
config.sass.style = :compact
config.sass.line_comments = false
Style can be set to :nested,
:expanded, :compact, :compressed. You can see the different options
here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
Also, make sure to restart your server to see the compiled version
change
Hope this helps someone.
I’m trying to create my own website and I’m using Nanoc. I’m also writing my files in HAML and SASS.
When I’m writing into my SASS file, I always have the error
Haml::SyntaxError: Illegal nesting: nesting within plain text is illegal
when I compile (nanoc compile).
My sass files are in /content/css and I would like they go in /output/css
The thing I don’t understand is that if I put spaces or if I put a tab, it doesn’t compile. The only thing which works is when I don’t put any spaces or tabs. It compiles but the CSS in output doesn’t work.
I looked here before : https://groups.google.com/forum/#!topic/nanoc/UI4VccZCDD4 but it doesn't correct my compilation error.
I let my style.sass file and my Rules file below.
What is causing this issue and how can I resolve it?
div.title
width: 80%
background-color: #b7b8b2
If I put no spaces before width and background, it compiles but doesn't work.
#!/usr/bin/env ruby
require 'compass'
Compass.add_project_configuration 'config.rb' # when using Compass 0.10
### Compile rules
compile '/content/css/*' do
filter :sass, Compass.sass_engine_options # add the second parameter for Compass
end
compile '*' do
if item.binary?
# don’t filter binary items
else
filter :haml
layout 'default'
end
end
### Route rules
route '/content/css/*' do
#'/style.css'
# item.identifier.chop + '.css' #so that the /content/stylesheet.sass item is compiled in sass
unless item.identifier.start_with?('/content/css/_') # for partials
item.identifier.gsub(/\/$/, '') + '.css'
end
end
route '*' do
if item.binary?
# Write item with identifier /foo/ to /foo.ext
item.identifier.chop + '.' + item[:extension]
else
# Write item with identifier /foo/ to /foo/index.html
item.identifier + 'index.html'
end
end
### Layout rules
layout '*', :haml
The CSS compilation rule has an error. It should say
compile '/css/*'
instead of
compile '/content/css/*'
Item identifiers do not start with /content.
I'm looking for a way to use the Less Preboot mixins in my Rails project.
Gems Gemfile:
gem "less-rails"
gem "twitter-bootstrap-rails"
Layout application.html.erb:
<%= stylesheet_link_tag "application", :media => "all" %>
Stylesheet application.css.less.erb:
/*
*= require bootstrap_and_overrides
*= require_self
*/
.navbar .navbar-inner {
#gradient > .vertical(#333,#000);
}
But the Preboot mixin #gradient > .vertical is not found, giving this error:
#gradient > .vertical is undefined
(in */app/assets/stylesheets/application.css.less.erb)
The Bootstrap Github page tells me it was built with Preboot:
"Bootstrap was built with Preboot" (Source: https://github.com/seyhunak/twitter-bootstrap-rails#using-with-less)
I believe you have to define - override the styles provided by Twitter Bootstrap - all the css components in the bootstrap_and_overrides.css.less file. You can create your ids and classes through your application and define the style in this file... Well, this is the way I use twitter-bootstrap-rails...
There are other options... this article compare some of them: http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/
Also, there is a very good railscast about it: http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
If you want to use the Preboot mixins in your Rails project with twitter bootstrap you need to add the following to the top of the LESS file you want to use them in:
#import "twitter/bootstrap/variables";
#import "twitter/bootstrap/mixins";
After this you are able to use the gradients, and all other Preboot mixins:
#content {
#gradient > .vertical( #eee, #ccc );
}