Command-Line Argument as Var in Sass, for Hardcoded Cdn Url's on Compile

SASS: Set variable at compile time

I found this at their FAQ http://sass-lang.com/docs/yardoc/file.FAQ.html

If you just want to pass some variables to the CSS every time it gets compiled, like using --watch, you can use Sass functions to define Ruby scripts to even query a database. But the code is going to be compiled only once, and served statically.

But if you need to recompile it at every request with different options,

you can use Sass::Engine to render the code, using the :custom option
to pass in data that can be accessed from your Sass functions

Seems like it's not recommended, though. Probably for performance reasons.

Compile SASS files in separate folder with relative assets/urls?

Slick.js has it's own Sass variables for handling his fonts urls. So you have to properly assign the right path to that variable like this:

// Fonts
$slick-font-path: "./bower_components/slick-carousel/slick/fonts/";

You can check all slick's Sass variables here

How to overwrite SCSS variables when compiling to CSS

You're setting the color after it has already been used. Basically, what you're trying to do is this:

$color: red;

.foo {
    background: $color;
}

$color: green;

Depending on how jqtouch is written, you might not be able to modify the colors at all. You need the variables to be set as a default in order to overwrite them ahead of time:

$color: green;
$color: red !default; // red is only used if $color is not already set

.foo {
    background: $color; // color is green
}

So your code should be written as such:

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

@import 'jqtouch';

Pass SASS variable to image URL

Use Interpolation:

html { 
    background-image: url(http://basehold.it/i/#{$base-line-height}/777777);
}

Capture which li a class is attached to

This should be doable with nth-of-type. Something like this:

@mixin bg-mixin($Names){
    @each $bg-url in $Names{
        $i: index($Names, $bg-url );
        &:nth-of-type(#{$i}).Selected { background: url($bg-url); }
    }
}

and used like this:

ul li {
    @include bg-mixin($Names);
}

resulting in

ul li:nth-of-type(1).Selected {
  background: url("../Images/One.png");
}
ul li:nth-of-type(2).Selected {
  background: url("../Images/Two.png");
}
ul li:nth-of-type(3).Selected {
  background: url("../Images/Three.png");
}
ul li:nth-of-type(4).Selected {
  background: url("../Images/Four.png");
}
ul li:nth-of-type(5).Selected {
  background: url("../Images/Five.png");
}

Django, Grunt, and S3: Possible to have image URLs in CSS?

Looks like you could benefit from a Grunt plugin that rewrites urls (like grunt-css-url-rewrite), so you could leave the urls as relative without any special tokens. Add that task to your production build task, it will prepend/change paths however you configure it to.

---

Related Topics