Why is this fundamental SASS file not compiling? - compass-sass

Here is the .sass file:
/* Welcome to Compass.
*
* ie.sass
*
* Use this file to write IE specific override styles.
*
* Import this file using the following HTML or equivalent:
* <!--[if IE]>
* <link rel="stylesheet" type="text/css"
* href="/stylesheets/ie.css" media="screen, projection" />
* <![endif]-->
*/
html {
font-size: 24px;
}
Here is the error generated by Koala:
/*
Error: Invalid CSS after "html ": expected selector, was "{"
on line 14 of /Users/johnlove/Sites/www.lovetoteach.dev/Web_Site_Storage/lovesongforever.com/coronavirus/Coronavirus_Support/sass_test/ie_test.sass
9: * <link rel="stylesheet" type="text/css"
10: * href="/stylesheets/ie.css" media="screen, projection" />
11: * <![endif]-->
12: *\/
13:
14: html {
15:
16: }
I've made certain all properties are indented once. I have also eliminated the {} and trailing semi-colons.
Same error!
Why?

The answer is that even the resident sass compiler demands that the input sass file does not have either {} or the trailing ;
So, when I eliminate both, the sass compiler registers success.
I thought either with or without {} and with or without ; was acceptable?
I have answered my original question, only to replace it with a different question?
I finally forced myself to decide which I liked best. It is clear that I strongly prefer SASC because I strongly prefer the {} over the indented syntax of SASS. Don’t really care too much about semicolons, but I abhor relying on indentation.
So SASC wins also because just changing the file extension from .css to .sasc makes the newly named .sasc compile as a SASC file

Related

PhpStorm error "unexpected interpolation" when using interpolation on variable in #import within SCSS file

I want to add a path prefix in an #import in my main theme.scss file but am getting the error Unexpected interpolation.
(I am using interpolation because the variable is in a string.)
$path-prefix: "../Scss/";
// No error on this
.test::before {
content: "#{$path-prefix}";
}
// But this produces and error
#import "#{$path-prefix}variables";

Replace image src in vml markup with globally available images using Nokogiri

Is it possible to find outlook specific markup via Capybara/Nokogiri ?
Given the following markup (erb <% %> tags are processed into regular HTML)
...
<div>
<!--[if gte mso 9]>
<v:rect
xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style="width:<%= card_width %>px;height:<%= card_header_height %>px;"
>
<v:fill type="tile"
src="<%= avatar_background_url.split('?')[0] %>"
color="<%= background_color %>" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
How can I get the list of <v:fill ../> tags ? (or eventually how can I get the whole comment if finding the tag inside a conditional comment is a problem)
I have tried the following
doc.xpath('//v:fill')
*** Nokogiri::XML::XPath::SyntaxError Exception: ERROR: Undefined namespace prefix: //v:fill
DO I need to somehow register the vml namespace ?
EDIT - following #ThomasWalpole approach
doc.xpath('//comment()').each do |comment_node|
vml_node_match = /<v\:fill.*src=\"(?<url>http\:[^"]*)"[^>]*\/>/.match(comment_node)
if vml_node_match
original_image_uri = URI.parse(vml_node_match['url'])
vml_tag = vml_node_match[0]
handle_vml_image_replacement(original_image_uri, comment_node, vml_tag)
end
My handle_vml_image_replacement then ends up calling the following replace_comment_image_src
def self.replace_comment_image_src(node:, comment:, old_url:, new_url:)
new_url = new_url.split('?').first # VML does not support URL with query params
puts "Replacing comment src URL in #{comment} by #{new_url}"
node.content = node.content.gsub(old_url, new_url)
end
But then it feels like the comment is actually no longer a "comment" and I can sometimes see the HTML as if it was escaped... I am most likely using the wrong method to change the comment text with Nokogiri ?
Here's the final code that I used for my email interceptor, thanks to #Thomas Walpole and #sschmeck for help along the way.
My goal was to replace images (linking to localhost) in VML markup with globally available images for testing with services like MOA or Litmus
doc.xpath('//comment()').each do |comment_node|
# Note : cannot capture beginning of tag, since it might span across several lines
src_attr_match = /.*src=\"(?<url>http\:[^"]*)"[^>]*\/>/.match(comment_node)
next unless src_attr_match
original_image_uri = URI.parse(src_attr_match['url'])
handle_comment_image_replacement(original_image_uri, comment_node)
end
WHich is later calling (after picking an url replacement strategy depending on source image type) :
def self.replace_comment_image_src(node:, old_url:, new_url:)
new_url = new_url.split('?').first
node.native_content = node.content.gsub(old_url, new_url)
end

What is the error in this SASS sentence?

/* Sass Document */
$color_main: '#0671B2';
$color_secundary: '#019FAA';
a{color:$color_main}
Dreamweaver 2017 return this:
body:before { white-space: pre; font-family: monospace; content:
"Error: Invalid CSS after \"'#0671B2'\": expected expression (e.g.
1px, bold), was \";\"\A on line 3 of
D:\Servidores\EasyPHP-12.1\www\2016\Buzzon\BuzzonWeb\assets\css\style.sass\A
\A 1: /* Sass Document */\A 2: \A 3: $color_main: '#0671B2';\A 4:
$color_secundary: '#019FAA';\A 5: \A 6: a{color:$color_main}"; }
Ok I found the problem, the file extension of my file was .sass the correct is .scss and problem solved!

