So we've got a standard Compass CSS project, with the sass and css directories. As a scenario, let's say that the .scss file is called foo-all.scss.
Is it possible, via command line or config.rb or any other means, to have Compass generate both a foo-all.css file, using the "compressed" style, and also a foo-all-debug.css file using the "expanded" style?
It seems to me like Compass will refuse to generate a CSS file that doesn't have the exact same name as the .scss file, and that the most you can do is specify which directory the CSS file gets generated to.
On my MacOS X shell I've been able to generate two different css (production.css and development.css) from a original.scss sass file in this way
fc-iMac:sass fcalderan$ sass -t compact --watch original.scss:production.css &
sass -t expanded --watch original.scss:development.css
(I've used compact instead of compressed but the example is still valid)
Doing so, every time I make a change to original.scss I've got two updated css file in the same folder (with a different output style)
Of course if you have many scss files to watch, you could specify an entire directory to watch instead of a single file (see SASS documentation for further reference)
This seems like somewhat of a deficiency in Compass. Is this really an uncommon thing to do? Regardless, here's what I went with. Let's say that the folder structure is like this:
Rakefile
/foo
/resources
/css
/debug
/sass
foo-all.scss
And then in the Rakefile, to generate both compressed and expanded version, I do this:
Dir.chdir "foo/resources/sass" do
# Compile both expanded and compressed variations
debugdir = File.join(File.dirname(__FILE__), 'foo/resources/css/debug')
sh "compass compile --output-style compressed --force"
sh "compass compile --output-style expanded --force --css-dir #{debugdir}"
mv "../css/debug/foo-all.css", "../css/foo-all-debug.css"
end
In essence, I generate the compressed CSS file in a separate /debug directory, and then move it up to the /css directory, to preserve URL paths in the CSS file. The debudir shenanigans are necessary because Compass seems to require an absolute path when using the -css-dir switch (on Windows, anyway).
Related
I'm having trouble understanding Laravel 5's elixir pathing. In my project, I have multiple css files (bootstrap, plugins, theme etc) and javascript files stored under:
resources/assets/css/<my css files>
resources/assets/js/<my javascript files>
I simply want to combine and version all styles and scripts and place them in my public directory. I believe the default output directly is:
public/build/css/app-xxxxxxxx.css
public/build/js/app-xxxxxxxx.js
(Where xxxxxxxx is the checksum using the version method)
What should my gulpfile.js look like to achieve this? Thanks!
You can use full path on the name or set the third parameter as default path. Examples (works with scripts or css):
mix.stylesIn('resources/assets/css', 'public/css/all.css');
Since there is a bug where you can't use the output of a somethingAll to concatenate with something else, I use this instead (note the wildcard):
mix.scripts(['maskedinput.js',
'blockui.js',
'user/*.js'],
'public/js/user.js', 'resources/assets/js/');
First parameter is the input files, second is the output file, third is the input's default path.
To version just call it on the file path.
mix.version("public/js/user.js");
After I installing Sass ruby gem, three new commands have been added into the system: sass, scss and sass-convert. So, my question is what the difference between sass and scss commands is, do they share the same functionality? Because both of them can turn .sass file or .scss file into .css file:
$ sass style.sass style.css
$ sass style.scss style.css
$ scss style.sass style.css
$ scss style.scss style.css
All this four kinds of directives can run correctly.
PS: I'm NOT asking the differences between SCSS syntax and Sass syntax.
The command scss is equivalent to sass --scss, where the command sass is equivalent to scss --sass. These two commands (a.k.a. the two options) use different default syntax for syntax selection.
At first, both scss and sass would parse your syntax based on your file extension. (scss would use the sass syntax parser if your file extension is sass, and vice versa.) They would behave the same in this case and that's why you get the correct result.
However, if your file doesn't have a file extension. The command would parse the syntax using the default syntax. For example, the following code would give you correct result because it uses sass syntax parser.
$ scss style.sass style.css
The following code would probably give you a parsing error because it uses scss syntax parser.
$ scss style_sass.txt style.css
Using the --help flag on your command would have given you your answer:
sass-convert:
$ sass-convert --help
Usage: sass-convert [options] [INPUT] [OUTPUT]
Description:
Converts between CSS, Sass, and SCSS files.
E.g. converts from SCSS to Sass,
or converts from CSS to SCSS (adding appropriate nesting).
scss:
$ scss --help
Usage: scss [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
sass:
$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.
The main reason for this is the addition of features that CSS painfully lacks (like variables).
Re the difference between SCSS and Sass, the text on the Sass home page should answer the question:
Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.
I recently discovered Jade and want to give it a try for a new static website. I like the terse syntax and the templating capabilities, so much better than raw HTML. I'm editing in Webstorm 6, which has support for file watchers, and can run e.g. Sass out of the box. I've been able to run Jade via the command line to watch my Jade files:
jade --watch --out public jade
I'm now trying to configure my project in Webstorm to handle this automatically, and I'm running into problems.
To keep the source files separate from the generated ones, I'm aiming for a layout like this:
root
jade
index.jade
subdir
subdir.jade
public
index.html
subdir
subdir.html
With the Arguments field set as:
--out $ProjectFileDir$\public\$FileNameWithoutExtension$.html $FileDir$\$FileName$
To start with, I have the following within my jade folder:
index.jade
subdir
index.jade
The result in my public folder is:
index.html (folder)
index.html (file)
subdir.html (folder)
subdir.html (file)
This is the first time I've tried to use the file watcher feature, and the available macros are confusing me. Has anyone with experience in a similar situation any suggestions?
jade --out option specifies the directory, not the file:
-O, --out <dir> output the compiled html to <dir>
To retain the directories structure you will have to use $FileDirPathFromParent$ macro that takes a parameter.
For example, for the C:\project\public\jade\subdir\subdir.jade file we need it to return the path right to the jade directory, that would be the parameter for the macro: $FileDirPathFromParent(jade)$, and the result would be subdir.
Now if you set the Working directory to $FileDir$, the Arguments would be:
$FileName$ --out $ProjectFileDir$\public\$FileDirPathFromParent(jade)$
And the complete Jade File Watcher for this specific project layout would look like this:
When I compile my SCSS, I'm getting a "file not found" error that leads me to believe there is something wrong with my config.rb. The error from the command line includes part of the path twice as well as the ".." relative directory:
File not found or cannot be read:
C:/REALLY_LONG_PATH/C:/REALLY_LONG_PATH/../img/avatar.jpg
The config.rb reads as follows:
# Delineate the directory for our SASS/SCSS files (this directory)
sass_path = File.dirname(__FILE__)
# Delineate the CSS directory (under resources/css in this demo)
css_path = File.join(sass_path, "..", "css")
# Delinate the images directory
images_dir = File.join(sass_path, "..", "img")
# Load the sencha-touch framework
load File.join(sass_path, '..', 'js', 'sencha', 'resources', 'themes')
# Specify the output style/environment
output_style = :expanded
environment = :production
This error is not present if I omit the CSS that references it in the SCSS file:
background-image: inline-image('avatar.jpg');
But considering the fact that I'd like to actually use the image, this creates a problem for me. Any help would be gravy.
EDIT: Another thing worth noting is the fact that my CSS seems to render just fine in the appropriate directory using the identical format as the that of the img path.
The workaround at this point is to use straight url('image.jpg') calls, but eventually inline-image('image.jpg') will need to be used for optimization. (Which is beyond the scope of this thread, so I'm counting this as answered, unless someone has a better explanation.)
UPDATE
Better answer: Trust the error and actually include the file(s) it says it needs. What threw me before was that the path name looked way wrong, but it was likely due to my own improper concatenation of the path. Also, don't be thrown by the ".." in the middle of the resulting path. It just means "move up a dir" and is, of course still legal.
I just setup Webby/Compass integration.
(https://github.com/Compass/compass/wiki/webby-integration)
Where do I put my Compass/Sass source files, and in what directory do they get
output as stylesheets?
You can put your SASS files wherever you want (under the 'content/' directory). So if the directory containing your CSS files is 'content/css', then put them there.
The only important thing is that you set the metadata part correctly, at the top of the SASS file itself. Like this:
$ cat content/css/site.sass
---
filter: sass
extension: css
layout: nil
---
[..cut..]
It looks like you can set the source-file yourself, from the documentation:
Compass.configuration do |config|
config.project_path = File.dirname(__FILE__)
config.sass_dir = File.join('src', 'stylesheets' )
end
It looks like it defaults to "src/stylesheets". When you build it it will probably get rendered to "output/css/" but I never used webby myself so im not 100% sure.
Okay found it in this repository
Apparently it belongs in the ./content/stylesheets directory of your webby project, and is output to the ./output/stylesheets directory.
What perplexes me is "why" it works this way. Why File.join? It looks like the default "src" is being replaced by "stylesheets" rather than joining a new string. Curious.