I got a navwheel generated from https://pmg.softwaretailoring.net/ but after going through their documentation I can't figure out how to add spcaing between the items in the wheel. They're cluttered together. Is there any function on the wheelnav object instantiated that I don't know of? I tried to go through their .js files to find it manually, but can't find anything.
You can use the stroke-width property with your background color to achieve spacing.
When cssMode is true use the following CSS.
[id|=wheelnav-wheelDiv-slice] {
fill: white;
stroke: *background-color*;
stroke-width: 10px;
cursor: pointer;
}
More info here: https://wheelnavjs.softwaretailoring.net/documentation/css3.html
Without cssMode use the following JavaScript.
var wheel = new wheelnav("wheelDiv");
wheel.slicePathAttr = { stroke: "*background-color*", "stroke-width": 10, cursor: 'pointer' };
wheel.sliceHoverAttr = { stroke: "*background-color*", "stroke-width": 10, cursor: 'pointer' };
wheel.sliceSelectedAttr = { stroke: "*background-color*", "stroke-width": 10, cursor: 'default' };
wheel.createWheel(["First", "Second", "Third", "Fourth"]);
Alternatively, you can create your own slicePath via customization.
More info here: https://wheelnavjs.softwaretailoring.net/documentation/slicePath.html#tutorial
Related
My end product here is a situation where I can have different levels of a fade effect on my links and hover. So in this situation, it won't matter what color I chose for theme background, the links and hover will change to match. This will also also allow for using the fade variable to style any other element.
I setup a CodePen to demonstrate this http://codepen.io/SiscoKid/pen/dMzXzJ.
I would like to clean this up and also extend it to include Internet Explorer functionality.
// Fade
$fade-base: #fff;
$fade0: rgba($fade-base, 0);
$fade1: rgba($fade-base, 0.1);
$fade2: rgba($fade-base, 0.2);
$fade3: rgba($fade-base, 0.3);
$fade4: rgba($fade-base, 0.4);
$fade5: rgba($fade-base, 0.5);
$fade6: rgba($fade-base, 0.6);
$fade7: rgba($fade-base, 0.7);
$fade8: rgba($fade-base, 0.8);
$fade9: rgba($fade-base, 0.9);
$fade10: rgba($fade-base, 1);
//
// Color
$test-color: #f00;
$theme-base: #483; // CHANGE ME
$title-color: $fade5;
//
// Links
#mixin links() {
a {
color: $fade3;
&:hover {
color: $fade1;
}
}
}
//
// Body
#mixin main() {
#include links;
background-color: $theme-base;
}
.main {
#include main();
}
I want to be able to do something like:
color: $fade(0.3);
Instead of:
color: $fade3;
So what is the best way to achieve this expanded functionality?
I have done some research and found that we cannot dynamically assign these variables.
dynamic variables #1450
I'm not completely sure exactly what the end product is your trying to achieve here, but it does feel like it's creating needless CSS code.
Whats wrong with
&:hover {
background-color: rgba($fade-base, 0.9);
}
I'm not sure why you need to add a layer of complexity by wrapping it in a method?
I was able to develop a function to do this for me. I have also expanded this idea to include background-color fade accessibility.
//
// Fade
#function fades($percentage) {
#return lighten(255, (1-$percentage)*5%);
}
#mixin fade($type, $percentage) {
#if $type==cl {
color: rgba(#fff, $percentage);
}
#if $type==bg {
background-color: rgba(#fff, $percentage);
}
}
//
// Title
.title {
#include fade(cl, .5);
}
I am still unsure about expanding this for IE, as well as, dynamically creating gradient type classes. However, I think these might be topics for other questions.
Here is a link to the working CodePen.
Fade SCSS Function and Mixin
Thanks again to petehotchkiss for his feedback on this topic.
This question already has an answer here:
Define variables in Sass based on classes
(1 answer)
Closed 6 years ago.
i am making color changer for my web, is it possible to make variable like this :
.red { $color: red; $background: red; }
.green { $color: green; $background: green; }
.blue { $color: blue; $background: blue; }
thanks
There's nothing inherently wrong with your SASS here - at least in principle - but syntatically it's a tad skewed. Also, what your trying to do though requires so client side run-time code for it to be implemented.
First up though you don't actually need the variables - but we'll run with it. So change your sass to
$red: #ff1a1a;
$green: #5cd65c;
$blue: #1a75ff;
.blue { background-color: $blue; }
.green { background-color: $green }
.red { background-color: $red }
assuming this generates a CSS file and your importing this into your HTML page you'll need a little bit of Javascript to apply the appropriate colour class to the element you want to take on this property.
Assuming you have 3 elements ( buttons ) with unique ID's, which when clicked will change the background colour of an element id=foo you could have something like
var changeColor = function(col) {
document.getElementById("foo").className = col
}
document.getElementById('buttonblue').addEventListener('click',
function() {
changeColor('blue');
}, false);
document.getElementById('buttongreen').addEventListener('click',
function() {
changeColor('green');
}, false);
// ... etc etc for each color button you have
This is far from clean or modularised code, but hopefully it outlines the principle of the process which you need to follow
Here's a working codePen with the example: http://codepen.io/anon/pen/rewoOY
In CSS '.class1.class2' with no space between classes means:
'Select only those elements that have AT LEAST those 2 classes';
How can I declare that in LESS?
What I am getting at is:
Class featureCheckbox is declared below ...
.featureCheckbox
{
float: left;
margin-bottom: 6px;
height: 30px;
width: 300px;
font-size: 16px;
}
I wish to override 'width: 300px' with 'width: 150px' for elements that only have class="featureCheckbox class2" whilst picking up the other non-width rules associated with class featureCheckbox.
Use & to reference the current selector.
.featureCheckbox {
// styles
&.class2 {
// overrides
}
}
This will compile to:
.featureCheckbox {
/* styles */
}
.featureCheckbox.class2 {
/* overrides */
}
You can use & character for this as below:
.featureCheckbox{
&.class2 {}
}
Less is backwards compatible to CSS, basic CSS selectors work identically in LESS.
Just write
.featureCheckbox.class2 {
...
like you would in CSS.
This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
Edit: I've come up with a solution, see my answer below.
Is there a way to do this? It is becoming quite cumbersome typing map-get($myArray, myKey). I have an array with dozens of values in, it would be very helpful if I could export them.
So that this:
$map: (
width: 100px,
height: 200px,
color: red,
background: blue
);
.myselector {
width: map-get($map, width);
height: map-get($map, height);
color: map-get($map, color);
background: map-get($map, background);
}
Becomes this:
$map: (
width: 100px,
height: 200px,
color: red,
background: blue
);
/* some function to convert the map to vars */
.myselector {
width: $width;
height: $height;
color: $color;
background:$background;
}
Please note that the example I have given is purely arbitrary.
Update: Ok, I've come up with a crafty half-fix. (Although this will be obvious to any discerning SCSS journeyman...)
As long as the elements you are trying to get are from the same array, you can always take advantage of the javascript style scope inheritance, and write a function with a short name that will pluck the element with the specified key from your array.
In reference to the example I gave originally:
#function g($key) {
#return array-get($map, $key);
}
.myselector {
width: g(width);
height: g(height);
color: g(color);
background: g(background);
}
For a single array with dozens of elements that you have to access frequently, it has the desired effect, and actually gives a feeling of the more convenient PHP style array syntax. i.e. instead of $g['width'] you use g(width)
$map: (
width: 100px,
height: 200px,
color: red,
background: blue
);
.myselector {
#each $prop, $val in $map {
#{$prop} : $val;
}
}
You can use #each. In the above #each loop, i'm cycling over each key/value pair in $map, assigning the key to $prop and the value to $val.
If you want, you can make a mixin (for example):
#mixin create-props($array) {
#each $prop, $val in $array {
#{$prop} : $val;
}
}
.myselector {
#include create-props($map);
}
I'm trying to use string interpolation on my variable to reference another variable:
// Set up variable and mixin
$foo-baz: 20px;
#mixin do-this($bar) {
width: $foo-#{$bar};
}
// Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin
#include do-this('baz');
But when I do this, I get the following error:
Undefined variable: "$foo-".
Does Sass support PHP-style variable variables?
This is actually possible to do using SASS maps instead of variables. Here is a quick example:
Referencing dynamically:
$colors: (
blue: #007dc6,
blue-hover: #3da1e0
);
#mixin colorSet($colorName) {
color: map-get($colors, $colorName);
&:hover {
color: map-get($colors, #{$colorName}-hover);
}
}
a {
#include colorSet(blue);
}
Outputs as:
a { color:#007dc6 }
a:hover { color:#3da1e0 }
Creating dynamically:
#function addColorSet($colorName, $colorValue, $colorHoverValue: null) {
$colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue);
$colors: map-merge($colors, (
$colorName: $colorValue,
#{$colorName}-hover: $colorHoverValue
));
#return $colors;
}
#each $color in blue, red {
#if not map-has-key($colors, $color) {
$colors: addColorSet($color, $color);
}
a {
&.#{$color} { #include colorSet($color); }
}
}
Outputs as:
a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }
Sass does not allow variables to be created or accessed dynamically. However, you can use lists for similar behavior.
scss:
$list: 20px 30px 40px;
#mixin get-from-list($index) {
width: nth($list, $index);
}
$item-number: 2;
#smth {
#include get-from-list($item-number);
}
css generated:
#smth {
width: 30px;
}
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions
Anytime I need to use a conditional value, I lean on functions. Here's a simple example.
$foo: 2em;
$bar: 1.5em;
#function foo-or-bar($value) {
#if $value == "foo" {
#return $foo;
}
#else {
#return $bar;
}
}
#mixin do-this($thing) {
width: foo-or-bar($thing);
}
Here's another option if you're working with rails, and possibly under other circumstances.
If you add .erb to the end of the file extension, Rails will process erb on the file before sending it to the SASS interpreter. This gives you a can chance to do what you want in Ruby.
For example: (File: foo.css.scss.erb)
// Set up variable and mixin
$foo-baz: 20px; // variable
<%
def do_this(bar)
"width: $foo-#{bar};"
end
%>
#target {
<%= do_this('baz') %>
}
Results in the following scss:
// Set up variable and mixin
$foo-baz: 20px; // variable
#target {
width: $foo-baz;
}
Which, of coarse, results in the following css:
#target {
width: 20px;
}
I came across the need to reference a colour dynamically recently.
I have a _colours.scss file for every project, where I define all my colours once and reference them as variables throughout.
In my _forms.scss file I wanted to setup button styles for each colour available. Usually a tedious task. This helped me to avoid having to write the same code for each different colour.
The only downside is that you have to list each colour name and value prior to writing the actual css.
// $red, $blue - variables defined in _colours.scss
$colours:
'red' $red,
'blue' $blue;
#each $name, $colour in $colours {
.button.has-#{$name}-background-color:hover {
background-color: lighten($colour, 15%);
}
}
I needed to use dynamic color values in sass variables.
After lots of search, I applied this solution:
In application.html.erb:
<style>
:root {
--primary-color: <%= current_client.header_color %>;
--body-color: <%= current_client.footer_color %>;
}
</style>
In variables.sass:
$primary: var(--primary-color);
And boom you are good to go!
Reference: https://medium.com/angular-in-depth/build-truly-dynamic-theme-with-css-variables-539516e95837
To make a dynamic variable is not possible in SASS as of now, since you will be adding/connecting another var that needs to be parsed once when you run the sass command.
As soon as the command runs, it will throw an error for Invalid CSS, since all your declared variables will follow hoisting.
Once run, you can't declare variables again on the fly
To know that I have understood this, kindly state if the following is correct:
you want to declare variables where the next part (word) is dynamic
something like
$list: 100 200 300;
#each $n in $list {
$font-$n: normal $n 12px/1 Arial;
}
// should result in something like
$font-100: normal 100 12px/1 Arial;
$font-200: normal 200 12px/1 Arial;
$font-300: normal 300 12px/1 Arial;
// So that we can use it as follows when needed
.span {
font: $font-200;
p {
font: $font-100
}
}
If this is what you want, I am afraid as of now, this is not allowed