gh-pages - Jekyll fails to build - "did not find expected node content while parsing"

I'm trying to get a gh-pages site up and running. First time using Jekyll.
I have a super basic layout (default.html) in /_layouts:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<section id="main">
{{ content }}
</section>
</div>
</body>
</html>
And a single content page (index.html)
---
layout: default
---
Hello World
My _config.yml file is simply
pygments: true
When running jekyll --no-auto --server I get the following error. No files are generated.
.rvm/rubies/ruby-1.9.3-p327/lib/ruby/1.9.1/psych.rb:203:in `parse':
(<unknown>): did not find expected node content while parsing a flow
node at line 3 column 1 (Psych::SyntaxError)
Anyone know what's wrong here?
Since line 3 is <head>, it is possible that some basic metadata is missing, like <title>.
All template I see have a title (zinga, Symplicity, ... either fixed or generated), and the most basic template has one too (see "Hello World, I'm Jekyll")
<html>
<head>
<title>Hello world!</title>
</head>
<body>
<h1>Hello world!</h1>
<p>This is my first Jekyll website.</p>
</body>
</html>
You should check that what it's parsing is YAML at all.
The way I'm checking this in by putting some debug commands in the gem directly and re-running.
Change the psych.rb which for me is at /home/user/.rbenv/versions/2.0.0-p0/lib/ruby/2.0.0/psych.rb. Look for the def self.load and change it from
def self.load yaml, filename = nil
result = parse(yaml, filename)
result ? result.to_ruby : result
end
to
def self.load yaml, filename = nil
puts "****************#{filename}"
result = parse(yaml, filename)
result ? result.to_ruby : result
end
and look for the output in your terminal when you re-run the command.
I am currently dealing with deploying a rails app with capistrano (no jekyll at all). In my case, the output was blank, which is obviously not a filename. So now I'm investigating further up the chain. I hope that gets you started.

SASS: syntax errors when using shorthand syntax

My scss file is this:
#import "compass/typography/lists/bullets";
.view-content ul
+no-bullets
This gives me an error on the page:
Syntax error: Invalid css after " +no-bullets": expected "{", was ""
However, when the rule looks like this:
.view-content ul {
#include no-bullets;
}
then it's OK and bullets are gone.
But I like the shorthand notation, how to enable using it?
You're right, I found the related documentation.
I tried the following and it works.
Then, I tried your and it didn't work until I remove the trailing ; on the import instruction.
#import "compass/typography/lists/bullets"
.view-content ul
+no-bullets
The following works with Compass 0.12.2. Try removing the trailing ; on the import instruction.

Resources